Scribd
Upload
30 views26 pages

Comprehensive Guide to HTML5 Tags

HTML 5

Uploaded by

7077davidgitonga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views26 pages

Comprehensive Guide to HTML5 Tags

HTML 5

Uploaded by

7077davidgitonga
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

1

HTML 5
Below is a categorized list of all valid HTML5 tags (excluding deprecated
ones), each with a simple beginner-friendly description of its purpose.

Document Structure and Metadata

<html> – The root element of an HTML document. It wraps all the content on
the page. (All other elements must be inside <html>.)

<head> – Container for metadata (information about the page). It holds


elements like <title>, links to CSS/JS, and other data not directly shown on
the page.

<title> – Sets the document’s title (the text shown in the browser’s tab or
title bar). It goes inside <head>.

<base> – Defines the base URL for all relative URLs on the page. For
example, it sets where relative links and resources should start from. There is
only one <base> element per page.

<link> – Links external resources to the page. Commonly used to include


CSS stylesheets or icons by specifying their relationship (e.g. stylesheet,
icon).

HTML 5 tags
2

<meta> – Represents metadata about the document (like character set,


author, or page description). It’s used for information not covered by other
tags.

<style> – Embeds CSS styles directly in the page. Any CSS rules between
<style> and </style> apply to the document.

<body> – Contains all the visible content of the HTML document (text,
images, links, etc.). There is only one <body> on a page. Everything you see
on a webpage goes inside the <body>.

Sectioning and Headings

<header> – Defines introductory content or a header section for a document


or section (often includes logos, navigation links, or heading elements).

<footer> – Defines a footer for a document or section, typically containing


author info, copyright, or related links.

<nav> – Defines a section of navigation links (menus, table of contents,


etc.).

<article> – Represents a self-contained piece of content (like a blog post,


news article, or forum post) that could stand on its own.

<section> – Represents a thematic grouping of content (a section of a


document). Sections should usually have a heading to identify them.

HTML 5 tags
3

<aside> – Defines content aside from the main content (such as a sidebar or
callout box) that is indirectly related to the main content.

<main> – Represents the main content of the document; the central topic or
functionality. There should be only one <main> element per page.

<hgroup> – Groups a set of <h1>–<h6> headings and any associated


subheadings. (Rarely used now, but it groups multiple headings together).

<h1>–<h6> – Heading elements for section titles. <h1> is the highest (most
important) level and <h6> is the lowest. Use these to structure content
hierarchically.

<address> – Indicates contact information for the author/owner of the


document (usually an address, email, phone, etc.). Browsers often display it
in italics by default.

<search> – Defines a section of the page that contains search controls or


filtering options. It semantically labels part of the page as a search area.

Text Content and Lists

<p> – Defines a paragraph of text. Browsers typically add a margin above


and below paragraphs.

<blockquote> – Defines a block quotation (an extended quote). By default,


browsers usually indent this from the left and right.

HTML 5 tags
4

<hr> – Inserts a thematic break or horizontal line between content (often


used to separate sections or ideas).

<pre> – Denotes preformatted text, which preserves whitespace and line


breaks exactly as written (often rendered in a monospace font).

<div> – A generic block-level container with no special meaning. Use <div>


to group other elements and apply CSS styles or layout. (It does not change
the content unless styled.)

<figure> – Represents a self-contained piece of content (like an image,


diagram, or code snippet) that is referenced in the main text. It typically
contains the content and an optional caption.

<figcaption> – Defines a caption for a <figure> element. It provides a


legend or description for the figure’s content. (Place it as the first or last
child of <figure>.)

<ul> – Defines an unordered (bulleted) list. Each list item inside must be an
<li>.

<ol> – Defines an ordered (numbered) list. Each list item inside must be an
<li>.

<li> – Defines a list item. It must be a child of <ul>, <ol>, or <menu>.

<dl> – Defines a description list (a list of terms and descriptions). Use <dt>
for terms and <dd> for their descriptions.

<dt> – Defines a term (name) in a description list. It goes inside <dl> and is
usually followed by one or more <dd> elements.

HTML 5 tags
5

