HTML Elements List

To provide the most exhaustive and granular list possible, we must categorize all 142+ HTML elements by their default CSS display property as defined by the browser's User Agent Stylesheet.

While HTML5 technically classifies elements by "Content Models" (Flow, Phrasing, etc.), the layout still relies on the CSS Box Model.

Block-Level Elements (`display: block`)

These elements always start on a new line and consume the full width of their container. They allow for full control over width, height, padding, and margin.

Document Structure & Sectioning

<html>: The root element; defines the entire document.
<body>: Contains all visible content.
<article>: A self-contained composition (blog post, news story).
<aside>: Content tangentially related to the main text (sidebars).
<nav>: A section intended for navigation links.
<section>: A generic standalone section of a document.
<header>: Introductory content or a set of navigational links.
<footer>: Contains copyright, data, or related links.
<address>: Contact information for a person or organization.
<main>: The primary, non-repeated content of the document.
<h1> to <h6>: Section headings (Level 1 is the most important).
<hgroup>: Groups a heading with secondary content (like subheadings).

Content Grouping

<div>: The universal block container for flow content.
<p>: A paragraph of text.
<hr>: A thematic break or horizontal line.
<pre>: Blocks of preformatted text (preserves spaces/breaks).
<blockquote>: A section quoted from another source.
<ol>: An ordered (numbered) list.
<ul>: An unordered (bulleted) list.
<li>: A list item (Default display is actually list-item).
<dl>: A description list.
<dt>: A term/name in a description list.
<dd>: The description or value in a description list.
<figure>: Encapsulates media (images/videos) and their captions.
<figcaption>: The caption associated with a <figure>.

Specialized Block Containers

<form>: A section containing interactive controls for user input.
<fieldset>: A group of related controls within a form.
<details>: A disclosure widget the user can open/close.
<summary>: The visible heading for a <details> element.
<dialog>: A dialog box or other interactive component (e.g., a popup).

Inline Elements (`display: inline`)

These elements sit side-by-side with other text. They ignore width and height properties and only accept horizontal padding and margin for layout spacing.

Text Semantics & Formatting

<a>: Hyperlink to another page or location.
<span>: The universal inline container.
<strong>: Importance, seriousness, or urgency (usually bold).
<b>: Draw attention without conveying extra importance (bold).
<em>: Emphasized stress (usually italics).
<i>: Alternate voice or mood (italics).
<small>: Side-comments, legal disclaimers, or "fine print."
<mark>: Highlighted text for reference.
<del>: Text that has been deleted.
<ins>: Text that has been inserted.
<s>: Text that is no longer correct or relevant (strikethrough).
<u>: Unarticulated non-textual annotation (underline).
<dfn>: The defining instance of a term.
<abbr>: An abbreviation or acronym.
<time>: A specific period in time or a date.
<code>: A fragment of computer code.
<var>: A variable in a mathematical or programming context.
<samp>: Sample output from a computer program.
<kbd>: Represents user input (usually keyboard keys).
<sub>: Subscript text.
<sup>: Superscript text.
<q>: A short inline quotation.
<cite>: The title of a creative work (book, movie, etc.).
<data>: Links content to a machine-readable translation.
<br>: A line break.
<wbr>: A line-break opportunity (where the browser may break a long word).

Ruby Annotation (Typography)

<ruby>, <rt>, <rp>, <rtc>, <rb>: Used for showing pronunciation of East Asian characters.

Replaced Elements (Native "Inline-Block" Behavior)

Standard HTML doesn't have a default display: inline-block tag. However, Replaced Elements behave like inline-block: they stay in line with text but accept width and height.

Multimedia & Embedded Content

<img>: An image.
<video>: A video player.
<audio>: An audio player.
<canvas>: A scriptable area for drawing graphics.
<iframe>: An inline frame containing another HTML page.
<embed>: An external resource/plugin.
<object>: An external resource treated as an object.

Form Elements

<input>: Various types of user input fields.
<textarea>: A multi-line plain-text editing control.
<select>: A drop-down selection list.
<button>: A clickable button.
<progress>: A bar indicating the completion progress of a task.
<meter>: A scalar measurement within a known range (e.g., disk usage).

**Table Elements (`display: table-*`)**

These have their own unique display values that mimic the behavior of a spreadsheet.

<table>: display: table
<caption>: display: table-caption
<colgroup>, <col>: display: table-column-group / table-column
<thead>, <tbody>, <tfoot>: display: table-header/footer-group
<tr>: display: table-row
<td>, <th>: display: table-cell

Non-Rendered / Metadata Elements

These elements are either in the <head> or are functional tags that do not have a visual "box" in the layout.

Metadata: <base>, <link>, <meta>, <style>, <title>.
Scripting: <script>, <noscript>, <template>, <slot>.
Internal Support: <source>, <track>, <param>, <map>, <area>.

Summary Checklist

Block: Best for structure and layout.
Inline: Best for styling bits of text inside a block.
Inline-Block (Replaced): Best for media and interactive elements.

Code

To truly master HTML layouts, you need to understand how the CSS Display Property interacts with every tag. While there are over 100 elements, they all fall into specific "buckets" of behavior.

