HTML Elements Study Guide

Basic Structure Elements

Element Description Example
<!DOCTYPE html> Document type declaration. Not technically an element, but essential. <!DOCTYPE html>
<html> The root element of an HTML page. <html></html>
<head> Contains meta-information about the HTML document. <head><title>My Page</title></head>
<title> Specifies a title for the HTML page (which is shown in the browser's title bar or tab). <title>My Page Title</title>
<body> Defines the document's body. <body><h1>Hello</h1></body>

Text Formatting Elements

Element Description Example
<h1> to <h6> HTML headings (levels 1-6). <h1>This is a heading</h1>
<p> Defines a paragraph. <p>This is a paragraph.</p>
<br> Inserts a single line break. This is a line.<br>This is another line.
<hr> Defines a thematic break (horizontal rule). <hr>
<a> Defines a hyperlink. <a href="https://example.com">Visit Example</a>
<strong> Defines important text (usually displayed in bold). <strong>Important!</strong>
<em> Defines emphasized text (usually displayed in italic). <em>Emphasized text</em>
<abbr> Defines an abbreviation or acronym. <abbr title="HyperText Markup Language">HTML</abbr>
<address> Defines contact information for the author/owner of a document. <address>John Doe, 123 Main St</address>
<bdo> Defines the text direction. <bdo dir="rtl">This text will be written from right to left</bdo>
<blockquote> Defines a long quotation. <blockquote cite="https://example.com">This is a quote.</blockquote>
<cite> Defines the title of a work. <cite>The Scream</cite> by Edvard Munch
<code> Defines a piece of computer code. <code>let x = 5;</code>
<del> Defines text that has been deleted from a document. <del>Old text</del>
<ins> Defines text that has been inserted into a document. <ins>New text</ins>
<kbd> Defines keyboard input. Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
<mark> Defines marked/highlighted text. <mark>Highlighted text</mark>
<q> Defines a short quotation. <q>This is a short quote.</q>
<rp> Defines what to show in browsers that do not support ruby annotations. <ruby>漢 <rt>kan</rt><rp>(</rp>kan<rp>)</rp></ruby>
<rt> Defines an explanation/pronunciation of characters (for East Asian typography). <ruby>漢 <rt>kan</rt></ruby>
<ruby> Defines a ruby annotation (for East Asian typography). <ruby>漢 <rt>kan</rt></ruby>
<s> Defines text that is no longer correct. <s>Old price: $20</s> New price: $15
<samp> Defines sample output from a computer program. <samp>Error: File not found</samp>
<small> Defines smaller text. <small>Copyright 2025</small>
<sub> Defines subscripted text. H<sub>2</sub>O
<sup> Defines superscripted text. E = mc<sup>2</sup>
<time> Defines a specific time (or datetime). <time datetime="2025-02-17">February 17, 2025</time>
<tt> Defines teletype text. <tt>This is teletype text.</tt>
<u> Defines some text that is unarticulated and styled differently from normal text. <u>Underlined text</u>
<var> Defines a variable. <var>x</var> = 5
<wbr> Specifies a line break opportunity. This is a very long word that might need to be broken at some point: supercalifragilisticexpialidocious

List Elements

Element Description Example
<ul> Defines an unordered list. <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> Defines an ordered list. <ol><li>First</li><li>Second</li></ol>
<li> Defines a list item. <li>List item</li>
<dl> Defines a description list. <dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>
<dt> Defines a term/name in a description list. <dt>Coffee</dt>
<dd> Describes each term/name in a description list. <dd>Black hot drink</dd>

Multimedia and Embedding

Element Description Example
<img> Defines an image. <img src="image.jpg" alt="My Image">
<audio> Defines sound content. <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<video> Defines a video or movie. <video controls><source src="video.mp4" type="video/mp4"></video> </video>
<source> Specifies multiple media resources for <video>, <audio> and <picture>. <video controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"></video>
<track> Specifies text tracks for <video> and <audio>. <track src="captions.vtt" kind="captions" srclang="en" label="English">
<embed> Defines a container for an external application or interactive content (plugin). <embed src="plugin.swf" type="application/x-shockwave-flash">
<object> Defines an embedded object. <object data="file.pdf" type="application/pdf"></object>
<param> Defines parameters for an <object> element. <object data="movie.swf"><param name="quality" value="high"></object>
<picture> Defines a container for multiple <source> elements for images. <picture><source media="(max-width: 600px)" srcset="small.jpg"><img src="large.jpg" alt="My Image"></picture>
<map> Defines an image map. <img src="planets.gif" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"></map>
<area> Defines an area inside an image map. <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

Form Elements

Element Description Example
<form> Defines an HTML form for user input. <form action="/submit" method="post"><input type="text" name="name"><button type="submit">Submit</button></form>
<input> Defines an input control. <input type="text" name="name">
<textarea> Defines a multiline input control (text area). <textarea name="message" rows="10" cols="30"></textarea>
<button> Defines a clickable button. <button type="button">Click Me!</button>
<select> Defines a drop-down list. <select name="cars"><option value="volvo">Volvo</option></select>
<option> Defines an option in a drop-down list. <option value="volvo">Volvo</option>
<label> Defines a label for an <input> element. <label for="username">Username:</label><input type="text" id="username" name="username">
<fieldset> Groups related elements in a form. <fieldset><legend>Personal Information:</legend><label for="name">Name:</label><input type="text" id="name" name="name"></fieldset>
<legend> Defines a caption for a <fieldset> element. <legend>Personal Information:</legend>
<datalist> Specifies a list of pre-defined options for an <input> element. <input list="browsers" name="browser"><datalist id="browsers"><option value="Chrome"></datalist>
<output> Represents the result of a calculation (e.g. performed by a script). <output name="result" for="x y"></output>

Frame Elements (Less Commonly Used - Consider Alternatives)

Element Description Example
<iframe> Represents a nested browsing context, embedding another HTML page. <iframe src="demo_iframe.htm"></iframe>

Note: <frame>, <frameset>, and <noframes> are deprecated in HTML5. Use <iframe> instead, or consider server-side includes or other modern techniques for composing web pages.

Meta Data

Element Description Example
<style> Defines style information for a document. <style>body { background-color: lightblue; }</style>
<link> Defines the relationship between the current document and an external resource. <link rel="stylesheet" href="styles.css">
<meta> Defines metadata about an HTML document. <meta name="description" content="HTML Study Guide">
<base> Specifies the base URL/target for all relative URLs in a document. <base href="https://example.com/" target="_blank">
<noscript> Defines an alternate content for users that have disabled scripts in their browser. <noscript>Sorry, your browser does not support JavaScript!</noscript>
<script> Defines a client-side script. <script>console.log("Hello!");</script>

Programming Elements

Element Description Example
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript). <canvas id="myCanvas" width="200" height="100"></canvas>
<script> Defines a client-side script. <script>console.log("Hello!");</script>
<noscript> Defines an alternate content for users that have disabled scripts in their browser. <noscript>Sorry, your browser does not support JavaScript!</noscript>

