Logo
TUTORIAL

HTML Tags & Elements: The Deep Dive

In HTML, every tag has a specific 'Role'. HTML isn't just about displaying text; it's about helping the browser understand exactly 'what' that text represents.

1. Text Formatting Tags

These tags are used to make text bold, italic, or underlined. They don't just provide styling; they also indicate the importance of the content.

  • <strong>: Makes text Bold (Used for important content).
  • <em>: Makes text Italic (Used for emphasis).
  • <mark>: Used to Highlight text.
  • <del>: For Strike-through text (Representing deleted content).
<p>This is very <strong>important</strong>.</p>
<p>The <mark>Offer</mark> is live today!</p>

2. Semantic Tags (Meaningful Structure)

In modern HTML5, using <div> for everything is not ideal. To help browsers and Google understand your website structure, 'Semantic Tags' are essential.

  • <header>: The top part of the website.
  • <nav>: Container for navigation links.
  • <main>: The unique main content of the page.
  • <footer>: The bottom section of the page (Copyright info).
  • <section>: A specific group of content.

3. Links & Attributes

Attributes provide 'Extra Information' to tags, such as where a link leads or how large an image should be.

<!-- target="_blank" opens the link in a new tab -->
<a href="https://craby-lab.vercel.app" target="_blank">Go to Home</a>

<!-- title attribute provides info on hover -->
<p title="I am a tooltip">Hover over me!</p>

4. Block vs Inline Tags

There are two primary types of tags in HTML:

Block Level: These tags start on a new line and take up the full width available. (e.g., <div>, <h1>, <p>)

Inline: These tags only take up as much space as necessary. (e.g., <span>, <a>, <img>)

5. The Metadata Tag (<meta>)

These tags aren't visible on the website but are crucial for Google Search (SEO). They are written inside the <head> tag.

<meta name="description" content="Learning HTML tags">
<meta charset="UTF-8">
Quick Note: There are over 100 tags in HTML, but only about 20-30 are used in daily work. Master those, and you can build professional websites!

IDE Settings

X