<dd> – Defines the description or value of the preceding <dt> term in a


<dl> list.

<menu> – Defines a list of commands or menu items (treated like an


unordered list). In practice it acts like a <ul>.

Inline Text Semantics

<a> – Defines a hyperlink to another page, location, or resource. The href


attribute holds the destination URL.

<abbr> – Represents an abbreviation or acronym; the full expansion is


provided in the title attribute or context.

<b> – Bolds text without implying extra importance. It’s for stylistic offset
(like keywords). (For important text, use <strong>.)

<strong> – Indicates strong importance or emphasis. Browsers typically


render it as bold text.

<i> – Italicizes text without adding importance. It’s for text set apart for
some reason (like terms, idioms). (For stressed emphasis, use <em>.)

<em> – Marks emphasized text (usually rendered in italics). Emphasis can


be nested to indicate stronger emphasis.

<mark> – Highlights or marks text for reference (rendered with a


background color, usually yellow).

HTML 5 tags
6

<small> – Indicates fine print or side comments (usually rendered in a


smaller font).

<cite> – Marks the title of a work (book, song, article, etc.) or a reference to
a creative work.

<q> – Defines a short inline quotation. Browsers typically enclose this text in
quotation marks automatically. (Long quotes use <blockquote>.)

<code> – Indicates a fragment of computer code. The content is usually


shown in a monospace font.

<data> – Associates a piece of content with a machine-readable value. Use


its value attribute to provide the raw data.

<dfn> – Marks the defining instance of a term. The term being defined is
usually inside <dfn>, with its definition as nearby content.

<var> – Represents a variable name in math or programming contexts.


Often rendered in italics by browsers.

<samp> – Denotes sample output from a computer program. Usually shown


in a monospace font.

<kbd> – Denotes text that the user would type (keyboard input). Typically
shown in a monospace font by browsers.

<sub> – Subscript text (displayed with a lowered baseline, e.g. in chemical


formulas).

HTML 5 tags
7

<sup> – Superscript text (displayed with a raised baseline, e.g. exponents).

<time> – Represents a specific time (date, time, or both). Use the datetime
attribute for a machine-readable value.

<u> – Underlines text that is non-textual annotation or otherwise marked


(usually rendered with a line under the text).

<s> – Shows text that is no longer accurate or relevant (rendered with a


strikethrough). (Do not use <s> for intentional document edits; use
<del>/<ins> instead.)

<span> – A generic inline container with no special meaning. Use <span> to


group text for styling with CSS.

<wbr> – Indicates a word break opportunity. The browser may break a line at
this point if needed, but it doesn’t force a break.

<bdi> – Isolates text that might be formatted in a different direction (useful


for mixing left-to-right and right-to-left text).

<bdo> – Overrides the current text direction. By default, text flows left-to-
right or right-to-left; <bdo> forces a different direction for its content.

<ruby> – Used for East Asian typography, providing pronunciation or


annotation of characters. It usually contains <rt> and <rp> (see below).

<rt> – Provides the pronunciation or annotation text for a <ruby> element


(shown above or beside the base text).

HTML 5 tags
8

<rp> – Provides fallback parentheses around ruby annotations for browsers


that don’t support <ruby>. Typically used around an <rt> inside <ruby>.

Media and Graphics

<img> – Embeds an image in the document. Use the src attribute to specify
the image URL.

<picture> – Container for multiple <source> elements and one <img>; used
to provide responsive image choices (different images for different screen
sizes or formats).

<source> – Specifies alternative media resources for <picture>, <audio>, or


<video>. It does not have visible content; the browser chooses one source
from those provided.

<audio> – Embeds an audio player in the page for sound content. You can
include one or more <source> children for different audio formats.

<video> – Embeds a video player in the page. Like <audio>, it supports


multiple <source> children and can show video (and audio) content.

<track> – Provides timed text tracks (like subtitles, captions) for <audio> or
<video> elements. Tracks are usually in WebVTT format (e.g., .vtt files).

<canvas> – A drawable region on the page. You can use JavaScript (Canvas
API or WebGL) to draw graphics and animations inside it.

HTML 5 tags
9

