Text elements form the core of most HTML documents. This guide covers headings, paragraphs, and various text formatting elements that help structure and style your content.
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings create a hierarchical structure for your content.
<h1> per page, usually for the main title/topic<h2> to <h4> without an <h3> in between)The <p> element represents a paragraph of text. Browsers automatically add space before and after paragraphs.
This is a paragraph of text. Paragraphs are block-level elements, which means they create a new block of content.
This is another paragraph. Notice how browsers automatically add spacing between paragraphs.
Extra spaces and line breaks in HTML are collapsed to a single space.
To force a line break, use the <br> tag.
This text appears on a new line.
<br> sparingly and only when a line break is part of the content (like in addresses or poetry). Don't use it for creating space between elements - use CSS margins instead.
These elements add semantic meaning to the text they enclose:
Indicates strong importance, seriousness, or urgency.
Indicates emphasis or stress.
Represents text marked or highlighted for reference.
Represents text that has been deleted.
Represents text that has been inserted.
Represents subscript text (appearing below the baseline).
Represents superscript text (appearing above the baseline).
Represents an abbreviation or acronym with optional title attribute.
These elements are primarily for styling purposes, without specific semantic meaning:
Represents text stylistically bold without added importance.
Represents text stylistically italic without emphasis.
Represents text with non-semantic underline (use with caution as it can be confused with links).
Represents smaller text like side-comments and fine print.
<strong>, <em>) rather than purely stylistic ones (<b>, <i>). This improves accessibility and conveys meaning to screen readers.
This is a blockquote. It represents a section that is quoted from another source.
According to the MDN documentation, The HTML <q> element indicates that the enclosed text is a short inline quotation.
The Great Gatsby was written by F. Scott Fitzgerald.
| Element | Description | Use Case |
|---|---|---|
<blockquote> |
Block-level quotation | Longer quotes that deserve their own block |
<q> |
Inline quotation | Short quotes within a paragraph |
<cite> |
Citation or reference | Titles of works (books, movies, etc.) |
The getElementsByTagName() method returns a collection of elements.
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
| Element | Description | Use Case |
|---|---|---|
<code> |
Represents computer code | Variable names, function names, etc. |
<pre> |
Preformatted text | Code blocks or any text where spacing is important |
<kbd> |
Keyboard input | Represent keyboard keys or input (e.g., Ctrl+S) |
<samp> |
Sample output | Represent output from a program |
<var> |
Variable | Represent variables in math or programming |
This is a paragraph with some red text inside it.
The <span> element is an inline generic container with no inherent meaning. It's primarily used to apply styles or scripting to a specific portion of text.
This is a paragraph inside a div.
The <div> element is a block-level generic container with no inherent meaning. It's primarily used for styling or to group elements together.
<article>, <section>, <header>, etc.) instead of generic <div> elements. Reserve <div> and <span> for when no other semantic element is appropriate.
The event starts at .
The concert takes place on .
The store opens at and closes at .
The <time> element represents a specific time or date. The datetime attribute provides the time/date in a machine-readable format.
datetime attribute should be in a valid format:
The <ruby> element represents small annotations that are rendered above, below, or beside base text, usually used for East Asian typography. The <rt> element specifies the ruby text component.
This text contains
a line break.
Text above the horizontal rule.
Text below the horizontal rule.
The <hr> element represents a thematic break between paragraph-level elements. It's displayed as a horizontal line.
<h1> to <h6>) with logical nesting<strong> and <em> for emphasis rather than <b> and <i> when appropriate<p> tags for paragraphs, not just for spacing<blockquote> and <cite> when quoting external sourceslang attribute when language changes within a documenttime element with the datetime attribute for dates and times