HTML Structure

We will look into the structure of the HTML page in certain perspectives:

  • Markup structure
  • Rendering and Interpretation

Markup Structure

HTML mainly consists of 2 primary structures:

  • <head> ... </head> - describing what is the page is all about, how to read/display the body, notes, raw materials, etc.
  • <body ... </body> - contents of the page.

Hierarchical Document Object Model

For the HTML code:

<!DOCTYPE html>
<html>
        <head>
                <title>Sample page</title>
        </head>
        <body>
                <h1>Sample page</h1>
                <p>This is a <a href="demo.html">simple</a> sample.</p>
                <!-- this is a comment -->
        </body>
</html>


It generates this type of Document Object Model (DOM), as in:

  1. DOCTYPE: html
  2. html
    1. head
      1. #text: ⏎␣␣
      2. title
        1. #text: Sample page
      3. #text: ⏎␣
    2. #text: ⏎␣
    3. body
      1. #text: ⏎␣␣
      2. h1
        1. #text: Sample page
      3. #text: ⏎␣␣
      4. p
        1. #text: This is a
        2. a href="demo.html"
          1. #text: simple
        3. #text: sample.
      5. #text: ⏎␣␣
      6. #comment: this is a comment
      7. #text: ⏎␣⏎

Notice the mapping from the code opening and closing. Therefore, it is always a best practice to close the html tag. This DOM tree is manipulatable by script, known as Javascript.

That's all about structure. You may proceed to the next section - securely code HTML.