Creating your first web page in pure HTML 🎉

Problem Statement & Scenario

The Problem

Let's revisit we wrote initially

<p>A paragraph of text</p>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

While this allowed us to create a functional HTML page, it lacked some fundamental elements necessary for a well-formed HTML document. Consider the following improved version:

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <p>A paragraph of text</p>

    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
  </body>
</html>

Now, let's break down the key components

<!DOCTYPE html>: This declaration, placed at the top, signals to the browser that the document is an HTML file.
<html>: The root element that wraps the entire HTML document. Inside it, you'll find the <head> and <body> sections.
<head>: This section contains meta-information about the document, such as the title, character set, linked stylesheets, and more. In this example, it's left empty for simplicity.
<body>: The container for the visible elements of the page. It encompasses the content you want to display, including paragraphs, lists, images, and more.

It's crucial to note that an HTML document should have only one occurrence of the <html>, <body>, and <head> elements.

Additionally, notice the indentation used in this example. Each nested tag, such as <head> inside <html> or <ul> inside <body>, is indented for clarity. Indentation helps maintain a "tree structure," making it easier to visually parse and understand the hierarchy of elements in an HTML file.

Whether you prefer a 2-character or 4-character indentation (or tabs), consistency is key to ensuring a clean and organized HTML structure. Adopting a systematic approach will greatly enhance your ability to navigate and modify HTML files effectively.

Debasis Bhattacharjee

Creating your first web page in pure HTML 🎉

Let's revisit we wrote initially

Now, let's break down the key components

Want to master snippets like this?