Complete HTML glossary with practical examples

DOCTYPEdocument type declaration

What it is: The <!DOCTYPE html> declaration is the very first line of a page and tells the browser that the document uses the HTML5 standard.
What it's for: It switches the browser into standards mode, avoiding "quirks mode", which would render the page inconsistently across different browsers.
When to use it: Always write it as the document's first line, before the <html> tag.

htmlThe root of the HTML document.

What it is: The <html> tag is the root element of an HTML page.
What it's for: It marks the beginning and the end of an HTML document.
When to use it: It must be used in every HTML document.

headHolds metadata, links to external resources and the title.

What it is: The <head> tag is a container for metadata and other elements that provide information about the HTML document.
What it's for: It holds things like the document's title, links to stylesheets, scripts and other metadata that is not displayed directly on the page.
When to use it: It must be used in every HTML document, as a direct child of <html> and before the <body> tag.

bodyThe main content of the HTML document.

What it is: The <body> tag represents the main content of an HTML document.
What it's for: It defines the section of the document holding all the visible, interactive content of a web page.
When to use it: It must be used in every HTML document, as a direct child of <html>, after the <head> tag.

metaDefines metadata for an HTML document (charset, viewport and so on).

What it is: The <meta> tag is an HTML element used to provide structured metadata about an HTML document.
What it's for: It supplies additional information about the HTML document, such as the page description, the keywords, the author, the character set in use, and instructions for...
When to use it: Use it inside a document's <head> to specify metadata that cannot be expressed by other related HTML elements.

titleThe document's title (shown in the title bar or browser tab).

What it is: The <title> tag defines the HTML document's title.
What it's for: It specifies a title for the web page, which appears in the browser's title bar or on the page's tab.
When to use it: It must be used in every HTML document, inside the <head> tag.

linkDefines a relationship between the current document and an external resource (CSS, favicon).

What it is: The <link> tag is an HTML element used to specify relationships between the current document and external resources.
What it's for: It mainly connects CSS stylesheets, site icons (favicons), web fonts and other external resources to the HTML document.
When to use it: Use it inside a document's <head> to establish connections with external resources that improve or complement the document.

styleHolds style information for a document or part of it (internal CSS).

What it is: The <style> tag is an HTML element used to include CSS style information directly inside an HTML document.
What it's for: It defines CSS styles for the HTML document without having to link an external CSS file.
When to use it: Use it when you want to include CSS directly in the HTML document, usually for page-specific styles or small amounts of CSS.

scriptEmbeds or references an executable script.

What it is: The <script> tag is an HTML element used to embed or reference an executable script — typically JavaScript — inside an HTML document.
What it's for: It includes JavaScript directly in the page or links external JavaScript files, letting you add interactivity, manipulate the content of the...
When to use it: Use it when you want to add dynamic behaviour to a web page, handle events, modify the DOM, make AJAX calls, or perform any other...

noscriptDefines alternative content for when scripts are disabled.

What it is: The <noscript> tag is an HTML element defining a section of HTML content to be inserted if scripts are disabled in the user's browser or if the...
What it's for: It provides alternative content or messages to users when JavaScript is unavailable or disabled, ensuring a better user experience and accessibility in...
When to use it: Use it when you want to provide an alternative for features or content that would normally need JavaScript to work correctly.

base base URL for relative links

What it is: The <base> tag is an empty HTML element that specifies the base URL and/or the default target for all the relative URLs in a document.
What it's for: It defines the base URL for all relative links on the page and/or the default behaviour for opening links (in a new window or in the same...
When to use it: Use it when you want to specify a common base URL for many links on the page, or when you want to set a default behaviour for opening links...

headerThe heading area of the document or of a section.

What it is: The <header> tag represents a container for introductory content or a group of navigation elements.
What it's for: It defines an introductory area, or a container for navigation elements, for its parent content — or for the whole document when used as a direct child of...
When to use it: At the start of a page or a section, to introduce the content or to hold navigation elements.

mainThe document's main content.

