📄 HTML Basics

HTML (HyperText Markup Language) is the backbone of every website. It structures content using elements called tags. Let's learn how to create your first web page!

HTML Document Structure

Every HTML document follows a standard structure. This is the minimal template you need:

Basic HTML Template

<!DOCTYPE html>
<!-- Declares this is an HTML5 document -->

<html lang="en">
<!-- Root element, contains all content. lang="en" sets language to English -->

<head>
  <!-- Metadata: information ABOUT the page (not displayed) -->

  <meta charset="UTF-8">
  <!-- Character encoding: supports all languages and symbols -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Makes page responsive on mobile devices -->

  <title>My First Web Page</title>
  <!-- Title shown in browser tab -->
</head>

<body>
  <!-- Visible content goes here -->
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
</body>

</html>

⚠️ Important

Save your HTML files with the .html extension (e.g., index.html). The file named index.html is special - it's the default page browsers load when you visit a website or folder.

HTML Tags and Elements

HTML uses tags to mark up content. Most tags come in pairs:

Tag Structure

<tagname>Content goes here</tagname>
   ↑              ↑              ↑
Opening tag    Content      Closing tag

<!-- Together, they form an ELEMENT -->

Opening tag: <tagname> - Marks where the element starts
Content: The text or other elements inside
Closing tag: </tagname> - Marks where it ends (has a forward slash)

Self-Closing Tags

Some tags don't have content and don't need a closing tag:

<!-- Images -->
<img src="photo.jpg" alt="Description">

<!-- Line breaks -->
<br>

<!-- Horizontal line -->
<hr>

<!-- Link to CSS or other files -->
<link rel="stylesheet" href="style.css">

Common HTML Tags

Headings

Headings create a hierarchy of content, from most important (h1) to least important (h6).

HTML

<!-- Always use only ONE h1 per page (main heading) -->
<h1>Main Page Title</h1>

<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Smaller heading</h5>
<h6>Smallest heading</h6>

Live Example

Main Page Title

Section Heading

Subsection

Sub-subsection

Paragraphs and Text

<!-- Paragraph: block of text -->
<p>This is a paragraph of text.</p>

<!-- Line break: creates a new line within text -->
<p>First line<br>Second line</p>

<!-- Strong (bold) text -->
<p>This is <strong>very important</strong></p>

<!-- Emphasis (italic) text -->
<p>This is <em>emphasized</em></p>

<!-- Mark (highlight) text -->
<p>This is <mark>highlighted</mark></p>

Links (Anchors)

Links let users navigate between pages. The href attribute specifies the destination.

<!-- Link to another page -->
<a href="about.html">About Us</a>

<!-- Link to external website -->
<a href="https://google.com">Visit Google</a>

<!-- Open in new tab (target="_blank") -->
<a href="https://google.com" target="_blank">Open in new tab</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Send us an email</a>

<!-- Phone link (clickable on mobile) -->
<a href="tel:+1234567890">Call us</a>

💡 Accessibility Tip

Always write descriptive link text. Instead of "click here", use meaningful text like "download the report" or "read our privacy policy".

Images

The img tag displays images. The src attribute is the image path, and alt provides alternative text for accessibility.

<!-- Basic image -->
<img src="logo.png" alt="Company logo">

<!-- Image with size attributes -->
<img src="photo.jpg" alt="Beach sunset" width="600" height="400">

<!-- Image from external URL -->
<img src="https://example.com/image.jpg" alt="Description">

⚠️ Always Include Alt Text

The alt attribute is crucial for accessibility. Screen readers use it to describe images to visually impaired users. It also shows if the image fails to load.

Lists

HTML supports ordered (numbered) and unordered (bulleted) lists:

Unordered List (bullets)

<ul>
  <!-- ul = unordered list -->
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

First item
Second item
Third item

Ordered List (numbers)

<ol>
  <!-- ol = ordered list -->
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Step one
Step two
Step three

HTML Attributes

Attributes provide additional information about elements. They go in the opening tag:

Attribute Syntax

<tagname attribute="value">Content</tagname>
            ↑            ↑
        Attribute     Value (in quotes)

Common Attributes

Attribute	Used on	Purpose
`href`	`<a>`	Link destination
`src`	`<img>`	Image source path
`alt`	`<img>`	Alternative text
`id`	Any element	Unique identifier
`class`	Any element	CSS styling group
`style`	Any element	Inline CSS styles

<!-- Multiple attributes on one element -->
<img src="logo.png" alt="Logo" width="200" class="header-logo">

<!-- ID must be unique on the page -->
<div id="main-content">...</div>

<!-- Class can be reused multiple times -->
<p class="highlight">Important text</p>
<p class="highlight">More important text</p>

Comments

Comments are notes in your code that browsers ignore. They're only for developers:

<!-- This is a comment. It won't appear on the page. -->

<!--
  Multi-line comment
  Use comments to explain your code
  or temporarily disable code
-->

<p>This text IS visible</p>
<!-- <p>This text is NOT visible (commented out)</p> -->

💡 Use Comments Wisely

Write comments to explain why you're doing something, not what the code does. Good code should be self-explanatory, with comments for complex logic or important decisions.

Nested Elements

Elements can be placed inside other elements (nesting). Proper indentation makes this clear:

<!-- Properly nested and indented -->
<div>
  <h2>Product Title</h2>
  <p>
    This is the description with <strong>bold text</strong> inside.
  </p>
  <ul>
    <li>Feature one</li>
    <li>Feature two</li>
  </ul>
</div>

⚠️ Common Mistake: Incorrect Nesting

<!-- WRONG: Tags overlap -->
<p>Text with <strong>bold</p></strong>

<!-- CORRECT: Tags properly nested -->
<p>Text with <strong>bold</strong></p>

Practice Exercise

🎯 Try This

Create an HTML file with:

A main heading with your name
A paragraph about yourself
An unordered list of your hobbies
A link to your favorite website
An image (any image you like)

Solution Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Me</title>
</head>
<body>
  <h1>John Doe</h1>

  <p>
    I'm a beginner web developer learning HTML, CSS, and JavaScript.
    I enjoy creating beautiful and functional websites.
  </p>

  <h2>My Hobbies</h2>
  <ul>
    <li>Coding</li>
    <li>Reading</li>
    <li>Photography</li>
  </ul>

  <a href="https://github.com" target="_blank">Visit GitHub</a>

  <img src="photo.jpg" alt="My photo" width="300">
</body>
</html>

Summary

📚 What you learned

HTML document structure (DOCTYPE, html, head, body)
Common tags: headings, paragraphs, links, images, lists
How to use attributes to provide extra information
Proper nesting and indentation
How to write HTML comments