<area> – Defines a clickable area inside an image map (used together with
<map> and <img usemap=”…”>).

<map> – Associates an image with an image map. The <map> contains


<area> elements that define clickable regions of the image.

<svg> – Container for SVG (Scalable Vector Graphics) content. It defines its
own coordinate system and viewport for vector drawings. (You can embed
SVG directly in HTML using <svg>.)

<math> – Container for MathML content (mathematical markup). It is the


top-level element for MathML, allowing math equations to be rendered in a
page.

Embedded Content

<embed> – Embeds external (often interactive) content or applications (like


a plugin or file) at the specified point in the document.

<iframe> – Embeds another HTML page inside the current page (a nested
browsing context). The src attribute points to the URL of the page to display.

<object> – Represents an external resource, which can be treated as an


image, a nested browsing context, or handled by a plugin. It can embed
things like PDFs, Flash, or other documents.

<fencedframe> – Similar to <iframe>, it represents a nested browsing


context but with extra privacy features. It can embed another page with a
more secure context (newer HTML feature).

HTML 5 tags
10

Scripting Elements

<script> – Embeds executable code (usually JavaScript) or links to a script


file. For example, <script src=”[Link]”></script> runs the code from the
file.

<noscript> – Provides fallback content for browsers that do not support


scripts or have scripting disabled. The content inside <noscript> will be
shown only if scripts cannot run.

Demarcating Edits

<ins> – Marks text that has been inserted into the document (often shown
as underlined). It’s used for indicating additions, like in a “track changes”
scenario.

<del> – Marks text that has been deleted from the document (often shown
as strikethrough). Use it to indicate removed content in an edit or revision.

Table Content

<table> – Creates a table. Inside it, use table rows, headers, and cells to
organize tabular data.

<caption> – Specifies a caption (title) for the table. Place it immediately


after the <table> tag.

HTML 5 tags
11

<colgroup> – Defines a group of columns in a table for formatting. You can


group columns (and optionally set attributes like width) together.

<col> – Specifies column properties for each column within a <colgroup>.


Use it to style or size individual columns.

<thead> – Groups the header rows of a table. It usually contains <tr> rows
with <th> cells for column headings.

<tbody> – Groups the body rows of a table. Contains the main data rows
(<tr> with <td> cells).

<tfoot> – Groups the footer rows of a table (summary or totals). It is


rendered below <tbody> and usually contains <tr> rows.

<tr> – Defines a table row. It goes inside <thead>, <tbody>, or <tfoot>,


and contains <th> (header) or <td> (data) cells.

<th> – Defines a header cell in a table row (<tr>). By default, header cells
are bold and centered. Use the scope attribute to indicate row/column
groups.

<td> – Defines a standard data cell in a table row. It is a regular (non-


header) cell for table data.

Forms and Input Controls

HTML 5 tags
12

<form> – Creates a form for user input (e.g. login form, search form). Inside
<form>, include input fields and a submit button. Form data can be sent to a
server or handled by scripts.

<input> – Creates various types of form fields depending on its type


attribute (text box, checkbox, radio button, etc.). It’s one of the most
versatile form elements.

<textarea> – Defines a multi-line text input control (a text area) where users
can enter longer free-form text.

<button> – Creates a clickable button (e.g. submit button). Can be activated


by a mouse click, keyboard, or other input methods.

<select> – Creates a drop-down list (combobox). Inside <select>, use


<option> (and optionally <optgroup>) for the available choices.

<optgroup> – Groups related <option> elements within a <select>. It


creates sub-headings inside a drop-down list for better organization.

<option> – Defines an item inside a <select>, <optgroup>, or <datalist>.


Represents one selectable choice in a drop-down or list.

<datalist> – Provides a list of predefined options for an <input> element. It


works like a suggestion list that appears as the user types.

<label> – Defines a label for a form control (like <input>). Clicking the
<label> focuses or toggles the associated control, improving usability.

<fieldset> – Groups related form controls and labels together (often with a
border around them). Use <legend> to provide a caption for the group.

HTML 5 tags
13

<legend> – Provides a caption for a <fieldset>. It typically appears as a title


for the grouped controls.

