HTML Basics: A Beginner's Guide

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: Then, wrap all content inside the element: ... 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: Links The tag defines hyperlinks: Visit Example Interactive Coding Example Open a code editor (or an online editor like CodePen or JSFiddle) and try this: My First HTML Page Welcome to HTML Basics This is a paragraph introducing the page. My Favorite Things Coding Design Gaming 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 MDN Web Docs – HTML Basics

Mar 10, 2025 - 12:45

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:

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 (

)

Ordered List (


    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:


 lang="en">

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


    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

MDN Web Docs – HTML Basics