Tags that interact with text
The <p> Tag
The <p> tag defines a paragraph of text in HTML:
Code Block Loading...
Block-level element: The <p> tag is a block element, meaning it starts on a new line and takes up the full width available.
Content rules:
- You can include any inline elements inside a paragraph, such as
<span>,<a>, or<strong>. - You cannot place block elements (like
<div>or another<p>) inside a paragraph. - Nesting one
<p>tag inside another is invalid HTML.
Default styling:
- Browsers typically apply vertical margins to paragraphs—usually around
16pxon the top and bottom in Chrome. - This spacing visually separates consecutive paragraphs, mimicking the appearance of printed text.
The <span> Tag
The <span> tag is an inline element used to mark up a portion of text within a paragraph or other inline context. It’s especially useful when you want to apply specific styles or behaviors to part of the content using CSS or JavaScript.
Example:
Code Block Loading...
- The
<span>itself doesn’t add any visual change by default. - It acts as a hook for styling or scripting—ideal for highlighting, coloring, or targeting specific text segments.
- Since it's inline, it flows naturally within the surrounding text and can be nested inside block elements like
<p>,<div>, or<li>.
The <br> Tag
The <br> tag represents a line break in HTML. It’s an inline element and does not require a closing tag.
Usage:
Code Block Loading...
- It’s used to break a line within a block of text—typically inside a
<p>tag—without starting a new paragraph. - Unlike creating a new paragraph with
<p>, a<br>does not add extra spacing above or below the line. - This makes it useful for formatting content like addresses, poems, or short multi-line messages where spacing should remain tight.
HTML Heading Tags
HTML provides six levels of heading tags, ranked from most important to least:
<h1>– Main page title<h2>– Section headings<h3>to<h6>– Subsections and nested headings
Example hierarchy:
Code Block Loading...
- Semantic importance:
- Use one
<h1>per page to represent the main topic. - Use
<h2>and lower levels to organize content into meaningful sections. - Proper heading structure improves SEO and helps search engines understand your content hierarchy.
- Use one
- Default styling:
- Browsers render headings with decreasing font sizes as the heading level increases.
- For example,
<h1>is larger than<h2>, which is larger than<h3>, and so on.
- Block-level behavior:
- All heading tags are block elements.
- They cannot contain other HTML elements—only plain or inline text.
The <strong> Tag
The <strong> tag is used to indicate that the enclosed text carries strong importance or emphasis.
Example:
Code Block Loading...
Semantic meaning:
- The
<strong>tag conveys that the content is significant—not just visually bold, but contextually important. - Screen readers and other assistive technologies may emphasize it differently depending on the medium.
Default styling:
- Most browsers render
<strong>text in bold by default. - This visual cue helps highlight key phrases, but the tag’s true value lies in its semantic role.
- Use
<strong>when the meaning matters. - Use
<b>when you just want bold styling without implying importance.
The <em> Tag
The <em> tag is used to indicate emphasis in a sentence. Like <strong>, it provides semantic meaning, not just visual styling.
Example:
Code Block Loading...
Semantic emphasis:
- The
<em>tag signals that the enclosed text should be read with emphasis. - Assistive technologies like screen readers may vocalize it with a different tone or stress.
Default styling:
- Most browsers render emphasized text in italic by default.
- However, the actual appearance can be customized with CSS.
- Use
<em>when the meaning matters. - Use
<i>when you just want italic styling without implying importance.
Quotes in HTML
HTML provides two tags for quoting text:
1. <blockquote> – Block-Level Quotes
The <blockquote> tag is used to insert long-form quotations or citations that typically span multiple lines.
Code Block Loading...
It’s a block-level element, meaning it starts on a new line and is visually separated from surrounding content.
Browsers apply default styling:
- In Chrome, it has
40pxleft and right margins, and10pxtop and bottom. - This indentation visually distinguishes the quoted section.
2. <q> – Inline Quotes
The <q> tag is used for short, inline quotations within a sentence.
Code Block Loading...
It’s an inline element, so it flows naturally within the text.
Browsers typically render it with quotation marks around the content.
The <hr> Tag
The <hr> tag stands for horizontal rule and is used to insert a horizontal line across the page.
Example:
Code Block Loading...
- It’s a thematic break, often used to visually separate sections of content.
- It’s not based on text content—it’s a standalone element.
- It behaves as a block-level element and does not require a closing tag.
- Browsers render it as a horizontal line by default, but you can style it with CSS to control its width, thickness, color, and spacing.
Code Blocks in HTML
To display code snippets in HTML, you typically use the <code> tag. This tag is designed to represent inline code fragments and is rendered by browsers using a monospaced font.
Default browser styling (e.g., Chrome):
Code Block Loading...
However, the <code> tag alone does not preserve whitespace or line breaks, which are often essential for readable code formatting.
Using <pre> with <code>
To maintain formatting, the <code> tag is usually wrapped inside a <pre> tag:
Code Block Loading...
<pre>is a block-level element.- It preserves whitespace, tabs, and line breaks exactly as written.
- Chrome’s default styling for
<pre>:
Code Block Loading...
This combination ensures that code appears clean, readable, and properly spaced—ideal for tutorials, documentation, or developer tools.
Lists in HTML
HTML supports three types of lists, each serving a different purpose:
1. Unordered Lists (<ul>)
Used when the order of items doesn’t matter. Each item is marked with a bullet by default.
Code Block Loading...
- Each item is wrapped in an
<li>(list item) tag. - Browsers render these with bullet points.
2. Ordered Lists (<ol>)
Used when the sequence of items is important. Items are numbered automatically.
Code Block Loading...
- Like unordered lists, each item uses the
<li>tag. - Browsers display numbers before each item.
3. Definition Lists (<dl>)
Used to define terms and their descriptions. Less common, but useful for glossaries or key-value pairs.
Code Block Loading...
<dt>defines the term.<dd>provides the description.- Browsers typically render them with indentation, but no bullets or numbers.
While unordered and ordered lists are widely used, definition lists are more niche—but they can be handy for structured data or semantic markup.
Other Text-Level Tags in HTML
HTML includes several tags that serve presentational or semantic purposes for inline text formatting. Here are some commonly used ones:
<mark>– Highlights text (usually with a yellow background)<ins>– Indicates inserted text (often underlined)<del>– Represents deleted text (usually shown with a strikethrough)<sup>– Superscript (e.g., exponents like x²)<sub>– Subscript (e.g., chemical formulas like H₂O)<small>– Renders text in a smaller font size<i>– Italic text (purely visual)<b>– Bold text (purely visual)
Visual Defaults
Browsers apply default styles to these tags. For example:
Code Block Loading...
Semantic vs Visual Tags
You might wonder how <b> differs from <strong>, or <i> from <em>:
<b>and<i>are visual-only: they tell the browser to make text bold or italic without conveying any meaning.<strong>and<em>are semantic: they indicate importance or emphasis, which can be interpreted by assistive technologies like screen readers.
By default, browsers render <strong> like <b>, and <em> like <i>, but you can customize their appearance with CSS.
These are just a few of the many inline tags available in HTML. While some are less commonly used, they can be helpful for adding clarity, structure, or emphasis to your content.