<output> – A container for the result of a calculation or user action. Scripts


can put a value into <output> to display it to the user.

<progress> – Displays a progress bar indicating the completion progress of a


task (like file upload or computation). The value and max attributes control
the fill.

<meter> – Displays a gauge showing a scalar value within a known range


(e.g. disk usage, fuel level). Similar to progress, but for measurements.

<selectedcontent> – Used inside a custom <select> element to display the


content of the currently selected <option> within the <select>’s first child
button. (This is an experimental HTML element for customizable select
controls.)

Interactive and Web Components

<details> – Creates a disclosure widget that users can open and close. Inside
it, content is hidden until the user clicks to expand. Must include a
<summary> element.

<summary> – Defines a visible heading for a <details> element. Clicking


the <summary> toggles the <details> content open or closed.

HTML 5 tags
14

<dialog> – Represents a dialog box or window (such as an alert, modal, or


subwindow). It can be shown or hidden with JavaScript (e.g.,
[Link]()).

<slot> – Used in Web Components as a placeholder for external markup.


Inside a custom element’s template, <slot> marks where user-provided
content should be inserted.

<template> – Holds HTML content that is not rendered when the page loads.
You can clone and insert its content later via JavaScript, useful for defining
reusable markup.

Each tag above is defined in the official HTML5 specification and supported
by modern browsers (unless noted experimental). This guide covers all
current HTML5 elements (non-deprecated) and summarizes their purpose in
simple terms. Use the references to learn more about each tag and its
attributes as needed.

Sources: Definitions and descriptions are based on MDN Web Docs and HTML
element references (see inline citations for details).

HTML 5 tags
15

Example
Code
<!doctype html> <!—Declares the document as HTML5 

<html lang=”en”> <!—Root element: contains the entire HTML document


and sets language 

<head> <!—Head: metadata and info for the browser (not visible on the
page) 

<meta charset=”utf-8”> <!—Declares the character encoding (UTF-8) 

<meta name=”viewport” content=”width=device-width,initial-scale=1”>


<!—Makes the page responsive on mobile 

<title>HTML5 Elements Demo</title> <!—The page title shown in the


browser tab 

<base href=”./”> <!—Base URL for relative links on the page 

<link rel=”icon” href=”[Link]”> <!—Link to a site icon (favicon) 

<meta name=”description” content=”A beginner-friendly demo of HTML5


elements.”> <!—Meta description for search engines 

<style>/* (empty per request) no CSS used in this file */</style> <!—
Where CSS rules would go (left empty as requested) 

<!—(script tag omitted by choice because no JavaScript should be used) 

</head> <!—End of head 

<body> <!—Body: visible content of the page starts here 

HTML 5 tags
16

<header> <!—Header for the page (typically contains site title, logo, or top
nav) 

<h1>HTML5 Elements Reference Demo</h1> <!—Main heading of the


page 

<p>Author: Example Author</p> <!—A short paragraph inside the header



</header> <!—End header 

<nav> <!—Navigation section for links 

<ul> <!—Unordered list used for nav links 

<li><a href=”#structure”>Document Structure</a></li> <!—Link to a


section 

<li><a href=”#text”>Text & Inline</a></li> <!—Link to a section 

<li><a href=”#media”>Media & Graphics</a></li> <!—Link to a


section 

<li><a href=”#forms”>Forms</a></li> <!—Link to a section 

<li><a href=”#tables”>Tables</a></li> <!—Link to a section 

</ul> <!—End of unordered nav list 

</nav> <!—End nav 

<main> <!—Main content of the document (central topic) 

<article id=”structure”> <!—Self-contained piece of content (article) 

<h2>Document Structure & Sections</h2> <!—Article subheading 

<hgroup> <!—Groups multiple headings (rarely used but shown here) 

<h3>Grouped Title</h3> <!—Heading inside hgroup 

<h4>Subheading inside hgroup</h4> <!—Subheading inside hgroup 

</hgroup> <!—End hgroup 

<section> <!—Thematic section grouping content 


HTML 5 tags
17

<h3>Sections, Aside, Header & Footer</h3> <!—Section heading 