What it is: The <main> tag represents the main content of an HTML document.
What it's for: It defines the page's central content, excluding the header, the footer, navigation and sidebars.
When to use it: It must be used only once per page, holding the unique content specific to that page.

footerThe footer of the document or of a section.

What it is: The <footer> tag represents a footer for its nearest parent element or for the whole document.
What it's for: It typically holds closing information such as copyright, links to related documents, contact details, or secondary navigation links.
When to use it: At the end of a document, a section or an article, to provide concluding or reference information.

articleIndependent content, such as an article or a blog post.

What it is: The <article> tag represents a self-contained composition in a document, page, application or site, intended to be independently distributable or reusable.
What it's for: It defines independent, self-sufficient content, such as a blog post, a newspaper article, a user comment, or any other standalone piece of content.
When to use it: When the block of content makes sense on its own, outside the context of the page containing it.

sectionA section of thematically related content.

What it is: The <section> tag represents a generic, self-contained section of a document, typically with a specific theme or topic.
What it's for: It groups thematically related content, helping to structure the document into logical, semantically meaningful parts.
When to use it: When you need to divide the page into parts with a clear theme, usually accompanied by a heading.

asideContent tangential or secondary to the main content.

What it is: The <aside> tag represents a section of a page consisting of content tangentially related to the main content, which could be considered separate...
What it's for: It defines content that is related but not essential to understanding the main content: sidebars, callouts, adverts, pull quotes or marginal notes.
When to use it: When you want to present supplementary information that enriches the main content but is not essential to understanding it.

divA generic division or container for grouping content.

What it is: The <div> tag is a generic container for flow content that in itself represents nothing.
What it's for: It is mainly used to group HTML elements for styling purposes (through class or id) or for DOM operations with JavaScript.
When to use it: When you need a technical container for layout, styling or scripting and no more suitable semantic tag exists.

spangeneric inline container

What it is: The <span> tag is a generic inline container that in itself represents nothing and adds no semantic meaning.
What it's for: It isolates a portion of text or inline elements so you can style it with CSS (through class or id) or manipulate it with JavaScript.
When to use it: When you need a "hook" for styling or scripting on part of a text and no more suitable semantic tag exists; it is the inline equivalent of <div>.

addresscontact information

What it is: The <address> tag is a semantic element enclosing the contact details of an article's author or of the whole page.
What it's for: It semantically marks up contact points such as emails, addresses, phone numbers or links, helping browsers and assistive technologies recognise them.
When to use it: Use it for contact details relating to the <article> or <body> containing it, typically inside a <footer>; do not use it for a generic postal address that is not a contact point.

h1-h6Headings and subheadings at various levels

What it is: The <h1> to <h6> tags are HTML heading elements defining six levels of heading in descending order of importance.
What it's for: They create a hierarchical structure for the content, making the document easier to read and understand.
When to use it: For the headings and subheadings of the various sections, respecting the content's hierarchical order.

hgroupheading + subheading group

What it is: The <hgroup> tag groups a main heading (an <h1> to <h6> element) with one or more subheading or tagline paragraphs associated with it.
What it's for: It represents a heading and the secondary text accompanying it as a single unit, without that secondary text creating a new level in the document's structure.
When to use it: Use it when a heading has a subtitle or a tagline you want to keep tied to it — at the start of a <header> or an <article>, for instance.

pA paragraph of text

What it is: The <p> tag defines a paragraph in HTML.
What it's for: It divides textual content into logical paragraphs, improving the document's readability and structure.
When to use it: To separate related blocks of text.

ulUnordered list

What it is: The <ul> tag represents an unordered list in HTML.
What it's for: It creates lists of related items with no specific order or numeric hierarchy.
When to use it: When you have a list of items whose order does not matter.

olOrdered list

What it is: The <ol> tag represents an ordered list in HTML.
What it's for: It creates lists of related items that have a specific order or sequence, typically numbered or lettered.
When to use it: When the order of the items matters — steps, rankings or procedures, for example.

liList item

What it is: The <li> tag represents a list item in HTML.
What it's for: It defines individual items within a list, giving the listed content structure and semantics.
When to use it: As a direct child of <ol>, <ul> or <menu>.

