WebDev Bites: HTML Elements

DOM api and tags

About WebDev Track Semantic Markup HTML Models

1.0 - HTML Markup

Hyper Text Markup Language (HTML) is a declarative language specifing what will be placed on a web page and, with some exceptions, where it will be rendered. HTML markup consists of a tree of elements, as shown in Figure 1a. All html elements are wrapped in Tags.
Definition HTML current specification HyperText Markup Language (HTML) is a language for structuring content on a web page. It is based on Elements that have opening and closing tags and bodies with content. 
  <htmltag>              <!-- any of the standard html tags, e.g., div -->
    <custom-childtag>    <!-- a user defined tag with some semantic meaning -->
      "literal text"
    </custom-childtag>
  </htmltag>
  • An element body, everything between opening and closing tags, may consist of text or markup or both.
  • The HTML standard requires that all custom tags are hypenated, as shown above, to avoid clashes with future standard tags.
HTML elements are divided into two groups: in-line and block. These categories determine how rendering flow appears on a web page.
  • inline-elements flow horizontally from page left to right
    span, a, br, strong, sub, sup, del, ...
  • block elements flow vertically from page top to bottom
    html, body, head, header, script, style, main, footer, section, svg, img,
    table, tr, th, td,
    pre, code, div, p, h1, ... h6, ol, ul, li, nav,
    form, iframe, input
    ...
HTML pages are usually structured like this: 
  <!DOCTYPE html>
  <html>
    <head>
      <style>
        /*-- linked and inline styles go here --*/
      </style>
      <script>
        <!-- linked and inline scripts go here -->
      </script>
    </head>
    <body>
      <!-- content markup goes here -->
      <script>
        <!-- inline scripts that run at load time go here -->
      </script>
    </body>
  </html>