<p>This page demonstrates many HTML elements in context.</p> <!


—Paragraph in section 

<aside> <!—Sidebar-like content related to main content 

<p>Quick note: <abbr title=”HyperText Markup


Language”>HTML</abbr> is the web’s skeleton.</p> <!—Aside content
with an abbreviation 

</aside> <!—End aside 

</section> <!—End section 

<address>Contact: example@[Link]</address> <!—Contact


information for the author/owner 

</article> <!—End article 

<section id=”text”> <!—Section for text and inline semantics 

<h2>Text Content & Inline Semantics</h2> <!—Section title 

<p>This is a <strong>strong</strong> word and this is <b>bold


(stylistic)</b>. <!—Paragraph showing <strong> and <b> 

</p> <!—Closing paragraph tag 

<p>This is <em>emphasized</em> text and this is <i>italic


(stylistic)</i>. <!—Paragraph showing <em> and <i> 

</p> <!—End paragraph 

<p>Use <mark>mark</mark> to highlight and <small>small</small>


for fine print. <!—Highlight and fine print examples 

</p> <!—End paragraph 

<p>Quote example: <q>Short inline quote</q></p> <!—Inline


quotation 

<blockquote> <!—Block quotation for longer quoted text 

HTML 5 tags
18

This is a block quote — useful for longer quoted passages.

</blockquote> <!—End blockquote 

<p>Code inline: <code>[Link](‘hello’)</code> and sample output:


<samp>Output line</samp></p> <!—Inline code and sample output 

<p>User input example: Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to


copy.</p> <!—Keyboard input example 

<pre>Preformatted text

Line breaks and spaces are preserved here.

</pre> <!—Preserved whitespace and line breaks 

<div>Generic container &mdash; used to group elements without special


meaning.</div> <!—Generic block container 

<hr> <!—Thematic break (horizontal line) 

<figure> <!—Self-contained content like image or diagram 

<img src=”[Link]” alt=”Sample” /> <!—Image element (embeds


image) 

<figcaption>Figure caption describing the image.</figcaption> <!—


Caption for the figure 

</figure> <!—End figure 

<p>Mathematical variable: <var>x</var><sup>2</sup> +


<sub>1</sub></p> <!—Variable with superscript and subscript 

<p>Time example: <time datetime=”2025-10-28”>October 28,


2025</time></p> <!—Machine-readable time element 

<p>An example of a <dfn>definition</dfn> tag used for the defining


instance of a term.</p> <!—Definition tag 

<p>Data element: <data value=”42”>Forty-two</data></p> <!—


Machine-readable data value 

<p>Sample <bdi>isolation</bdi> and <bdo dir=”rtl”>override


direction</bdo> examples.</p> <!—Bidirectional isolation and override 

<ruby>漢 <rp>(</rp><rt>kan</rt><rp>)</rp></ruby> <!—Ruby


annotation for East Asian text with rt and rp 

HTML 5 tags
19

<p>Possible line break here<wbr>opportunity.</p> <!—Word break


opportunity 

</section> <!—End text section 

<section id=”media”> <!—Media and graphics examples 

<h2>Media & Graphics</h2> <!—Section heading 

<picture> <!—Responsive images container 

<source srcset=”[Link]” media=”(max-width:600px)”> <!—


Source for small screens 

<source srcset=”[Link]” media=”(min-width:601px)”> <!—


Source for large screens 

<img src=”[Link]” alt=”Responsive example”> <!—Fallback image



</picture> <!—End picture 

<audio controls> <!—Audio player (contains source children) 

<source src=”audio.mp3” type=”audio/mpeg”> <!—Audio source 

Your browser does not support audio. <!—Fallback text 

</audio> <!—End audio 

<video controls width=”320”> <!—Video player 

<source src=”video.mp4” type=”video/mp4”> <!—Video source 

<track kind=”captions” srclang=”en” label=”English captions”


src=”[Link]”> <!—Captions track 

Your browser does not support video. <!—Fallback text 

</video> <!—End video 

<canvas id=”myCanvas” width=”200” height=”100”></canvas> <!—


Canvas for drawing with JavaScript (no JS used here) 