dlDescription list

What it is: The <dl> tag represents a description list in HTML.
What it's for: It creates lists of name-value pairs: glossaries, metadata, or any other kind of list where each item has a name (or term) and a value (or...
When to use it: When you need to pair a term with a description, as in glossaries, spec sheets or metadata.

dtDescription term

What it is: The <dt> tag represents the "description term", or name, in a description list (<dl>).
What it's for: It specifies a term, name or label that the following <dd> element will define or describe.
When to use it: Inside a <dl>, to mark the term or label being explained.

ddDescription details

What it is: The <dd> tag represents the "description details" in a description list (<dl>).
What it's for: It provides the definition, description or details relating to the term given in the preceding <dt> element.
When to use it: Inside a <dl>, straight after a <dt>, to explain or describe that term.

strongImportant text, rendered in bold.

What it is: The <strong> tag is an HTML element indicating that the text inside it carries strong importance, seriousness or urgency.
What it's for: It strongly emphasises a piece of text, marking it as particularly important or critical in the document's context.
When to use it: Use it when you want to give a word or phrase particular weight, especially where the text's importance could affect understanding or...

emEmphasised text, rendered in italics.

What it is: The <em> tag is an inline element indicating emphasis in HTML text.
What it's for: It highlights parts of text that should be read or interpreted with particular emphasis or stress.
When to use it: Use it when you want to give a word or phrase importance or emphasis within a piece of text.

bBold text, used stylistically.

What it is: The <b> tag is an HTML element used to draw attention to text without giving it any particular semantic importance.
What it's for: It highlights a piece of text visually, rendering it in bold, without implying emphasis or particular importance semantically.
When to use it: Use it when you want to draw attention to text for stylistic or presentational reasons, but not to signal semantic importance or emphasis.

iItalic text, used stylistically.

What it is: The <i> tag is an HTML element indicating text that is somehow different from the normal text around it, usually rendered in italics.
What it's for: It denotes text with an alternative quality, or in a different voice or mood: technical terms, foreign-language phrases, thoughts, or ship names.
When to use it: Use it when you want to signal a qualitative difference in the text, without necessarily implying emphasis (for which you would use <em>).

uunderlined text

What it is: The <u> tag is an inline element used to render text with an underline in HTML.
What it's for: It indicates that a portion of text should be stylistically distinct from normal text, typically by underlining it.
When to use it: Use it to underline text that carries no particular semantic emphasis, such as proper nouns in Chinese or spelling annotations.

brline break

What it is: The <br> tag is an empty element that produces a line break in HTML text.
What it's for: It inserts a line break without starting a new paragraph.
When to use it: Use it when you want a line break inside a block of text, as in poems, addresses, or cases where a particular formatting is...

hrhorizontal rule

What it is: The <hr> tag is an empty element representing a thematic break between paragraphs of HTML content.
What it's for: It draws a horizontal rule in the document, typically used to separate sections of content or to signal a change of subject.
When to use it: Use it when you want a visual separation between different sections of content, or to mark a significant thematic change within the page.

markhighlighted text

What it is: The <mark> tag is an inline element used to highlight or mark parts of text in an HTML document.
What it's for: It highlights a piece of text visually, typically to draw the reader's attention to that specific portion of content.
When to use it: Use it when you want to highlight text for reference, for relevance, or to indicate a search result within a document.

smalltext of lesser importance

What it is: The <small> tag is an inline element representing side comments or text of lesser importance in an HTML document.
What it's for: It indicates that the text it contains is of lesser relevance, or a side comment relative to the main content around it.
When to use it: Use it for text considered of secondary importance: disclaimers, footnotes, copyright, or legal small print.

deldeleted text

What it is: The <del> tag is an inline element representing text that has been deleted or removed from an HTML document.
What it's for: It indicates that a piece of text has been removed or is no longer valid, while keeping it visible in the document.
When to use it: Use it when you want to show text that has been deleted, replaced or changed, often together with the <ins> tag marking the new text inserted.

insinserted text

