HTML Featured

HTML Basic Tags

To build a webpage, you use HTML tags as building blocks. Most tags have an opening tag <tag>, some content, and a closing tag </tag>, though some “self-closing” tags stand alone.

Here are the most essential HTML tags categorized by their function.

1. Text Content Tags

These tags are used to define the hierarchy and flow of your text.
  • Headings (<h1> to <h6>): Used for titles and subtitles.<h1> is the most important (main title), and <h6> is the least.
  • Paragraph (<p>): Used for blocks of plain text.
  • Line Break (<br>): A self-closing tag used to start a new line within a paragraph.
  • Horizontal Rule (<hr>): Creates a horizontal line to visually separate sections. 
				
					<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Lorem Ipsum is a dummy text.</p>

<br>

<hr>

2. Formatting Tags

Used to change the visual or semantic meaning of specific words.
  • <strong> or <b>: Makes text bold. Use <strong> for importance and <b> for visual style.
  • <em> or <i>: Makes text italic. Use <em> for emphasized stress and <i> for technical terms or thoughts.
  • <u>: Makes text underlined.
  • <mark>: Highlights text (usually with a yellow background).
  • <small>: Makes the text size smaller, often used for side comments or legal text. 
				
					<strong>Bold Text</strong>
<b>Bold Text</b>

<em>Italic Text</em>
<i>Italic Text</i>

<u>Underlined Text</u>

<mark>Mark Text</mark>

<small>Small Text</small>

3. Lists

Lists help organize data into digestible points.
  • Unordered List<ul>: Creates a bulleted list.
  • Ordered List<ol>: Creates a numbered list (1, 2, 3...)
  • List Item<li>: The actual item inside the list. 
				
					<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ol>

4. Links and Media

This is how you make your website interactive and visual.

  • Anchor <a>: Creates a hyperlink.
  • Image<img>: Embeds an image. This is a self-closing tag.
  • Button<button>: Creates a clickable button. 
				
					<a href="#0">Read More</a>

<img loading="lazy" decoding="async" src="logo.png" width="80" height="80">

<button>Click Here</button>

5. Container Tags

These are used to group other elements together for styling or layout purposes.
  • <div>: A block-level container. It always starts on a new line and takes up the full width available.
  • <span>: An inline container. It is used to wrap small chunks of text or elements inside a line without breaking the flow. 
				
					<div></div>
<div></div>

<span></span><span></span>

Quick Summary Table

TagNameTypeDescription
<a>AnchorInlineCreates a hyperlink to another page.
<img> ImageEmptyDisplays an image (requires src attribute).
<ul> Unordered ListBlockStarts a list with bullet points.
<div> DivisionBlockA generic container for layout.
<h1> Heading 1BlockThe main heading of a page.
Prev
Next