Here is the exhaustive, detailed breakdown of all functional HTML elements categorized by their default display behavior.

Block-Level Elements (display: block)

These elements create a "box" that spans the full width of their container. They always start on a new line.

Structural & Sectional (14 Elements)

These define the architecture of your webpage.


	
	<html>: The root of the document.
	
	
	<body>: The container for all visible content.
	
	
	<article>: A self-contained composition (e.g., a blog post).
	
	
	<aside>: Content indirectly related to the main flow (e.g., a sidebar).
	
	
	<nav>: A block containing navigation links.
	
	
	<section>: A thematic grouping of content.
	
	
	<header>: Introductory content or a group of nav links.
	
	
	<footer>: Contains metadata, copyright, or contact info.
	
	
	<address>: Contact information for the author/owner.
	
	
	<main>: The unique, primary content of the document.
	
	
	<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Six levels of hierarchy for titles.
	


Content Grouping (16 Elements)

These organize text and media into digestible chunks.


	
	<div>: The "blank slate" block container.
	
	
	<p>: A paragraph of text.
	
	
	<hr>: A horizontal line (thematic break).
	
	
	<pre>: Preformatted text (preserves white space).
	
	
	<blockquote>: A large section of text quoted from elsewhere.
	
	
	<ol>: An ordered (numbered) list.
	
	
	<ul>: An unordered (bulleted) list.
	
	
	<li>: A list item (default: display: list-item).
	
	
	<dl>: A description list.
	
	
	<dt>: A term in a description list.
	
	
	<dd>: The description/value in a list.
	
	
	<figure>: A block for images, charts, or code snippets.
	
	
	<figcaption>: The caption for a figure.
	
	
	<details>: A toggleable "accordion" widget.
	
	
	<summary>: The visible heading for <details>.
	
	
	<dialog>: A popup or modal window.
	


Inline Elements (display: inline)

These sit side-by-side. They cannot have a set width or height and only take up as much space as their content (text/images) requires.

Text Semantics (29 Elements)

Used to style or give meaning to specific words.


	
	<a>: Hyperlink.
	
	
	<span>: The "blank slate" inline container.
	
	
	<strong>, <b>: Bold (importance vs. style).
	
	
	<em>, <i>: Italics (emphasis vs. style).
	
	
	<small>: Fine print or side comments.
	
	
	<mark>: Highlighted text.
	
	
	<del>, <ins>: Deleted vs. inserted text.
	
	
	<s>, <u>: Strikethrough vs. underline.
	
	
	<dfn>: A term being defined.
	
	
	<abbr>: An abbreviation or acronym.
	
	
	<time>: A machine-readable date/time.
	
	
	<code>, <var>, <samp>, <kbd>: Code-related text formatting.
	
	
	<sub>, <sup>: Subscript and superscript.
	
	
	<q>, <cite>: Inline quotes and titles of works.
	
	
	<data>: Links content to a machine-readable value.
	
	
	<br>: A line break.
	
	
	<wbr>: A potential line break point.
	
	
	<ruby>, <rt>, <rp>, <rtc>, <rb>: Typography for East Asian characters.
	


Replaced Elements (Default "Inline-Block" Behavior)

Standard HTML tags don't have display: inline-block by default, but "Replaced Elements" act like it. They stay in line with text but allow you to set a width, height, margin, and padding.

Media & Interactive (18 Elements)


	
	<img>: Image.
	
	
	<video>, <audio>: Media players.
	
	
	<iframe>: A nested website window.
	
	
	<canvas>: A drawing area for JavaScript.
	
	
	<svg>: Scalable Vector Graphics.
	
	
	<embed>, <object>: External plugins/resources.
	
	
	<input>: Form inputs (text, checkbox, radio).
	
	
	<textarea>: Multi-line text box.
	
	
	<select>: Dropdown menu.
	
	
	<button>: Clickable button.
	
	
	<progress>, <meter>: Visual status bars.
	
	
	<output>: Result of a calculation.
	
	
	<label>: Label for a form input (Strictly inline, but often paired here).
	


The Table Ecosystem (display: table-*)

Tables have a unique layout system. They aren't block or inline; they are "Table" elements.


	
	<table>: display: table
	
	
	<caption>: display: table-caption
	
	
	<colgroup>, <col>: Internal column formatting.
	
	
	<thead>, <tbody>, <tfoot>: Header, body, and footer groups.
	
	
	<tr>: display: table-row
	
	
	<td>, <th>: display: table-cell (Standard data vs. Header).
	


Non-Visual / Metadata (15 Elements)

These exist in the code but have no impact on the visible layout (they have display: none or are simply data containers).


	
	Header Info: <head>, <title>, <meta>, <link>, <style>, <base>.
	
	
	Scripting: <script>, <noscript>, <template>, <slot>.
	
	
	Resource Helpers: <source>, <track>, <param>, <map>, <area>.
	


How to Override Everything

In modern development, we rarely stick to these defaults. We use CSS Flexbox to make things behave exactly how we want.

.container { display: flex;}

