HTML Structure

Elements and attributes are used to mark up your content in an HTML document.

An HTML document is a text file with .html file extension.

Two elements provide the outer structure of an HTML document:

DOCTYPE element
html element

The DOCTYPE element tells the browser it is dealing with an HTML document. This is expressed through the HTML boolean attribute:

The start tag of html follows the DOCTYPE element.

HTML documents are text files containing html tags. HTML tags in HTML documents mark up Web pages.

             <!DOCTYPE HTML>
    <html> 
        <body> 
            <h1>My Heading</h1> 
            <p>My paragraph</p> 
        </body> 
    </html>

metadata

The metadata in HTML document provides information about your document.

The metadata is contained inside a head element.

           <!DOCTYPE HTML>
  <html>
      <head>
          <!--  define your metadata here   -->
          <title>web document title</title>
      </head>
  </html>

The title element in the code above is metadata.

Most browsers display the title element in the browser window title bar or at the top of the tab that displays the page.

body

The content of a html document is added through the body Element.

           <!DOCTYPE HTML>
  <html>
      <head>
          <!--  metadata goes here   -->
          <title>Example</title>
      </head>
      <body>
         This is the <code>content</code>.
      </body>
  </html>

Parent vs Child

HTML elements defines relationships with the other elements in an HTML document.

An element that contains another element is the parent of the second element.

An element can have multiple children, but only one parent.

           <!DOCTYPE HTML>
  <html>
      <head>
          <!--  metadata goes here   -->
          <title>Example</title>
      </head>
      <body>
         This is the <code>content</code>.
      </body>
  </html>

Children are direct descendants.

Elements that share the same parent are known as siblings.