Introduction to HTML
  • 28 Sep 2020
  • 1 Minute To Read
  • Contributors
  • Print
  • Share
  • Dark
    Light

Introduction to HTML

  • Print
  • Share
  • Dark
    Light

Introduction to HTML

Web pages are written in a markup language called HTML. A browser, like Chrome or Firefox, uses the HTML to produce the visual webpage you see when you visit that page. Everything on the page, such as an image, link, or paragraph of text, can be found in the HTML. Here’s an example of some simple HTML.

<ul class=“bookstore”>  
    <li class=“book”>  
        <img src=“BookCover.jpg”/>  
        <div class=“title” lang=“en”>Harry Potter</div>  
        <span class=“author”>J K. Rowling</span>  
        <span class=“year”>2005</span>  
        <span class=“price”>29.99</span>  
    </li>  
</ul> 

Here’s how that HTML might be rendered on a web page.
An example of how the sample HTML might look on a webpage.

Element

Each object on a web page is contained by an element in the HTML. For example, in the image above you can see a blue price: 29.99. That price is contained in a <span> element in the example HTML.

Attribute / Value

Some HTML elements have an attribute that describes that element. An attribute usually has a value.

In the example HTML above, the <span> element that contains the price has an attribute called <class> with the value “price”:

<span class="price">29.99</span>

Parent / Child / Sibling

Some HTML elements contain other elements. In the HTML example above, the <img> element is contained in the <li> element. In other words, the <img> element is a child of the <li> element. This is typically shown by it being indented under its parent element (<li class="book">):

How child elements are indented under their parent element in HTML/XML.

A parent is any element that contains one or more child elements. The <div class=“title” lang=“en”> element is also a child to the <li>. It's also a sibling to the <img> element since they share a parent element:

How sibling child elements are indented under their parent element in HTML/XML.

Was This Article Helpful?