HTML Tag and Element

HTML Tags and Elements

HTML elements are the basic building blocks of an HTML document. An element is defined by a start tag, some content, and an end tag. Some elements are self-closing (e.g. <br>, <img>).

1. Heading Tags

There are six levels of headings from <h1> to <h6>. 

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

2. Paragraph Tag

The <p> tag is used for paragraphs. 

<p>Your text here</p>

3. Span Tag

The <span> tag is an inline container, useful for styling part of text. Example: Hello World! 

<span style="color:blue;">Hello World!</span>

Difference between <p> and <span>

<span> Tag <p> Tag
Defines a small inline section Defines a paragraph block
No line breaks Adds line breaks before and after
Used for inline styling Used for larger text blocks

4. List Tags

Lists help structure information:

  • Ordered List (<ol>) → numbered items
  • Unordered List (<ul>) → bulleted items
  • Definition List (<dl>) → terms & definitions 
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
</dl>

5. Comments

Comments are ignored by browsers. 

<!-- This is a comment -->

6–14. Text Formatting Tags

  • <b> → Bold text
  • <i> → Italic text
  • <u> → Underline text
  • <s> or <strike> → Strikethrough
  • <sup> → Superscript (e.g. 22)
  • <sub> → Subscript (e.g. H2O)
  • <small> → Smaller text
  • <big> → Bigger text
  • <mark> → Highlighted text

Example Output

This is heading1

This is heading2

This is a paragraph

This is span
  • List item
  • List item
  1. List A
  2. List B

This is bold, italic, underlined, and strikethrough.

22 = 4; H2O

Small text | Big text | Highlighted