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.Â
HTML Element 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
This section of the HTML document contains all elements enclosed within the body tags used for SEO or accessibility on the page. It containsÂ
- HTML basic tagsÂ
- HTML Formatting Tags
- HTML List tagsÂ
- HTML table tags
- Forms and Inputs tags
- Audio and Video TagsÂ
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
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 |
|
Flow Content |
|
Sectioning Content |
|
Heading Content |
|
Phrasing Content |
|
Embedded Content |
|
Interactive Content |
|
Form associated content |
|
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 |
|
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.
Q2. What are different categories for HTML tags?
Ans: The HTML references contain multiple categories for different html tags.
Main content categories
Form related content categories
Specific Content Categories
Q3. What is the title tag in html tag reference?
Ans: The title tag defines the title of the HTML document or web page displayed in the title bar or page tab of a live web page.