Master HTML

From the basics to advanced HTML5, learn how to structure the web.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language for creating web pages.

HyperText: Refers to the links that connect web pages to one another.
Markup: Refers to the tags that define the structure of the content.

Together, they use Tags to tell the browser how to display text, images, and other content.

<!-- A simple HTML Tag breakdown -->
<tagname>Content goes here...</tagname>

Basic HTML Tags

The fundamental building blocks of any webpage.

The Document Shell

<!DOCTYPE html>: Declares the document type.
<html>: The root element.
<head>: Contains metadata, title, and links.
<body>: Contains the visible page content.

Headings & Paragraphs

Use <h1> through <h6> for headings and <p> for paragraphs.

<h1>Main Title</h1>
<p>This is a paragraph description.</p>
<br> <!-- Line break -->
<hr> <!-- Horizontal Rule -->

Text Formatting

Style text to add emphasis or structure.

Tag	Description	Example
`<b>` / `<strong>`	Bold text (visual vs semantic importance)	Bold
`<i>` / `<em>`	Italic text (visual vs emphasis)	Italic
`<mark>`	Highlighted text	Marked
`<code>`	Inline code snippet	`const a = 1;`
`<sub>` / `<sup>`	Subscript / Superscript	H₂O / X²
`<abbr>`	Abbreviation	HTML

Quotations

Use <blockquote> for block-level quotes and <q> for inline quotes.

<blockquote cite="https://example.com">
  The only way to do great work is to love what you do.
</blockquote>

<p>Steve Jobs said: <q>Stay hungry, stay foolish.</q></p>

Lists

Unordered List

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered List

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

Description List

Used for terms and descriptions.

<dl>
  <dt>HTML</dt>
  <dd>Standard markup language.</dd>
  
  <dt>CSS</dt>
  <dd>Style sheet language.</dd>
</dl>

Links and Media

Hyperlinks

Use the anchor tag to link to other pages.

<a href="https://google.com" target="_blank">Go to Google</a>

Images

<img src="image.jpg" alt="Description is important for a11y">

Video & Audio

<video controls width="250">
    <source src="/media/video.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Embeds (Iframe)

<iframe src="https://www.google.com/maps/embed?..." width="600" height="450"></iframe>

Tables

Organize data into rows and columns.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

Forms

Collect user input securely.

Code

<form>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="John Doe" required>

  <label for="email">Email</label>
  <input type="email" id="email" placeholder="john@example.com" required>

  <label for="subject">Subject</label>
  <select id="subject">
    <option>Feedback</option>
    <option>Support</option>
  </select>

  <button type="submit">Submit Form</button>
</form>

Preview

Semantic Elements

Using the right tag for the right content helps Search Engines and Screen Readers understand your page.

Tag	Usage
`<header>`	Introductory content or navigation
`<nav>`	Navigation links
`<main>`	Dominant content of the body
`<article>`	Self-contained content (blog post)
`<section>`	Thematic grouping of content
`<aside>`	Indirectly related content (sidebar)
`<footer>`	Copyright, links, contact info

Interactive Elements

Native HTML widgets for interactivity.

Details & Summary

Create a disclosure widget where information is visible only when the widget is toggled into an "open" state.

<details>
  <summary>Click to show more</summary>
  <p>Hidden content revealed!</p>
</details>

Global Attributes

Attributes that can be used on any HTML element.

id: Unique identifier for an element.
class: Group elements for styling.
style: Inline CSS (avoid if possible).
title: Tooltip text on hover.
hidden: Hides the element from view.
data-*: Store custom data private to the page or application.

<div id="user-1" class="profile-card" data-role="admin">
  Admin User
</div>

SEO & Meta Tags

Metadata goes in the <head> and defines how your site appears in search engines and social media.

<!-- Basic SEO -->
<meta name="description" content="Learn web development with our free tutorials.">
<meta name="keywords" content="HTML, CSS, JavaScript">

<!-- Open Graph (Social Media) -->
<meta property="og:title" content="HTML Mastery">
<meta property="og:image" content="thumbnail.jpg">
<meta property="og:description" content="The best guide to HTML.">

<!-- Viewport for Responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML5 APIs

Modern HTML gives you access to powerful browser features.

Geolocation

Get the user's current position (requires permission).

navigator.geolocation.getCurrentPosition((position) => {
  console.log(position.coords.latitude, position.coords.longitude);
});

Local Storage

Save data in the browser that persists after refresh.

// Save
localStorage.setItem('username', 'Alice');

// Retrieve
const user = localStorage.getItem('username');

Drag and Drop

Native drag and drop support.

<div draggable="true">Drag Me</div>

Accessibility (a11y)

Making the web usable for everyone is a core responsibility.

Key Principles

Alt Text: Always add alt to images.
Semantic HTML: Use buttons for actions, links for navigation.
ARIA Labels: Use aria-label when no visible text describes an element.
Keyboard Nav: Ensure all interactive elements can be reached via Tab key.

<!-- Bad -->
<div onclick="submit()">Submit</div>

<!-- Good -->
<button onclick="submit()">Submit</button>

Best Practices

Write clean, maintainable code.

Indentation: Consistent 2 or 4 spaces.
Comments: Explain complex sections.
Validation: Use W3C validator to check for errors.
Lower Case: Write tags and attributes in lowercase.
Quotes: Always quote attribute values.