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:

DOCTYPE: html
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.

Secure Coding ➟

Page updated

Google Sites

Report abuse