HTML Reference

Essential HTML tags for beginners and web developers. A practical reference for the most commonly used elements.

Document Structure

<!DOCTYPE html>

Declares the document type and tells the browser this is an HTML5 page.

<!DOCTYPE html>

<html>

The root element that wraps the entire HTML document.

<html lang="en"></html>

<head>

Contains metadata, links, and settings that aren't visible on the page.

<head></head>

<body>

Holds all the visible content that appears on the webpage.

<body>Welcome to my recipe site</body>

<title>

Sets the title that appears in the browser tab.

<title>Mountain Adventures</title>

<meta>

Provides important information about the page like character encoding and mobile display.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link>

Connects external files such as stylesheets to the page.

<link rel="stylesheet" href="adventure.css">

<style>

Lets you write CSS directly inside the HTML file.

<style>
body { background: #f0f8ff; }
</style>

<script>

Embeds or links JavaScript code to make the page interactive.

<script src="map.js"></script>
<script>console.log("Trail loaded");</script>

Text & Typography

<h1> to <h6>

Heading levels used to structure content (h1 is the most important).

<h1>Best Hiking Trails 2026</h1>
<h2>Beginner Routes</h2>

<p>

Represents a block of paragraph text.

<p>The sunrise from this peak was absolutely breathtaking.</p>

<strong> / <b>

Highlights important text (usually bold).

<strong>Warning: Steep cliff ahead</strong>

<em> / <i>

Adds emphasis to text (usually italic).

<em>This trail is dog-friendly</em>

<small>

Used for fine print, side notes, or smaller supporting text.

<small>Difficulty level may vary with weather</small>

<mark>

Highlights text for reference or attention.

<mark>New route added!</mark>

<blockquote>

Shows quoted text from another source.

<blockquote>Not all who wander are lost.</blockquote>

<code> / <pre>

Displays inline code or preformatted text that preserves spacing.

<code>trail.py</code>
<pre>Start here
→ Turn left at the oak tree</pre>

<br> / <hr>

Creates a line break or a thematic horizontal line.

Peak View<br>Lake Trail
<hr>

<abbr>

Abbreviation with a tooltip that shows the full meaning.

<abbr title="Global Positioning System">GPS</abbr>

Links & Media

<a>

Creates links to other pages, files, or websites.

<a href="https://trails.com">Explore More Trails</a>

<img>

Displays an image on the webpage.

<img src="sunrise.jpg" alt="Mountain sunrise" width="600">

<video>

Embeds video content with playback controls.

<video controls>
  <source src="hiking.mp4" type="video/mp4">
</video>

<audio>

Embeds audio content with playback controls.

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

<figure> & <figcaption>

Groups an image or media with its caption.

<figure>
  <img src="bear.jpg">
  <figcaption>Black bear spotted on the trail</figcaption>
</figure>

<iframe>

Embeds external content like maps or videos.

<iframe src="https://maps.google.com" width="700" height="450"></iframe>

<svg>

Creates scalable vector graphics directly in the page.

<svg width="120" height="120"><circle cx="60" cy="60" r="50"/></svg>

Layout & Semantic HTML

<div>

Flexible container used to group and organize page content.

<div class="trail-card">Content</div>

<span>

Inline container for styling or grouping small pieces of content.

<span class="distance">8.4 km</span>

<header>

Top section that usually contains the logo and main navigation.

<header><h1>Peak Explorers</h1></header>

<nav>

Contains links that help users move around the website.

<nav><a href="/trails">All Trails</a></nav>

<main>

Holds the primary content for the current page.

<main>Trail guides and maps</main>

<section>

Groups related content together thematically.

<section><h2>Summer Routes</h2></section>

<article>

Represents a complete piece of content that can stand on its own.

<article>Review of the Eagle Pass trail</article>

<aside>

Contains supporting information related to the main topic.

<aside>Weather forecast sidebar</aside>

<footer>

Displays information shown at the bottom of a page, like copyright or links.

<footer>&copy; 2026 Peak Explorers</footer>

Lists

<ul>

Unordered (bulleted) list.

<ul>
  <li>Item one</li>
</ul>

<ol>

Ordered (numbered) list.

<ol>
  <li>First item</li>
</ol>

<li>

List item (used inside ul or ol).

<li>List item</li>

<dl> / <dt> / <dd>

Description list for terms and their definitions.

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>