Overview

HTML (HyperText Markup Language) is the foundation of every webpage. It structures content using elements (or "tags"). In this tutorial, you'll learn:

  • The basic structure of an HTML document.
  • Common HTML elements.
  • How to properly nest elements.

Step-by-Step Explanation

1. Document Structure & Doctype

Every HTML document starts with a declaration that tells the browser which version of HTML is being used. For HTML5, use:

</span>

Then, wrap all content inside the element:

lang="en">
...

The lang attribute improves accessibility and SEO.

2. Head and Body Sections

An HTML document is divided into two main sections:

  • : Contains metadata, such as the title, character set, and links to stylesheets.
  • : Contains visible content, such as text, images, and links.

    3. Essential HTML Tags

    Headings

    HTML provides six levels of headings, from

    (largest) to
    (smallest):

    Main Heading
Subheading

    Paragraphs

    Use

    for text content:

    This is a paragraph.

    Lists

    • Unordered List (
        )        : Uses bullet points.
      • Ordered List (
          )          : Uses numbers. 
        Item 1
    Item 2

        Images

        Use the tag to embed an image. Always include the alt attribute for accessibility:

        src="image.jpg" alt="Description of image">

        Links

        The tag defines hyperlinks:

        href="https://www.example.com">Visit Example

        Interactive Coding Example

        Open a code editor (or an online editor like CodePen or JSFiddle) and try this:

        </span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    My First HTML Page


    Welcome to HTML Basics
    This is a paragraph introducing the page.

    My Favorite Things
    
        Coding
        Design
        Gaming
    

     src="https://media.istockphoto.com/id/2075908648/photo/engineer-man-hand-type-keyboard-input-configuration-data-ode-for-register-system-structure-or.webp?s=612x612&w=is&k=20&c=H3eN_gF30LRRvD9ex27D0kBRf7mBrzGr1uP9SK0BtwU=" alt="Placeholder image">
    
     href="https://www.example.com">Visit Example.com

        Exercise

        • Add another paragraph after the list.
        • Change "My Favorite Things" to

          and observe how it affects the page hierarchy.

        Additional Resources