First HTML Page

Table of Contents +

Now that you have a basic understanding of HTML elements and tags, now we will create our first HTML page.

🏗️ First HTML Page creation steps

We will create a simple HTML page that displays a heading and a couple of paragraphs.

Create a new file named index.html.
Add the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body></body>
</html>

💡 Note

If using VS Code, you can type ! and press Tab or Enter that will auto-generate the basic HTML structure for you.

Inside the <body> tag, add a heading and a couple of paragraphs:

<body>
  <h1>Welcome to My First HTML Page</h1>
  <p>This is my first paragraph.</p>
  <p>This is my second paragraph.</p>
</body>

Save the file and open it in a web browser to see your first HTML page in action!

Now let’s understand what happens behind the scenes when you open an HTML page in a web browser.

🕵️‍♂️ How Browsers Render HTML

When you open an HTML page in a web browser, the browser performs the following four steps:

Parsing HTML: The browser reads the HTML file and parses the elements and tags to create a Document Object Model (DOM) tree.
Loading Resources: The browser fetches any external resources linked in the HTML, such as CSS stylesheets, JavaScript files, and images.
Rendering: The browser applies styles, executes scripts, and lays out the elements on the page according to the CSS rules and the DOM structure.
Painting: Finally, the browser paints the pixels on the screen, displaying the rendered webpage to the user.

Understanding this process can help you write better HTML and optimize your web pages for performance.

🏗️ HTML DOM tree

When the browser reads the HTML file, it creates a tree of nodes that represent the elements of the HTML document. This tree structure is known as the Document Object Model (DOM).

The Document Object Model (DOM) is a tree-like structure that represents the elements of an HTML document. Each element, attribute, and piece of text in the HTML is represented as a node in the DOM tree.

Here’s a simple representation of the DOM tree for our first example HTML page:

html
├── head
│   ├── meta (charset)
│   ├── meta (viewport)
│   └── title
└── body
    ├── h1
    ├── p
    └── p

In this tree structure:

The html element is the root.
The head and body elements are children of the html element.
Each heading and paragraph is a child of the body element.

The DOM allows JavaScript to interact with the HTML document, enabling dynamic updates and changes to the content and structure of the webpage.

Understanding HTML structure and creating HTML tree representation is key idea to learn HTML and web development.

🏗️ Importance of HTML DOM

Understanding DOM is useful as a Web Developer because it allows you to interact with the HTML document programmatically.

By Using DOM, you can:

Manipulate Content: Use JavaScript to change the content and structure of the webpage dynamically.
Access Elements: Easily select and modify HTML elements using methods like getElementById, querySelector, and more.
Respond to Events: Attach event listeners to elements, enabling interactive web applications.
Create Dynamic Interfaces: Build responsive and dynamic user interfaces by updating the DOM in real-time.

Don't think too much

The DOM is very powerful and complex topic, but you don’t need to understand all of it at once. We will start with the basics and build your knowledge gradually.

Previous HTML Elements and Tags Next HTML Headings

Share & Connect

Share on LinkedIn