Home /Blog/ Creating your first web page in pure HTML 🎉

Code, Guides, HTML

Creating your first web page in pure HTML 🎉

In our previous HTML example, we aimed to provide you with a quick overview to get you started. However, we need to delve deeper into the essential elements of a proper HTML file to ensure clarity and correctness.

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.

Raman Singh

Raman is a digital marketing expert with over 8 years of experience. He has a deep understanding of various digital marketing strategies, including affiliate marketing. His expertise lies in technical SEO, where he leverages his skills to optimize websites for search engines and drive organic traffic. Raman is passionate about staying up-to-date with the latest industry trends and sharing his knowledge to help businesses succeed in the online world.