WebDev Story HTML Elements

1.0 HTML Markup

HyperText Markup Language (HTML) is a declarative language specifying what will be placed on a web page. An HTML document is a tree of elements, each wrapped in opening and closing tags.

<htmltag>               <!-- any standard tag, e.g. div -->
  <custom-child-tag>    <!-- user-defined; must be hyphenated -->
    "literal text"
  </custom-child-tag>
</htmltag>

The HTML standard requires that all custom (user-defined) tags are hyphenated to avoid clashes with future standard tags.

1.1 Inline and Block Elements

HTML elements divide into two fundamental display categories that control how they are placed on the page:

Inline elements flow horizontally from left to right within their container:
span, a, br, strong, em, sub, sup, code, img, ...
Block elements stack vertically from top to bottom, each on its own line:
html, body, head, header, main, footer, section, article, nav, aside,
div, p, h1–h6, pre, blockquote, form, table, ol, ul, li, ...

A typical HTML page skeleton looks like this:

<!DOCTYPE html>
<html>
  <head>
    <style> /* linked and inline styles */ </style>
    <script> /* linked and inline scripts */ </script>
  </head>
  <body>
    <!-- content markup -->
    <script> /* inline run-at-load scripts */ </script>
  </body>
</html>

1.2 HTML Events

HTML events are generated by browser and user actions, such as page load or button click. They can be wired directly in markup as attributes:

<div onclick="doShow()">text content</div>

where doShow() is a JavaScript function defined in the current page. The table below lists the standard browser events grouped by category.

HTML Events Reference

