logo

Common HTML Container Elements

Container elements are those that enclose some content between a start tag and an end tag. Let’s look at the most used ones:

1. Paragraphs (<p>)

  • Used to define a paragraph of text.
  • Browser automatically adds space before and after each paragraph.

Example:

<p>This is my first paragraph.</p>
<p>This is another paragraph.</p>

2. Headings (<h1> to <h6>)

  • Define headings/titles in HTML.
  • <h1> is the largest (main heading), <h6> is the smallest.

Example:

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>

👉 Search engines (like Google) use heading tags to understand page structure.

3. Division (<div>)

  • <div> is a block-level container.
  • Used to group elements together for styling or layout.

Example:

<div style="background-color: lightblue;">
  <h2>This is inside a division</h2>
  <p>Paragraph grouped inside a div.</p>
</div>

4. Span (<span>)

  • <span> is an inline container.
  • Used for styling a part of text.

Example:

<p>This is <span style="color: red;">red text</span> inside a paragraph.</p>

5. Center (<center>) ❌ (Deprecated in HTML5)

  • Used to center-align text or elements.
  • Replaced by CSS (text-align: center;).

Example:

<center><h2>This text is centered</h2></center>

6. Comment Tag (<!-- -->)

  • Used to write notes inside the code.
  • Comments are not displayed in the browser.

Example:

<!-- This is a comment -->
<p>This is visible text.</p>

7. Italics (<i>)

  • Used to make text italic.
  • Mostly for styling (alternative: <em> for emphasis).

Example:

<p>This is <i>italic text</i>.</p>

8. Underline (<u>)

  • Used to underline text.
  • Rarely used today (CSS preferred).

Example:

<p>This is <u>underlined text</u>.</p>

9. SUB (<sub>)

  • Displays text as subscript (below the baseline).

Example:

<p>Water formula: H<sub>2</sub>O</p>

👉 Output: H₂O

10. SUP (<sup>)

  • Displays text as superscript (above the baseline).

Example:

<p>Square: a<sup>2</sup> + b<sup>2</sup></p>

👉 Output: a² + b²

11. PRE (<pre>)

  • Stands for Preformatted Text.
  • Preserves spaces, tabs, and line breaks exactly as typed.

Example:

<pre>
Hello Students,
    This text keeps spaces and
line breaks as written.
</pre>

12. FONT (<font>) and Its Attributes ❌ (Deprecated in HTML5)

  • Used to set font size, color, and face.
  • Replaced by CSS.

Example:

<font color="red" size="5" face="Arial"> This is red, big, Arial text. </font>

Attributes of <font>:

  • color → text color
  • size → size of text (1 to 7)
  • face → font style (e.g., Arial, Verdana)

13. BASEFONT (<basefont>) ❌ (Deprecated in HTML5)

  • Used to set the default font size, face, and color for the whole page.
  • All text will follow this style unless overridden.

Example:

<basefont color="blue" size="4" face="Times New Roman">
  <p>This paragraph is in blue with Times New Roman.</p>
</basefont>

✅ Quick Recap for Exams:

  • <p> → Paragraph
  • <h1> to <h6> → Headings
  • <div> → Block container
  • <span> → Inline container
  • <center> → Centers content (deprecated)
  • <!-- --> → Comments
  • <i>, <u> → Italics, Underline
  • <sub>, <sup> → Subscript, Superscript
  • <pre> → Preformatted text
  • <font>, <basefont> → Styling text (deprecated, replaced by CSS)

Perfect 👍 A comparison table is the best way to quickly revise before exams. Here’s a clean table for you:

Quick Revision Table

TagPurposeExampleStatus
<p>Defines a paragraph of text<p>Hello World</p>✅ Active
<h1>–<h6>Defines headings (h1 largest, h6 smallest)<h1>Main Heading</h1>✅ Active
<div>Block-level container for grouping<div>Content here</div>✅ Active
<span>Inline container for styling text<span style="color:red">Red Text</span>✅ Active
<center>Centers text/content<center>Centered Text</center>❌ Deprecated
<!-- -->Inserts comments (not visible)<!-- This is a note -->✅ Active
<i>Italic text<i>Italic</i>✅ Active (use <em> for emphasis)
<u>Underlined text<u>Underlined</u>✅ Active (CSS preferred)
<sub>Subscript (below baseline)H<sub>2</sub>O → H₂O✅ Active
<sup>Superscript (above baseline)a<sup>2</sup> → a²✅ Active
<pre>Preformatted text (keeps spaces/lines)<pre> Hello World </pre>✅ Active
<font>Changes font size, face, color<font color="red" size="5">Text</font>❌ Deprecated
<basefont>Sets default font for page<basefont size="4" color="blue">❌ Deprecated

✅ Tips for Exams:

  • Always mention that deprecated tags (<font>, <basefont>, <center>) are replaced by CSS in modern HTML.
  • Container elements have opening and closing tags (except empty ones like <br>).
  • Be ready with one example for each.

Back to Topics

Take the test