<figure>

<map name=”imgmap”> <!—Image map container 

HTML 5 tags
20

<area shape=”rect” coords=”0,0,100,100” href=”#” alt=”Clickable


area”> <!—Clickable region inside an image map 

</map> <!—End map 

<img src=”[Link]” usemap=”#imgmap” alt=”Image map


example”> <!—Image that uses a map 

</figure> <!—End figure with map 

<svg width=”100” height=”50” xmlns=[Link] <!


—Inline SVG for vector graphics 

<rect width=”100” height=”50” fill=”none” stroke=”black”></rect> <!


—Simple rectangle inside SVG 

</svg> <!—End SVG 

<!—MathML example (may require browser support) 

<math xmlns=[Link]

<msup><mi>x</mi><mn>2</mn></msup>

</math> <!—End MathML 

<embed src=”[Link]” type=”application/pdf”> <!—Embed an external


resource (like a PDF) 

<!—Note: <object> can also embed external resources with fallback


content 

<object data=”[Link]” type=”application/pdf”>PDF fallback text or


link.</object> <!—Object embedding with fallback 

<iframe src=”about:blank” title=”Example iframe”> <!—Inline frame


embedding another page 

Fallback content for browsers that do not support iframes.

</iframe> <!—End iframe 

<fencedframe src=”about:blank” title=”Fenced Frame example”> <!—


Experimental fencedframe for secure nested contexts 

Fallback for browsers without fencedframe support.

</fencedframe> <!—End fencedframe (may not be supported in all


browsers) 

HTML 5 tags
21

</section> <!—End media section 

<section id=”forms”> <!—Forms and input controls 

<h2>Forms & Inputs</h2> <!—Section heading 

<form action=”/submit” method=”post”> <!—Form container that sends


data to a server 

<fieldset> <!—Groups related form controls 

<legend>Personal Info</legend> <!—Caption for the fieldset 

<label for=”name”>Name:</label> <!—Label tied to an input 

<input type=”text” id=”name” name=”name” placeholder=”Your


name”> <!—Single-line text input 

<br> <!—Line break (for layout only) 

<label for=”bio”>Bio:</label> <!—Label for textarea 

<textarea id=”bio” name=”bio” rows=”3” cols=”30”></textarea> <!


—Multi-line text input 

<br>

<label for=”color”>Favorite color:</label>

<select id=”color” name=”color”> <!—Dropdown select 

<optgroup label=”Warm colors”> <!—Group of related options 

<option value=”red”>Red</option> <!—Option inside optgroup 

<option value=”orange”>Orange</option> <!—Option inside


optgroup 

</optgroup> <!—End optgroup 

<optgroup label=”Cool colors”> <!—Another option group 

<option value=”blue”>Blue</option> <!—Option 

<option value=”green”>Green</option> <!—Option 

</optgroup> <!—End optgroup 

</select> <!—End select 

HTML 5 tags
22

<br>

<label for=”age”>Age:</label>

<input type=”number” id=”age” name=”age” min=”0” max=”120”>


<!—Number input with min/max 

<br>

<label for=”gender”>Gender:</label>

<input type=”radio” id=”male” name=”gender”


value=”male”><label for=”male”>Male</label> <!—Radio button option 

<input type=”radio” id=”female” name=”gender”


value=”female”><label for=”female”>Female</label> <!—Radio button
option 

<br>

<label><input type=”checkbox” name=”subscribe” value=”yes”>


Subscribe</label> <!—Checkbox input 

<br>

<label for=”choices”>Choose (with suggestions):</label>

<input list=”choices” id=”choiceInput” name=”choiceInput”> <!—


Input with datalist suggestions 

<datalist id=”choices”> <!—Datalist providing suggested values 

<option value=”Option 1”></option> <!—Suggested option 

<option value=”Option 2”></option> <!—Suggested option 

</datalist> <!—End datalist 

<br>

<button type=”submit”>Submit</button> <!—Clickable button


(submits the form) 

</fieldset> <!—End fieldset 

<output name=”result” for=”age choiceInput”> <!—Output field for


calculation results 

<!—Output values can be filled by scripts (none used here) 