Table Elements

Element Description Example
<table> Defines a table. <table><tr><th>Header</th></tr><tr><td>Data</td></tr></table>
<th> Defines a header cell in a table. <th>Header</th>
<tr> Defines a row in a table. <tr><td>Data</td></tr>
<td> Defines a cell in a table. <td>Data</td>
<caption> Defines a table caption. <caption>My Table</caption>
<colgroup> Specifies a group of one or more columns in a table for formatting. <colgroup><col span="2" style="background-color:red"></colgroup>
<col> Specifies column properties for each column within a <colgroup> element. <col style="background-color:red">
<thead> Groups the header content in a table. <thead><tr><th>Header</th></tr></thead>
<tbody> Groups the body content in a table. <tbody><tr><td>Data</td></tr></tbody>
<tfoot> Groups the footer content in a table. <tfoot><tr><td>Footer</td></tr></tfoot>

Semantic Elements

Element Description Example
<header> Specifies a header for a document or section. <header><h1>My Header</h1></header>
<nav> Defines a set of navigation links. <nav><a href="#">Link 1</a></nav>
<main> Specifies the main content of a document. <main><p>Main content here.</p></main>
<article> Defines an independent, self-contained content. <article><h2>Article Title</h2><p>Article content.</p></article>
<section> Defines a section in a document. <section><h2>Section Title</h2><p>Section content.</p></section>
<aside> Defines content aside from the page content. <aside><p>Related information.</p></aside>
<footer> Specifies a footer for a document or section. <footer><p>Copyright 2025</p></footer>
<details> Defines additional details that the user can view or hide. <details><summary>Click to show details</summary><p>Detailed information.</p></details>
<summary> Defines a visible heading for a <details> element. <summary>Click to show details</summary>
<dialog> Defines a dialog box or window. <dialog open><p>This is a dialog box.</p></dialog>
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <figure><img src="image.jpg" alt="My Image"><figcaption>Figure caption</figcaption></figure>
<figcaption> Defines a caption for a <figure> element. <figcaption>Figure caption</figcaption>