What it is: The <ins> tag is an inline element representing text that has been inserted or added to an HTML document.
What it's for: It indicates that a piece of text has been added or inserted, often to show changes or updates to the content.
When to use it: Use it when you want to highlight new text added to a document, often together with the <del> tag to show the full set of changes.

subsubscript text

What it is: The <sub> tag is an inline element representing subscript text in an HTML document.
What it's for: It renders text slightly below and smaller than the normal baseline, typically used for chemical formulas, mathematical notation or...
When to use it: Use it for subscripts in chemical formulas (H2O, for instance), mathematical notation, or footnote references.

supsuperscript text

What it is: The <sup> tag is an inline element representing superscript text in an HTML document.
What it's for: It renders text slightly above and smaller than the normal baseline, typically used for exponents, mathematical notation or...
When to use it: Use it for exponents in mathematical formulas, ordinal numbers (e.g.

abbrabbreviation or acronym

What it is: The <abbr> tag is an inline element representing an abbreviation or an acronym in an HTML document.
What it's for: It indicates that a sequence of characters is an abbreviation or an acronym, optionally supplying the full meaning through the title attribute.
When to use it: Use it when you introduce an abbreviation or an acronym in the text, especially the first time it appears in the document or when you want to explain it.

timedate or time

What it is: The <time> tag is an inline element representing a date, a time or a time interval in an HTML document.
What it's for: It marks dates and times up semantically in a format readable by both humans and machines, making temporal information easier to interpret and process.
When to use it: Use it when you refer to specific dates, times or intervals in your content: publication dates, deadlines, event times and so on.

qshort inline quotation

What it is: The <q> tag is an inline element representing a short quotation within a piece of text in an HTML document.
What it's for: It semantically marks a short quotation that needs no paragraph break, distinguishing it from the surrounding text.
When to use it: Use it for short quotations embedded in the flow of the text, typically one sentence or a few.

blockquoteextended quotation

What it is: The <blockquote> tag is a block-level element representing an extended quotation from another source in an HTML document.
What it's for: It semantically marks a longer or more complex quotation, separating it visually from the main text and signalling that the content is quoted.
When to use it: Use it for longer quotations that need a separate paragraph or several lines, typically taken from another source.

citecitation of a work's title

What it is: The <cite> tag is an inline element representing the title of a work (a book, a film, a song and so on) in an HTML document.
What it's for: It semantically marks a reference to the title of a creative, scientific or intellectual work, distinguishing it from the surrounding text.
When to use it: Use it when you refer to the title of a work: books, articles, films, songs, paintings, websites and so on.

codefragment of code

What it is: The <code> tag is an inline element representing a short fragment of computer source code.
What it's for: It semantically marks fragments of code, which browsers show by default in a monospace font.
When to use it: Use it for command names, variables, tags or short fragments of code in your text; for multi-line blocks, pair it with <pre>.

prepreformatted text

What it is: The <pre> (preformatted) tag is a block-level element that shows text exactly as it is written in the source.
What it's for: It preserves spaces, tabs and line breaks, which HTML would normally collapse or ignore, and it is rendered in a monospace font.
When to use it: Use it for blocks of code (often together with <code>), terminal output or ASCII art — that is, whenever whitespace carries meaning.

stext no longer accurate (struck through)

What it is: The <s> tag is an inline element that shows text struck through, with a line running across it.
What it's for: It indicates content that is no longer accurate or relevant, but which you still want to display.
When to use it: Use it for out-of-date information, such as an old price next to a discounted one; for text removed in a revision, use <del> instead.

kbdkeyboard input

What it is: The <kbd> (keyboard) tag is an inline element representing input entered by the user, typically from a keyboard.
What it's for: It semantically marks keys, key combinations or commands to be typed, usually rendered in a monospace font.
When to use it: Use it in instructions to indicate shortcuts or commands — the Ctrl + C combination, for instance.

sampoutput from a program

What it is: The <samp> (sample) tag is an inline element representing sample output produced by a program or a system.
What it's for: It semantically marks messages, results or output generated by the computer, rendered by default in a monospace font.
When to use it: Use it to show error messages, command output or system responses in your text.

varvariable

What it is: The <var> tag is an inline element representing a variable in a mathematical expression or a programming context.
What it's for: It semantically marks a variable's name, typically rendered in italics by browsers.
When to use it: Use it to indicate variables in formulas or code explanations — "the area is base multiplied by height", for example.

dfnthe term being defined

What it is: The <dfn> (definition) tag is an inline element identifying the term being defined within a sentence.
What it's for: It semantically marks a term's first occurrence — the one where its definition is given.
When to use it: Use it around the defined term when you introduce and explain it for the first time in the text.

datamachine-readable value

What it is: The <data> tag is an inline element linking human-readable text content to a machine-readable version, through the value attribute.
What it's for: It semantically supplies a machine-readable value (a product code or an identifier, say) alongside the text shown.
When to use it: Use it when a piece of text has a corresponding value useful to scripts or processing; for dates and times use the more specific <time> element instead.

ahyperlink

What it is: The <a> tag is an inline element used to create hyperlinks in an HTML document.
What it's for: It creates clickable links that can take the user to other web pages, files, email addresses, positions within the same page, or any other URL.
When to use it: Use it whenever you want to create a link to another resource, whether inside or outside the website.

navnavigation section

What it is: The <nav> tag is a sectioning element used to define a main navigation section in an HTML document.
What it's for: It groups and semantically identifies a website's or a document section's main navigation links.
When to use it: Use it to enclose the main navigation menus: the site's primary menu, section menus, or any group of links representing a navigation...

mapimage map

What it is: The <map> tag is an element used to define an image map — an image with clickable areas.
What it's for: It creates interactive areas within an image, letting you tie different parts of the image to different links or actions.
When to use it: Use it when you want different areas of an image to be clickable and linked to different destinations, as in interactive geographical maps or complex diagrams.

areaclickable area in an image map

What it is: The <area> tag is an empty element used inside a <map> to define a clickable area in an image map.
What it's for: It specifies a clickable region within an image, letting you attach links or actions to specific parts of it.
When to use it: Use it inside a <map> element to define interactive areas in an image, as in geographical maps, diagrams or image-based interfaces.

imgimage

What it is: The <img> tag is an empty element used to embed an image in an HTML document.
What it's for: It displays images within a web page: photographs, illustrations, charts, or any other kind of visual content.
When to use it: Use it whenever you want to include an image in the page's content, whether decorative or informative.

figureself-contained content

What it is: The <figure> tag is a container element used to wrap self-contained content such as images, diagrams or code, often accompanied by a caption.
What it's for: It groups self-contained content (an image, a chart, a video) with its caption, creating an independent semantic unit within the document.
When to use it: Use it when you want to present content that is referred to in the main text but could be moved to an appendix or elsewhere in the document without...

figcaptioncaption for a figure

What it is: The <figcaption> tag is an element used inside <figure> to provide a caption or an explanation of the figure's content.
What it's for: It provides a title, an explanation or additional context for the content enclosed in the associated <figure> element.
When to use it: Use it inside a <figure> element to describe or explain the figure's content, which may be an image, a chart, a video, or a block of...

audioaudio playback

What it is: The <audio> tag is an HTML5 element used to embed audio content in a web document.
What it's for: It plays audio files directly in the browser with no need for external plugins, offering native playback controls.
When to use it: Use it when you want to add audio content — music, podcasts, sound effects or any other kind of audio — to a web page.

videovideo playback

What it is: The <video> tag is an HTML5 element used to embed video content in a web document.
What it's for: It plays video files directly in the browser with no need for external plugins, offering native playback controls and various customisation options.
When to use it: Use it when you want to add video content — films, animation, video tutorials or any other kind of video — to a web page.

sourcealternative media source

What it is: The <source> tag is an empty element used inside <audio>, <video> or <picture> to specify alternative media resources.
What it's for: It supplies several versions of a media resource (audio, video or image) to ensure the widest possible compatibility across browsers and devices.
When to use it: Use it inside <audio>, <video> or <picture> elements when you want to offer alternative formats of the same media content.

tracktext track for media

What it is: The <track> tag is an empty element used as a child of <audio> and <video> to specify timed text tracks.
What it's for: It provides subtitles, captions, audio descriptions or other kinds of text synchronised with the audio or video content.
When to use it: Use it inside <audio> or <video> elements when you want to add subtitles, translations, audio descriptions or chapters to the media content.

canvasdynamic drawing area

What it is: The <canvas> tag is an HTML element providing a rectangular area on which you can draw graphics, animation or other visual elements using JavaScript.
What it's for: It creates charts, animation, games, data visualisations and other dynamic visual content directly in the browser, with no external plugins.
When to use it: Use it when you need to render complex graphics or animation, build browser-based games, or create interactive data visualisations that require...

svgscalable vector graphics

What it is: The <svg> tag is a container element for Scalable Vector Graphics in HTML5.
What it's for: It defines and embeds scalable vector graphics directly in the HTML document, letting you create images that stay sharp at any...
When to use it: Use it to create icons, logos, illustrations, interactive charts and animation that must stay sharp at any resolution or screen size.

tabledata table

What it is: The <table> tag is an HTML element used to create tables of data structured in rows and columns.
What it's for: It presents information in tabular form, organising data into rows and columns so it is easy to read and compare.
When to use it: Use it when you need to present structured data with a two-dimensional relationship: timetables, statistics, comparison information, or any set of...

captionthe table's title

What it is: The <caption> tag defines a table's title or caption.
What it's for: It provides a description of the whole table, useful for comprehension and accessibility, shown above it by default.
When to use it: Use it as the first child of the <table> element, to give a title explaining what data it holds.

colgroupcolumn group

What it is: The <colgroup> tag groups one or more of a table's columns so they can be formatted together.
What it's for: It defines common properties (width or styling, say) applicable to whole columns, without repeating them on every cell.
When to use it: Use it straight after <caption> (or at the start of the table), normally containing <col> elements.

colsingle column

What it is: The <col> tag represents a single column (or several, with the span attribute) within a <colgroup>.
What it's for: It applies styles or attributes to a specific column of the table; it is an empty element, with no closing tag.
When to use it: Use it inside a <colgroup> when you want to give particular columns a shared width or style.

theadtable header

What it is: The <thead> tag is an HTML element used to group the header content in an HTML table.
What it's for: It defines a group of rows forming a table's header, typically holding descriptive labels for the columns.
When to use it: Use it inside a <table> element to enclose the table's header rows — generally the first row, or first rows, describing the...

tbodytable body

What it is: The <tbody> tag is an HTML element used to group the main content, or body, of an HTML table.
What it's for: It wraps the rows holding the table's main data, separating them from the header (<thead>) and the footer (<tfoot>).
When to use it: Use it inside a <table> element to enclose the table's data rows, excluding the header and footer rows.

tfoottable footer

What it is: The <tfoot> tag is an HTML element used to group the footer content in an HTML table.
What it's for: It defines a group of rows forming a table's footer, typically holding summaries, totals or other concluding information about the data...
When to use it: Use it inside a <table> element to enclose the table's footer rows, generally holding totals, sums or other information...

trtable row

What it is: The <tr> tag is an HTML element defining a row within a table.
What it's for: It creates a horizontal row in a table, holding data cells (<td>) or header cells (<th>).
When to use it: Use it inside <table>, <thead>, <tbody> or <tfoot> elements to define each individual row of the table.

thtable header cell

What it is: The <th> tag is an HTML element defining a header cell within a table.
What it's for: It creates header cells for a table's columns or rows, providing a label or a description for the data held in the ordinary cells (<td>).
When to use it: Use it inside <tr> elements to define column headers (typically in the first row) or row headers (typically in the first column) of...

tdtable data cell

What it is: The <td> tag is an HTML element defining a standard data cell within a table.
What it's for: It holds a table's actual data, representing a single unit of information within a row.
When to use it: Use it inside <tr> elements to define standard data cells — those that are not headers — in a table.

formcontainer for an interactive form

What it is: The <form> tag is an HTML element representing a section of a document containing interactive controls for submitting information.
What it's for: It creates an interactive area where users can enter data and send it to a server for processing.
When to use it: Use it when you need to collect information from users: contact forms, search forms, registration forms, surveys, and any other...

inputinteractive input field

What it is: The <input> tag is an HTML element creating an interactive input field within a form, letting the user enter data of various kinds.
What it's for: It collects user input in various formats — text, numbers, dates, checkboxes, radio buttons and more — depending on the type specified.
When to use it: Use it inside a <form>, or on its own, when you need to collect specific input from the user, as in registration forms, fields for...

textareainput field for multi-line text

What it is: The <textarea> tag is an HTML element creating a multi-line text input control within a form.
What it's for: It lets users enter large amounts of free text — comments, messages, descriptions, or any other content needing more room than a...
When to use it: Use it when you need to collect extended text input from users, as in comment fields, feedback areas, or description fields in data-entry...

buttonclickable button

What it is: The <button> tag is an HTML element creating a clickable button, letting users submit forms or trigger JavaScript functionality.
What it's for: It creates interactive elements the user can click or tap to perform an action: submitting a form, triggering a JavaScript function, or navigating to a...
When to use it: Use it when you want to give the user a clear, interactive way to perform a specific action — "Submit", "Search", "Add to basket" — or to trigger...

selectdropdown menu

What it is: The <select> tag is an HTML element creating a dropdown menu or selection list, letting users choose one or more options from a predefined set.
What it's for: It gives users an interface for selecting one or more options from a predefined list, saving space and simplifying the choice when there are many options...
When to use it: Use it when you want to offer the user a choice among several predefined options, especially where space is limited or the number of options is large.

optionoption in a dropdown menu

What it is: The <option> tag is an HTML element defining a single option within a <select>, <optgroup> or <datalist> element.
What it's for: It creates a single selectable choice within a dropdown menu or selection list, representing a value the user can pick.
When to use it: Use it inside <select> elements to define each option available for selection.

optgroupgroup of options in a dropdown menu

What it is: The <optgroup> tag is an HTML element used inside a <select> to group related options.
What it's for: It creates a hierarchical structure within a dropdown menu, organising the options into logical categories to improve readability and navigation...
When to use it: Use it inside <select> elements when the options can be logically categorised — grouping cities by country, products by category, or...

labellabel for form elements

What it is: The <label> tag is an HTML element defining a label for an interactive form element.
What it's for: It creates an explicit association between a text label and a specific form element, improving the interface's usability and accessibility.
When to use it: Use it for every input element in a form, including text inputs, checkboxes, radio buttons, selects and textareas.

fieldsetgrouping of form elements

What it is: The <fieldset> tag is an HTML element used to group related elements within a form.
What it's for: It creates a logical grouping of form fields, giving the related form controls organisational and semantic structure.
When to use it: Use it when you have groups of inputs relating to the same subject or function within a form: personal details, delivery details, preferences...

legendtitle for a form group

What it is: The <legend> tag is an HTML element used to provide a title or a caption for the content of a <fieldset> element.
What it's for: It describes the group of form controls enclosed in a <fieldset>, providing clear context and a description for the group of related elements.
When to use it: Use it as the first child element inside a <fieldset>, to label and describe the group of form controls it contains.

datalistlist of predefined options for an input

What it is: The <datalist> tag is an HTML element providing a list of predefined options for <input> elements.
What it's for: It creates a list of suggestions or options for an input field, offering the user autocompletion or quick selection while still allowing them to...
When to use it: Use it when you want to offer suggestions or predefined options for an input field, but also want to let the user enter values not present in the...

outputthe result of a calculation or a user action

What it is: The <output> tag is an HTML element representing the result of a calculation or the outcome of a user action.
What it's for: It displays the result of an operation, typically within a form, providing a semantic container for calculated or dynamically generated values.
When to use it: Use it when you want to show the result of a calculation based on user input: a sum of values, the result of a conversion, or any output...

progressprogress bar

What it is: The <progress> tag is an HTML element visually representing the state of progress of an operation.
What it's for: It shows the user how far a task has got — uploading a file, completing a form, or any process that takes time to finish.
When to use it: Use it when you want to give the user visual feedback about an operation in progress, especially for processes that take time or have several stages.

meterscalar measurement within a known range

What it is: The <meter> tag is an HTML element representing a scalar measurement within a known range, or a fractional value.
What it's for: It displays a measurement on a scale with a defined minimum and maximum: disk usage, a test score, or any other value falling within...
When to use it: Use it when you want to visually represent a value that has a specific meaning within a known range, unlike <progress>, which indicates...

detailscontainer for expandable details

What it is: The <details> tag is an HTML element creating an interactive disclosure widget in which the user can reveal additional information or controls by expanding the content.
What it's for: It creates an expandable/collapsible container for additional content, letting users show or hide detailed information on demand.
When to use it: Use it when you want to provide additional information or detail that is not needed immediately but may be useful to some users, such as FAQs...

summaryvisible heading for details

What it is: The <summary> tag is an HTML element used as the first child of a <details> element, to provide a visible heading or label for the content...
What it's for: It specifies a title or a brief description for the content hidden inside the <details> element, acting as the interactive control for expanding or...
When to use it: Always use it as the first child element inside a <details>, to provide a clear, concise label describing the hidden or expandable content.

picturecontainer for responsive images

What it is: The <picture> tag is an HTML element holding zero or more <source> elements and one <img> element, giving you a way to specify multiple sources for...
What it's for: It offers alternative versions of an image for different scenarios: different screen resolutions, supported file formats, or art direction (adapting the...
When to use it: Use it when you want to provide responsive images that adapt to different viewing conditions, or when you want to offer more efficient image formats...

dialogdialog window / modal

What it is: The <dialog> tag represents a dialog window or an interactive panel, such as a modal or a pop-up box.
What it's for: It creates native browser modals, which handle focus and the darkened backdrop automatically when opened with the showModal() method.
When to use it: Use it for pop-ups, confirmations or modal forms, opening and closing it through JavaScript (show/showModal/close) rather than rebuilding all of that by hand.

templateHTML template that is not rendered

What it is: The <template> tag holds fragments of HTML that are not rendered when the page loads.
What it's for: It defines a piece of "template" markup to be cloned and inserted into the document through JavaScript when needed.
When to use it: Use it when you have to generate repeated elements dynamically (list rows, cards and so on) from a predefined structure.

menulist of commands

What it is: The <menu> tag represents a list of commands or items, semantically similar to an unordered list.
What it's for: It semantically groups a set of actions or tools — a toolbar of buttons, for instance.
When to use it: Use it for toolbars and lists of interactive commands; for the site's main navigation, prefer <nav> with <ul>.

iframeinline frame for external content

What it is: The <iframe> (inline frame) tag is an HTML element that lets you embed an external HTML document inside the current page.
What it's for: It embeds content from other sources — videos, maps, widgets or whole web pages — inside the current page, without redirecting the user.
When to use it: Use it when you want to integrate external content that cannot easily be replicated or embedded directly in the page, such as YouTube videos, maps from...

embedcontainer for external content or plugins

What it is: The <embed> tag is an HTML element used to embed external content or plug-in applications within a web page.
What it's for: It integrates external media, applications or other kinds of resources that need specific plugins or handlers to be displayed.
When to use it: Its use is generally discouraged in modern web applications.

objectcontainer for external objects

What it is: The <object> tag is an HTML element used to embed external objects such as images, media, applications or other HTML documents within...
What it's for: It integrates a wide range of external content, including but not limited to PDFs, SVG, Flash (now obsolete), and other kinds of file or application that can be...
When to use it: Use it when you want to embed external content that HTML5 does not handle natively, or when you need more flexibility than more...

paramparameter for objects

What it is: The <param> tag is an HTML element used to define parameters for <object> elements.
What it's for: It passes configuration parameters to objects embedded through the <object> tag, letting you customise the object's behaviour or appearance...
When to use it: Use it inside an <object> element when you need to specify settings or configuration for the embedded object, such as media files or...