Applying this to a <div> (Block) makes all its children (even <span> or <a>) behave like flexible "blocks" that can sit side-by-side.

To give you the most professional start, I’ve created a CSS Reset. This is a standard industry practice where you "strip" the default browser behaviors (the block and inline rules we discussed) to ensure your website looks identical in Chrome, Safari, and Firefox.

1. The Global Reset (CSS)

This snippet levels the playing field. It forces every element to calculate width and height the same way, removing the "hidden" math that often breaks layouts.

/* The 'Box-Sizing' Reset */
*, *::before, *::after {
  box-sizing: border-box; /* Includes padding/border in width */
  margin: 0;
  padding: 0;
}

/* Force Block behavior on semantic tags for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Make images and media easier to work with */
img, svg, video, canvas {
  display: inline-block; /* Behave like Inline-Block by default */
  max-width: 100%;       /* Never overflow their container */
  height: auto;
}

/* Set a base line-height for better readability */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


2. Detailed Layout Strategies

Now that you know all the elements, here is how you control them using the three "Master Properties":

A. The Flexbox Approach

Best for 1-dimensional layouts (a row of buttons, a navigation bar, or a sidebar).


	
	The Rule: $display: flex;$
	
	
	The Result: It turns a parent (Block) into a container that controls its children. It doesn't matter if the children are <span> (Inline) or <div> (Block)—they all become "Flex Items."
	


B. The Grid Approach

Best for 2-dimensional layouts (a full page gallery or a complex dashboard).


	
	The Rule: $display: grid;$
	
	
	The Result: You can place any of the 140+ elements into specific "cells" regardless of their natural block/inline nature.
	


C. The Inline-Block Fix

Sometimes you want a <div> to sit in a line like text, but you still want to give it a specific width: 200px;.


	
	The Rule: $display: inline-block;$
	
	
	The Result: It keeps the element "in the flow" of the sentence but gives it the "physical strength" of a block.
	


3. Summary of the 140+ Elements

To keep your reference clear, remember this hierarchy:


	
		
			Default Display
			Count (Approx)
			Purpose
		
	
	
		
			Block
			~40
			Creating the "skeleton" of the page.
		
		
			Inline
			~60
			Styling text and adding small interactive bits.
		
		
			Replaced
			~20
			Embedding external files (Images, Videos, Inputs).
		
		
			Table
			~10
			Organizing complex data grids.
		
		
			Hidden
			~15
			Metadata, Scripts, and Background logic.

Chapters

HTML Elements List

Block-Level Elements (`display: block`)

Document Structure & Sectioning

Content Grouping

Specialized Block Containers

Inline Elements (`display: inline`)

Text Semantics & Formatting

Ruby Annotation (Typography)

Replaced Elements (Native "Inline-Block" Behavior)

Multimedia & Embedded Content

Form Elements

**Table Elements (`display: table-*`)**

Non-Rendered / Metadata Elements

Summary Checklist

Block-Level Elements (`display: block`)

Structural & Sectional (14 Elements)

Content Grouping (16 Elements)

Inline Elements (`display: inline`)

Text Semantics (29 Elements)

Replaced Elements (Default "Inline-Block" Behavior)

Media & Interactive (18 Elements)

**The Table Ecosystem (`display: table-*`)**

Non-Visual / Metadata (15 Elements)

How to Override Everything

1. The Global Reset (CSS)

2. Detailed Layout Strategies

A. The Flexbox Approach

B. The Grid Approach

C. The Inline-Block Fix

3. Summary of the 140+ Elements

Select Chapter

Default Display	Count (Approx)	Purpose
Block	~40	Creating the "skeleton" of the page.
Inline	~60	Styling text and adding small interactive bits.
Replaced	~20	Embedding external files (Images, Videos, Inputs).
Table	~10	Organizing complex data grids.
Hidden	~15	Metadata, Scripts, and Background logic.

Chapters

HTML Elements List

Block-Level Elements (display: block)

Document Structure & Sectioning

Content Grouping

Specialized Block Containers

Inline Elements (display: inline)

Text Semantics & Formatting

Ruby Annotation (Typography)

Replaced Elements (Native "Inline-Block" Behavior)

Multimedia & Embedded Content

Form Elements

Table Elements (display: table-*)

Non-Rendered / Metadata Elements

Summary Checklist

Block-Level Elements (display: block)

Structural & Sectional (14 Elements)

Content Grouping (16 Elements)

Inline Elements (display: inline)

Text Semantics (29 Elements)

Replaced Elements (Default "Inline-Block" Behavior)

Media & Interactive (18 Elements)

The Table Ecosystem (display: table-*)

Non-Visual / Metadata (15 Elements)

How to Override Everything

1. The Global Reset (CSS)

2. Detailed Layout Strategies

A. The Flexbox Approach

B. The Grid Approach

C. The Inline-Block Fix

3. Summary of the 140+ Elements

Select Chapter

Block-Level Elements (`display: block`)

Inline Elements (`display: inline`)

**Table Elements (`display: table-*`)**

Block-Level Elements (`display: block`)

Inline Elements (`display: inline`)

**The Table Ecosystem (`display: table-*`)**