HTML References - List, Elements, Attribute - November 12th, 2024

The HTML references are used to describe all elements and attributes in HTML. There are a variety of HTML tags used in web development such as HTML Basic Tags, formatting tags, forms tags, image tags, audio and video tags, link tags, list tags, programming tags, etc available in the HTML References.

The Mdn references-html consists of groups HTML tags in a list of categories that includes HTML element references, global attributes, attribute reference, comments, content categories, etc. In this article, we will learn about some major categories listed in HTML References along with their functions.

Table of Contents

HTML Element References

html references

The HTML references for elements contain all tags ranging from the root to other sections of the HTML Document.

Main Root Tags

<html>

This tag is used to represent the root of an HTML document. All HTML elements are enclosed within this tag.

Document Metadata

These HTML references consist of tags which convey information about the page. Some of the major information such as styles, scripts, meta information, etc.

<head>	It contains information interpreted by the machines such as styles, title, scripts, etc.
<link>	This tag is used to specify the relationship between the current document to any external resource.
<style>	It contains CSS style information applied in the current web page.
<title>	It is used to represent the title that is displayed in the title bar of the browser.

Sectioning Root

<body>

All major contents of the HTML document is enclosed within this tag. There can only be one body tag in a HTML document.

Content Sectioning

These HTML references tags are used to organise the content in the HTML document into a readable and well optimised format.

<address>	It contains the communication information of a person or an organisation
<footer>	It is used to enclose a footer for the nearest sectioning element.
<header>	It represents the introduction part of a html document
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	It is used to represent the levels of heading in a html document. <h1> is the highest level and <h6> is the lowest level.
<main>	It is used to enclose the dominant content of the HTML document.
<nav>	It represents a section of a page with navigation links to the current or other documents.

For a complete list of HTML references related to content sectioning visit the mdn reference -html page.

Text Contents

html references

This section of the HTML document contains all elements enclosed within the body tags used for SEO or accessibility on the page. It contains

The below list of HTML references consist of all major important tags in HTML element references.

HTML Tag	Description
<a>	Defines a hyperlink, used to link to another page or location.
<abbr>	Defines an abbreviation or acronym, with optional title attribute for full term description.
<address>	Represents contact information for the document or section owner.
<article>	Specifies independent, self-contained content, like a blog post.
<aside>	Contains content tangentially related to the content around it, like sidebars or pull quotes.
<audio>	Embeds sound content, with attributes to control playback.
<b>	Displays bold text for stylistic purposes without extra importance.
<bdi>	Isolates text that might have a different text direction from its surroundings.
<bdo>	Overrides the current text direction.
<blockquote>	Defines a section quoted from another source, often indented.
<br>	Inserts a line break.
<button>	Defines a clickable button.
<canvas>	Used for drawing graphics via scripting (usually JavaScript).
<caption>	Specifies a table caption, must be a direct child of <table>.
<cite>	Defines a title of a work, such as a book or article title.
<code>	Displays a section of code in a monospaced font.
<data>	Links content with machine-readable data.
<datalist>	Provides an autocomplete feature for an <input> element.
<dd>	Describes a term in a description list, used inside <dl>.
<del>	Indicates deleted text.
<details>	Defines additional details that can be hidden or shown by the user.
<dfn>	Specifies a term being defined.
<dialog>	Represents a dialog box or modal window.
<div>	Used as a container for other elements, often styled with CSS.
<dl>	Defines a description list of terms and descriptions.
<dt>	Specifies a term in a description list.
<em>	Emphasizes text, usually displayed in italics.
<embed>	Embeds external content like plugins or applications.
<fieldset>	Groups related elements within a form.
<figcaption>	Provides a caption for a <figure> element.
<figure>	Encapsulates media content (image, diagram, etc.) with caption.
<form>	Represents an HTML form for user input.
<header>	Specifies the header for a section or page.
<hgroup>	Groups heading elements (<h1> to <h6>) to display as a single heading.
<hr>	Inserts a horizontal rule (line), usually for thematic breaks.
<i>	Displays italicized text for stylistic purposes.
<iframe>	Embeds another HTML page within the current page.
<img>	Embeds an image.
<input>	Defines an input field for forms.
<ins>	Marks text that has been inserted.
<kbd>	Represents user input, typically displayed in a monospaced font.
<label>	Labels an <input> element for accessibility and usability.
<legend>	Specifies a caption for the <fieldset>.
<li>	Defines a list item inside <ul>, <ol>, or <menu>.
<mark>	Highlights or marks text for reference or emphasis.
<meter>	Displays a scalar measurement within a known range, like a gauge.
<noscript>	Defines alternate content for users with JavaScript disabled.
<object>	Embeds external resources, like multimedia content.
<ol>	Defines an ordered list.
<optgroup>	Groups options in a <select> menu.
<option>	Defines an item within a <select>, <optgroup>, or <datalist>.
<output>	Displays the result of a calculation or action.
<p>	Represents a paragraph.
<picture>	Contains multiple <source> elements for responsive images.
<pre>	Displays preformatted text in a monospaced font.
<progress>	Shows the progress of a task.
<q>	Defines a short inline quotation.
<rp>	Provides fallback text for browsers that don’t support <ruby>.
<rt>	Defines the pronunciation of characters within <ruby>.
<ruby>	Represents characters with pronunciation annotations (common in East Asian texts).
<s>	Shows text as “struck through” to indicate removed or irrelevant content.
<samp>	Represents sample output from a program or system.
<script>	Embeds JavaScript code or references an external JavaScript file.
<section>	Defines a section in a document, such as a chapter or thematic grouping.
<select>	Creates a dropdown list.
<small>	Shows text in a smaller font, typically for fine print.
<span>	Inline container for text or elements, often styled with CSS.
<strong>	Indicates strong importance, usually bolded.
<style>	Embeds CSS styles within the HTML document.
<sub>	Displays subscript text.
<summary>	Defines a summary or caption for a <details> element.
<sup>	Displays superscript text.
<svg>	Embeds Scalable Vector Graphics (SVG).
<table>	Represents a table.
<tbody>	Groups body content in a table.
<td>	Defines a table cell.
<template>	Holds client-side content that won’t be rendered when the page loads.
<textarea>	Provides a multiline input field.
<tfoot>	Groups footer content in a table.
<th>	Defines a header cell in a table.
<thead>	Groups header content in a table.
<time>	Defines a time or date.
<title>	Specifies the title of the document, usually displayed in the browser tab.
<tr>	Defines a row in a table.
<track>	Provides text tracks for <video> and <audio> elements, like subtitles.
<u>	Underlines text for stylistic purposes.
<ul>	Defines an unordered (bulleted) list.
<var>	Represents a variable in mathematical or programming expressions.
<video>	Embeds a video.
<wbr>	Suggests a line break opportunity within a long word.

