Skip to main content
Practice

HTML Elements

HTML Elements are the building blocks of a webpage, consisting of tags that describe the content and meaning of the HTML.


Basic Structure​

Most HTML elements are comprised of a start tag, an end tag, and the content in between.

Basic Structure of an HTML Element
<starttag>Content of the HTML element</endtag>

Example of Elements in Use​

The p element representing a paragraph
<p>Hello there!</p>

Essential HTML Elements​

  1. <h1> ~ <h6>: Heading Elements

    These represent headings and subheadings in a document from h1 to h6. <h1> is the highest level and most important heading, while <h6> is the least important, lowest level heading.

    Heading elements
    <h1>Main Heading</h1>
    <h2>Subheading</h2>
    <h3>Sub-subheading</h3>

  1. <p> ~ </p>: Paragraph Element

    Denotes a paragraph of text, similar to paragraphs in a book.

    Paragraph element
    <p>This is a paragraph tag in HTML.</p>

  1. <a> ~ </a>: Anchor (Link) Element

    Short for anchor, this element creates a hyperlink to another website or section within the same webpage.

    Anchor element for a link
    <a href="https://www.example.com">Visit example.com</a>

  1. <img />: Image Element

    Embeds an image into the webpage. The img tag is used as a self-closing tag, <img />.

    Image element
    <img src="imagepath.jpg" alt="Description of the image" />

  1. <ul>, <ol>, <li>: List Elements

    <ul> represents an unordered list, <ol> represents an ordered list, and <li> represents an item within these lists.

Unordered list
<ul>
  <li>Apple</li>
  <li>Carrot</li>
  <li>Banana</li>
</ul>

Ordered list
<ol>
  <li>To-do in the morning</li>
  <li>To-do in the afternoon</li>
  <li>To-do before sleep</li>
</ol>

Parent & Child Elements​

HTML elements have a hierarchical relationship consisting of parent and child elements.


Parent Element​

The parent element is the upper element that contains other HTML elements. The lower elements contained within a parent HTML element are referred to as 'children.'

Example:

Parent and child elements
<!-- This div is a parent element. -->
<div>
  <!-- This p is a child element. -->
  <p>Hello there!</p>
</div>

In the example above, the <div> element is the parent of the <p> element.


Child Element​

A child element is an element that resides within a parent element.

A single parent element can have multiple child elements, which can themselves have their own child elements.

Example:

ul parent element with li child elements
<ul>
  <!-- This ul is a parent element. -->
  <li>Apple</li>
  <!-- This li is a child element. -->
  <li>Banana</li>
  <!-- This li is also a child element. -->
</ul>

In the example above, the <li> elements are children of the <ul> element.


Practice​

Follow the emphasized sections in the code to try it yourself.