HTML events are generated by browser and user actions, e.g., page load or button click. They can be used as HTML attributes like this: 
<div onclick="doShow()" ... >text content</div>
where doShow() is some JavaScript function defined in the current page.
HTML Events
Event Typical Targets When it fires (summary)
Window / Document lifecycle
DOMContentLoadeddocumentInitial HTML parsed (no styles/images needed).
loadwindow, img, link, etc.All resources finished loading.
beforeunloadwindowPage about to be unloaded (prompt user).
unloadwindowDocument is unloading (avoid heavy work).
pageshowwindowPage shown (incl. bfcache restore).
pagehidewindowPage hidden (incl. bfcache save).
visibilitychangedocumentdocument.visibilityState changes.
readystatechangedocumentreadyState changes (loading → interactive → complete).
errorwindow, resource elemsResource or script failed to load / runtime error.
hashchangewindowURL fragment (#…) changes.
popstatewindowHistory entry activated (back/forward).
resizewindow, elements*Viewport or observed element size changed.
scrollwindow, elementsScrolled (throttle for performance).
onlinewindowNetwork connection regained.
offlinewindowNetwork connection lost.
storagewindowlocalStorage changed in another tab.
beforeprintwindowPrint dialog about to open.
afterprintwindowPrint dialog closed.
fullscreenchangedocumentEntering/leaving fullscreen.
fullscreenerrordocumentFullscreen request failed.
Focus & Forms
focusinputs, focusableElement received focus (doesn’t bubble).
blurinputs, focusableElement lost focus (doesn’t bubble).
focusininputs, focusableLike focus but bubbles.
focusoutinputs, focusableLike blur but bubbles.
inputinput, textarea, contenteditableUser changes value.
beforeinputeditable fieldsFires before value is updated.
changeinput, select, textareaValue committed (on blur for text inputs).
invalidform controlsConstraint validation failed.
submitformForm is submitted.
resetformForm is reset.
formdataformFormData constructed on submit.
Keyboard
keydownwindow, focusableKey pressed down.
keyupwindow, focusableKey released.
keypress (deprecated)window, focusableLegacy printable key press.
Mouse & Wheel
clickmost elementsPrimary button press & release.
dblclickmost elementsTwo clicks in quick succession.
auxclickmost elementsNon-primary button (e.g., middle).
contextmenumost elementsContext menu requested (usually right-click).
mousedownmost elementsMouse button pressed.
mouseupmost elementsMouse button released.
mousemovemost elementsPointer moved (mouse).
mouseovermost elementsPointer enters (bubbles).
mouseoutmost elementsPointer leaves (bubbles).
mouseentermost elementsPointer enters (no bubble).
mouseleavemost elementsPointer leaves (no bubble).
wheelscrollable, windowMouse wheel or trackpad scroll.
Pointer Events
pointerovermost elementsPointer enters (bubbles).
pointerentermost elementsPointer enters (no bubble).
pointerdownmost elementsPointer pressed.
pointermovemost elementsPointer moved.
pointerupmost elementsPointer released.
pointercancelmost elementsPointer cancelled (e.g., OS gesture).
pointeroutmost elementsPointer leaves (bubbles).
pointerleavemost elementsPointer leaves (no bubble).
gotpointercapturemost elementsElement received capture.
lostpointercapturemost elementsElement lost capture.
Touch Events
touchstarttouch targetsFinger placed on screen.
touchmovetouch targetsFinger moved on screen.
touchendtouch targetsFinger removed from screen.
touchcanceltouch targetsTouch disrupted (e.g., app switch).
Clipboard
copyeditable, documentUser copies selection.
cuteditableUser cuts selection.
pasteeditableUser pastes content.
Drag & Drop
dragstartdraggable elemDrag initiated.
dragdraggable elemDragging.
dragenddraggable elemDrag ended.
dragenterdropzoneDragged item enters drop target.
dragoverdropzoneDragged item over target (prevent default to allow drop).
dragleavedropzoneDragged item leaves target.
dropdropzoneDrop completed on target.
Composition / Selection
compositionstarteditableIME composition begins.
compositionupdateeditableIME composition updates.
compositionendeditableIME composition commits.
selectionchangedocumentUser selection changed.
Media (audio / video)
loadstartmediaLoading of media begins.
loadedmetadatamediaMetadata loaded.
loadeddatamediaFirst frame loaded.
canplaymediaCan play, may stall during playback.
canplaythroughmediaLikely to play to end without stalling.
playmediaPlayback requested.
playingmediaPlayback actually started.
pausemediaPlayback paused.
endedmediaPlayback ended.
seekingmediaSeeking begins.
seekedmediaSeeking completes.
timeupdatemediaPlayback position updated.
ratechangemediaPlayback rate changed.
volumechangemediaVolume or mute state changed.
progressmediaDownloading progress.
stalledmediaData not available temporarily.
suspendmediaLoading suspended.
waitingmediaPlayback paused for buffering.
abortmediaLoading aborted.
errormediaError occurred during load/play.
durationchangemediaDuration updated.
emptiedmediaMedia becomes empty (e.g., source changed).
CSS Animations & Transitions
animationstartanimated elemCSS animation starts.
animationiterationanimated elemCSS animation repeats.
animationendanimated elemCSS animation ends.
animationcancelanimated elemAnimation canceled/removed.
transitionruntransitioning elemTransition is created.
transitionstarttransitioning elemTransition begins.
transitionendtransitioning elemTransition finishes.
transitioncanceltransitioning elemTransition canceled.
Misc UI / Element
toggle<details>Details open/close state changes.
pointerlockchangedocumentPointer lock entered/left.
pointerlockerrordocumentPointer lock request failed.
selectionchangedocumentText selection updated.
slotchange<slot>Assigned nodes changed (Shadow DOM).
Device & Sensors
deviceorientationwindowDevice orientation changes.
devicemotionwindowAccelerometer / motion data.
orientationchangewindowScreen orientation changes.
Gamepad
gamepadconnectedwindowGamepad connected.
gamepaddisconnectedwindowGamepad disconnected.
Network / Progress (generic)
loadstartXHR, fetch streams, mediaLoading begins.
progressXHR, mediaLoading progress.
timeoutXHRRequest timed out.
loadXHRTransfer successful.
loadendXHRTransfer completed (success or fail).
abortXHRTransfer aborted.
ErrorXHRTransfer failed.
Beginning to intermediate tutorials
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
Tania Rascia's HTML Template Beginner fundamentals well presented
web.dev: Learn Forms Intermediate Deep dive into accessible, robust forms.
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.
MDN: HTML Guides How-to Task-oriented guides plus a handy cheatsheet.
HTML Tutorial Comprehensive Walk-through of most important parts
WebAIM: Intro to Web Accessibility Accessibility Principles and practical tips for inclusive HTML.
W3C WAI Tutorials Accessibility Official tutorials for pages, images, tables, and forms.
Specifications and detailed references
References
Resource Description
MDN HTML Reference Comprehensive documentation and tutorials for HTML elements and attributes.
HTML Living Standard The official specification maintained by the WHATWG.
HTML.com Tags Reference Quick reference for all HTML tags with examples and usage tips.
htmlreference.io Purpose specific references
w3schools Event Attributes Grouped by device and action
w3schools Global Attributes Applies to all HTML elements
W3C HTML 5.2 Spec Detailed W3C specification for HTML 5.2.
Concepts and demos of new technologies
Understanding
Resource Description
html5test.com Interactive site that tests how well your browser supports HTML features.
HTML Canvas demos Collection of experimental demos showing what’s possible with the HTML Canvas API.
Semantic Markup Thoughtbot blog post explaining how to write clean, semantic HTML for structure and meaning.
Pragmatic value of semantic markup Bruce Lawson’s article on the real-world benefits of semantic HTML for accessibility and SEO.
Demonstrations of concepts with web page examples. These were used to test techniques for this site.
Building Things
Project / Demo Description
Image Viewer Resizable Image Viewer
Text Viewer Component Horizontally Expandable Text Viewer Component
Stacked Content Floating text around stacked content
Dropdown Menus Menus display on click and hover
Parsing Querystring Parsing multi-level query strings
A complete listing of the HTML tags
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>Title</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="styles.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 navigation 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>Features</h2></section>
<article> Independent content Self-contained composition (e.g., blog post). <article><p>…</p></article>
<aside> Complementary Content tangential to main content (e.g., sidebar). <aside>Related links</aside>
<footer> Sectioning Footer for section or page. <footer>© 2025</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="highlight">Text</span>
<div> Block Generic block container. <div>Wrapper</div>
<br> Break Line break. Line1<br>Line2
<wbr> Preferred break Break here only if char sequence doesn't fit available space PartialExpression<wbr>RemainingExpression
<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>Term</dt><dd>Definition</dd></dl>
<dt> Definition term Term in definition list. <dt>API</dt>
<dd> Definition description Description for a term. <dd>Application Programming Interface</dd>
<img> Media Image. <img src="pic.jpg" alt="desc">
<picture> Responsive image Container for multiple image sources. <picture><source media="(min-width:600px)" srcset="large.jpg"><img src="small.jpg"></picture>
<video> Media Video playback. <video controls><source src="movie.mp4"></video>
<audio> Media Audio playback. <audio controls><source src="sound.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> Structure Header group of table. <thead><tr>…</tr></thead>
<tbody> Structure Body group of table. <tbody>…</tbody>
<tr> Row Table row. <tr>…</tr>
<th> Header cell Header cell, usually bold/centered. <th>Name</th>
<td> Data cell Regular table cell. <td>Value</td>
<colgroup> Layout Group of columns for styling/width. <colgroup><col style="width:50%"></colgroup>
<caption> Label Table caption/title. <caption>Summary</caption>
<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>
<option> Choice Option inside select. <option value="1">One</option>
<fieldset> Grouping Group related form controls. <fieldset>…</fieldset>
<legend> Caption Title for fieldset. <legend>Details</legend>
<details> Disclosure Toggleable additional content. <details><summary>More</summary>Content</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 Markup Language">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="2025-07-31">July 31, 2025</time>