HTML 5 tags
23

</output> <!—End output 

<progress value=”30” max=”100”>30%</progress> <!—Progress bar


showing task progress 

<meter value=”0.6” min=”0” max=”1”>60%</meter> <!—


Measurement gauge inside a range 

<selectedcontent>Selected content placeholder (experimental


element)</selectedcontent> <!—Experimental element for custom selects

</form> <!—End form 

</section> <!—End forms section 

<section id=”tables”> <!—Tables section 

<h2>Tables</h2> <!—Section heading 

<table> <!—Table element 

<caption>Example table caption</caption> <!—Table caption/title 

<colgroup> <!—Group of column definitions 

<col> <!—Column definition (can set width/styles with CSS) 

<col> <!—Another column 

</colgroup> <!—End colgroup 

<thead> <!—Header group for the table 

<tr> <!—Table row inside thead 

<th scope=”col”>Name</th> <!—Header cell 

<th scope=”col”>Value</th> <!—Header cell 

</tr> <!—End header row 

</thead> <!—End thead 

<tbody> <!—Body group of rows 

<tr> <!—Table row 

<td>Item A</td> <!—Data cell 

HTML 5 tags
24

<td>100</td> <!—Data cell 

</tr> <!—End row 

</tbody> <!—End tbody 

<tfoot> <!—Footer group (e.g., totals) 

<tr>

<td>Total</td>

<td>100</td>

</tr>

</tfoot> <!—End tfoot 

</table> <!—End table 

</section> <!—End tables section 

<section id=”interactive”> <!—Interactive widgets & components 

<h2>Interactive Widgets & Web Components</h2> <!—Heading 

<details> <!—Collapsible disclosure widget 

<summary>More info (click to expand)</summary> <!—Visible


summary that toggles details 

<p>This content is hidden until the user toggles the details


element.</p> <!—Hidden/expandable content 

</details> <!—End details 

<dialog open> <!—Dialog (modal) element; `open` shows it by default


here for demo 

<p>This is a dialog box (modal-like). In real use, control with JS (not


used here).</p>

</dialog> <!—End dialog 

<template id=”myTemplate”> <!—Template for content not rendered


until cloned via scripts 

<p>Template content (not displayed until used by scripts).</p>

HTML 5 tags
25

</template> <!—End template 

<slot name=”slot-example”> <!—Slot used inside web components to


render external content 

Default slot content if nothing is provided by the host.

</slot> <!—End slot 

</section> <!—End interactive section 

<section id=”edits”> <!—Demarcating edits 

<h2>Edits: Inserted & Deleted Text</h2> <!—Heading 

<p>Normal text <ins datetime=”2025-10-28”>newly inserted


text</ins> and <del datetime=”2025-10-27”>removed text</del>.</p> <!
—Inserted and deleted text examples 

</section> <!—End edits section 

<section id=”lists”> <!—Lists demonstration 

<h2>Lists</h2> <!—Heading 

<ol> <!—Ordered (numbered) list 

<li>First item</li> <!—List item 

<li>Second item</li> <!—List item 

</ol> <!—End ordered list 

<ul> <!—Unordered (bulleted) list 

<li>Bullet one</li> <!—List item 

<li>Bullet two</li> <!—List item 

</ul> <!—End unordered list 

<dl> <!—Description list 

<dt>Term</dt> <!—Term name 

<dd>Definition or description of the term.</dd> <!—Definition 

</dl> <!—End description list 

HTML 5 tags
26

<menu> <!—Menu / list of commands (treated like list) 

<li>Command 1</li> <!—Menu item 

<li>Command 2</li> <!—Menu item 

</menu> <!—End menu 

</section> <!—End lists section 

</main> <!—End main content 

<footer> <!—Footer for the page 

<p>&copy; 2025 Example Author</p> <!—Footer text with copyright 

</footer> <!—End footer 

<noscript> <!—Content shown if JavaScript is disabled in the browser 

JavaScript is disabled in your browser. (No JS is used in this demo.)

</noscript> <!—End noscript 

</body> <!—End body 

</html> <!—End root html element 

HTML 5 tags

You might also like