Event	Typical Targets	When it fires
Window / Document lifecycle
DOMContentLoaded	document	Initial HTML parsed (no styles/images needed).
load	window, img, link	All resources finished loading.
beforeunload	window	Page about to be unloaded (prompt user).
unload	window	Document is unloading.
pageshow / pagehide	window	Page shown or hidden (incl. bfcache).
visibilitychange	document	`document.visibilityState` changes.
hashchange	window	URL fragment (#…) changes.
popstate	window	History entry activated (back/forward).
resize	window	Viewport size changed.
scroll	window, elements	Scrolled (throttle for performance).
online / offline	window	Network connection gained or lost.
storage	window	`localStorage` changed in another tab.
Focus & Forms
focus / blur	inputs, focusable	Element gained / lost focus (no bubble).
focusin / focusout	inputs, focusable	Like focus/blur but bubbles.
input	input, textarea	User changes value.
change	input, select	Value committed (on blur for text inputs).
submit / reset	form	Form submitted or reset.
invalid	form controls	Constraint validation failed.
Keyboard
keydown	window, focusable	Key pressed down.
keyup	window, focusable	Key released.
Mouse & Wheel
click / dblclick	most elements	Primary button press & release / double.
contextmenu	most elements	Context menu requested (right-click).
mousedown / mouseup	most elements	Button pressed / released.
mousemove	most elements	Pointer moved.
mouseover / mouseout	most elements	Pointer enters/leaves (bubbles).
mouseenter / mouseleave	most elements	Pointer enters/leaves (no bubble).
wheel	scrollable, window	Mouse wheel or trackpad scroll.
Touch Events
touchstart / touchend	touch targets	Finger placed on / removed from screen.
touchmove	touch targets	Finger moved on screen.
touchcancel	touch targets	Touch disrupted (e.g., app switch).
Clipboard & Drag
copy / cut / paste	editable, document	User copies, cuts, or pastes.
dragstart / drag / dragend	draggable elem	Drag life-cycle on source.
dragenter / dragover / dragleave / drop	dropzone	Drag life-cycle on target.
CSS Animations & Transitions
animationstart / animationend	animated elem	CSS animation starts / ends.
transitionstart / transitionend	transitioning elem	CSS transition starts / ends.
Misc
toggle	<details>	Details open/close state changes.
slotchange	<slot>	Assigned nodes changed (Shadow DOM).

1.3 Tag Reference

The table below lists all commonly used standard HTML tags, their category, a brief description, and a usage example.

HTML Tag Reference

Tag	Category / Purpose	Description	Example
`<!DOCTYPE>`	Document declaration	Specifies HTML version to browser.	`<!DOCTYPE html>`
`<html>`	Root	Root of the HTML document.	`<html lang="en">…</html>`
`<head>`	Metadata container	Holds metadata: title, links, scripts, meta tags.	`<head><title>T</title></head>`
`<title>`	Metadata	Document title shown in browser tab.	`<title>My Page</title>`
`<meta>`	Metadata	Charset, viewport, description, etc.	`<meta charset="utf-8">`
`<link>`	Resource	External resource like stylesheet or icon.	`<link rel="stylesheet" href="s.css">`
`<script>`	Scripting	Embed or load JavaScript.	`<script src="app.js"></script>`
`<body>`	Content root	Main visible document content.	`<body>…</body>`
`<header>`	Sectioning	Introductory content or nav for a section/page.	`<header><h1>Site</h1></header>`
`<nav>`	Navigation	Section with navigation links.	`<nav><a href="#">Home</a></nav>`
`<main>`	Sectioning	Primary page content.	`<main>…</main>`
`<section>`	Grouping	Generic section of related content.	`<section><h2>F</h2></section>`
`<article>`	Independent content	Self-contained composition (e.g., blog post).	`<article><p>…</p></article>`
`<aside>`	Complementary	Tangential content (e.g., sidebar).	`<aside>Related links</aside>`
`<footer>`	Sectioning	Footer for section or page.	`<footer>© 2026</footer>`
`<h1>–<h6>`	Headings	Section headings with descending importance.	`<h2>Subheading</h2>`
`<p>`	Text	Paragraph.	`<p>Lorem ipsum.</p>`
`<strong>`	Text semantics	Strong importance (typically bold).	`<strong>Important</strong>`
`<em>`	Text semantics	Emphasis (typically italic).	`<em>Note</em>`
`<span>`	Inline	Generic inline container.	`<span class="hi">Text</span>`
`<div>`	Block	Generic block container.	`<div>Wrapper</div>`
`<br>`	Break	Line break.	`Line1<br>Line2`
`<wbr>`	Preferred break	Break here only if sequence doesn't fit.	`Long<wbr>Word`
`<hr>`	Thematic	Thematic break (horizontal rule).	`<hr>`
`<ul>`	List	Unordered list.	`<ul><li>One</li></ul>`
`<ol>`	List	Ordered list.	`<ol><li>First</li></ol>`
`<li>`	List item	Item in ordered/unordered list.	`<li>Item</li>`
`<dl>`	Definition list	Container for terms and descriptions.	`<dl><dt>T</dt><dd>D</dd></dl>`
`<img>`	Media	Image.	`<img src="p.jpg" alt="desc">`
`<picture>`	Responsive image	Container for multiple image sources.	`<picture><source …><img …></picture>`
`<video>`	Media	Video playback.	`<video controls><source src="m.mp4"></video>`
`<audio>`	Media	Audio playback.	`<audio controls><source src="s.mp3"></audio>`
`<iframe>`	Embedding	Embed another HTML document.	`<iframe src="page.html"></iframe>`
`<canvas>`	Graphics	Drawable region via scripting.	`<canvas width="300" height="150"></canvas>`
`<svg>`	Vector	Scalable vector graphics container.	`<svg><circle cx="50" cy="50" r="40"></svg>`
`<table>`	Tabular	Table container.	`<table>…</table>`
`<thead> / <tbody>`	Structure	Header / body group of table.	`<thead><tr>…</tr></thead>`
`<tr>`	Row	Table row.	`<tr>…</tr>`
`<th> / <td>`	Cells	Header cell / data cell.	`<th>Name</th> <td>Val</td>`
`<colgroup>`	Layout	Group of columns for styling/width.	`<col style="width:50%">`
`<form>`	Input	Form container for user input.	`<form action="/submit">…</form>`
`<input>`	Control	Single-line field (text, checkbox, radio, etc.).	`<input type="text" name="q">`
`<textarea>`	Control	Multi-line text input.	`<textarea>…</textarea>`
`<button>`	Control	Clickable button.	`<button>Submit</button>`
`<label>`	Form	Label for form control.	`<label for="id">Name</label>`
`<select>`	Control	Dropdown list.	`<select><option>A</option></select>`
`<fieldset>`	Grouping	Group related form controls.	`<fieldset>…</fieldset>`
`<details>`	Disclosure	Toggleable additional content.	`<details><summary>More</summary>…</details>`
`<summary>`	Disclosure	Title for <details>.	`<summary>Title</summary>`
`<template>`	Inert	Markup not rendered until cloned.	`<template id="tpl"><div>Hi</div></template>`
`<slot>`	Shadow DOM	Projection point for light DOM.	`<slot name="foo"></slot>`
`<abbr>`	Text	Abbreviation with optional expansion.	`<abbr title="HyperText">HTML</abbr>`
`<code>`	Inline code	Program code fragment.	`<code>let x=1;</code>`
`<pre>`	Preformatted	Preserves whitespace and line breaks.	`<pre>line1\nline2</pre>`
`<blockquote>`	Quotation	Long quotation.	`<blockquote>Quote</blockquote>`
`<mark>`	Highlight	Highlighted text.	`<mark>Search hit</mark>`
`<time>`	Datetime	Represents a date/time.	`<time datetime="2026-04-28">Apr 28</time>`

1.4 Tutorials

The following tutorials range from beginner to intermediate. Each covers a different aspect of learning HTML effectively.

HTML Tutorials

Tutorial	Type	Why Use It
MDN: Structuring content with HTML	Beginner	Modern fundamentals: structure, links, lists, images, and forms.
MDN: HTML overview & learning path	Beginner→Ref	Entry to tutorials, guides, and the canonical HTML reference.
web.dev: Learn HTML	Beginner→Intermediate	Concise lessons and patterns from the Chrome team.
w3schools HTML Tutorial	Beginner→Intermediate	Executable examples, reliable source of information.
freeCodeCamp: Responsive Web Design	Project-based	Hands-on HTML+CSS with projects and a free certificate.
The Odin Project: Foundations	Project-based	Structured path with exercises and community support.
jenkov.com HTML Tutorial	Comprehensive	Walk-through of most important HTML parts.
WebAIM: Intro to Web Accessibility	Accessibility	Principles and practical tips for inclusive HTML.

1.5 References

HTML References

Resource	Description
MDN HTML Reference	Comprehensive documentation and tutorials for HTML elements and attributes.
HTML Living Standard	The official specification maintained by WHATWG.
HTML.com Tags Reference	Quick reference for all HTML tags with examples and usage tips.
htmlreference.io	Purpose-specific references for individual elements.
w3schools Event Attributes	Grouped by device and action type.
w3schools Global Attributes	Attributes that apply to all HTML elements.
W3C HTML 5.2 Spec	Detailed W3C specification for HTML 5.2.