Bite 1: Everything You Need to Know About HTML Tags

What Are HTML Tags?

HTML tags are the skeleton of every webpage. They provide the hypertext structure that browsers use to organize and display content. Think of them as the “framework” behind what you see online.

Example to Visualize Tags

Here’s a simple visualization of how HTML tags work:

<tag>I am an HTML tag</tag>
  • <tag> is the opening tag.
  • I am an HTML tag is the content.
  • </tag> is the closing tag.

(Note: This is just an illustration to show how tags work—<tag> is not an actual HTML element.)

Key Types of Tags

  1. Opening and Closing Tags: Like <p> and </p>, they wrap content to define its purpose.
  2. Self-Closing Tags: Like <img />, they don’t need a closing part.

Tag Structure in a Nutshell

Every HTML tag has three parts:

  1. Opening Tag: <h1>
  2. Content: “This is a heading”
  3. Closing Tag: </h1>

Together, it looks like this:

<h1>This is a heading</h1>

Bite-Sized Examples of Common Tags

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

Use these to organize your content.

<h1>Welcome to Bite of Code</h1>

<h2>Subheading Example</h2>

2. Paragraphs (<p>)

Perfect for blocks of text.

<p>This is a fun paragraph!</p>

3. Links (<a>)

Direct users to another page.

<a href="https://bitesofcode.com">Visit Us!</a>

4. Images (<img>)

Add visuals to your page.

<img src="image.jpg" alt="Fun coding image" />

5. Lists (<ul> and <ol>)

Organize ideas or steps.

<ul>

  <li>First item</li>

  <li>Second item</li>

</ul>

See these examples in action on this CodePen!

Quick Tips for HTML Tag Success

  1. Use Semantic Tags: They make your code cleaner and better for SEO. For example, use <section>, <header> and <footer> instead of <div>.
  2. Always Close Tags: Even self-closing tags like <img />.
  3. Add Alt Text for Accessibility: Every image should have an alt attribute.

Want More?

This was just a bite-sized intro to HTML tags. Ready for the next step? Try building a mini webpage! For more coding snacks, visit Bite of Code.