HTML Global Attributes

html references

The HTML Global attributes are the common HTML elements which can be used on all elements in the HTML document.

Attribute	Description
accesskey	Defines a keyboard shortcut to activate or focus an element.
autocapitalize	Controls automatic capitalization of text in an element, typically for mobile text inputs.
class	Assigns a class name to an element for styling or JavaScript access.
contenteditable	Specifies whether an element’s content is editable by the user (true or false).
contextmenu	Specifies a context menu to be displayed when the user right-clicks on the element.
data-*	Stores custom data private to the page or application, with any name after this tag
dir	Sets the text direction for the element (ltr, rtl, or auto).
draggable	Specifies whether an element is draggable (true, false, or auto).
enterkeyhint	Provides a hint for the enter key on virtual keyboards, affecting displayed text.
exportparts	Defines which shadow DOM parts should be exposed to the parent page.
hidden	Hides the element, making it not rendered or interactive on the page.
id	Defines a unique identifier for an element within the page.
inputmode	Specifies the type of virtual keyboard to use, such as decimal, text, or tel.
is	Allows extending a built-in element to behave like a custom element.
itemid	Defines a unique ID for structured data (used with Microdata).
itemprop	Specifies the properties of an item (for structured data).
itemref	Provides a list of additional elements to reference for Microdata.
itemscope	Indicates that the element is a Microdata item.
itemtype	Defines the type of item (URL) for structured data.
lang	Sets the language of the element’s content.
nonce	A cryptographic nonce used to whitelist inline scripts or styles for Content Security Policy.
part	Exposes an element to CSS from outside the shadow DOM, by naming its parts.
role	Defines the role of an element in accessibility APIs.
slot	Assigns an element to a slot within a shadow DOM custom element.
spellcheck	Specifies whether the element’s content is subject to spelling and grammar checks.
style	Adds inline CSS styling directly to an element.
tabindex	Specifies the tab order of an element, for keyboard navigation.
title	Provides additional information about an element, usually displayed as a tooltip.
translate	Specifies whether the content of the element should be translated (yes or no).

HTML Content Categories

There are three major content categories in html references listed below.

Main Content Categories
Form related Content Categories
Specific Content Categories

The HTML tags are listed in one or more categories as per their usability and functions. These categories or groups share common characteristics. Some of the major HTML content categories are heading, sectioning, phrasing, embedded, interactive, metadata, flow, etc.

Metadata elements	<base> <link> <meta> <script> <title> <style>
Flow Content	<a> <abbr> <bdo> <audio> <b> <button> <canvas> <div> <embed> <footer> <iframe> <ul> <video>
Sectioning Content	<article> <nav> <section> <aside>
Heading Content	<h1> – <h6> <hgroup>
Phrasing Content	<canvas> <data> <em> <embed> <label> <select>
Embedded Content	<audio> <canvas> <object> <svg> <video>
Interactive Content	<button> <textarea> <embed> <iframe> <label>
Form associated content	<input> <label> <fieldset> <button> <textarea> <progress>

There are more categories in the HTML references listed in the mdn web docs.

HTML Comments

The HTML Comments are used to add explanations about an element or other parts in a html document. The HTML comments are not displayed or rendered on the live web page.

<!–…–>

It specifies the comment within the html elements that is used to explain some part or keep it as a note without being displayed to the browser

HTML Date and Time Formats

The HTML date and time values contains a string that represents the date or time in the HTML document.

HTML date and time

date
datetime-local
month
time
week

To know more about the date, month, year and time format visit the mdn references -html page about date and time formats in HTML

Learn Web Development with PW Skills

Become an expert in web development and build a certified career as a full stack developer with PW Skills Full Stack Web Development Course.

Get in-depth tutorials covered by experienced mentors to help you crack interviews and discover a wide range of career opportunities in web development. Strengthen your portfolio with real world projects, industry led sessions and more only at pwskills.com.

HTML ReferencesFAQs

Q1. What are HTML references?

Ans: HTML references are a list of HTML tags grouped in various categories like metadata, flow, embedded, interactive, heading, form associated contents.