Common HTML Tags: Structuring Your Content

Learn the essential building blocks for adding and structuring text on your web pages.

Content

Text goes here...

Let's learn how to structure content! We'll start with the most common tags for text.

Headings: The Page Outline

Headings are used to create a hierarchy of titles on your page. The <h1> tag is the most important, representing the main title. Tags go down to <h6> for less important subheadings. Search engines use these to understand your content's structure.

Paragraphs: The Core Content

The <p> tag is for paragraphs. It's one of the most common tags you'll use. Browsers automatically add some space (a margin) before and after each paragraph, separating blocks of text to make them readable.

Emphasis: Making Words Stand Out

To add emphasis, use <strong> for important text (usually bold) and <em> for stressed emphasis (usually italic). These tags are semantic, meaning they tell the browser about the *meaning* of the text, not just its look.

Separators: Breaks and Rules

The <br> tag creates a line break within a block of text, like in a poem or address. The <hr> tag creates a "horizontal rule," a thematic break between sections, which is displayed as a horizontal line.

Practice Zone

Interactive Test 1: Match the Tags

Drag each HTML tag to its correct description.

Arrastra en el orden correspondiente.


Arrastra las opciones:

<p>
<br>
<h1>
<strong>

Completa el código:

Main Title______
A block of text______
Important text______
A line break______
Unlock with Premium

Interactive Test 2: Build the Structure

Rellena los huecos en cada casilla.

<>My Awesome Blog Post</>
<>This is the first paragraph where I introduce my topic.</>
<p>In this second paragraph, I want to make a point that is <>very important</>.</p>
<>
Unlock with Premium

Practice Example: Code Editor

Create a short article structure. It must include a main heading (h1), a subheading (h2), a paragraph (p), and some bolded text (strong).

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<h1>The Planet Mars</h1> <h2>A World of Wonder</h2> <p>Mars is the fourth planet from the Sun and is often called the <strong>Red Planet</strong>.</p>
Unlock with Premium

Knowledge Check

Which tag should be used for the most important heading on a page?


Unlock with Premium

Tags in Action: A Blog Post

Let's see how these tags work together to structure a simple blog post. Notice the hierarchy created by the headings and the flow of the paragraphs.

The HTML Code

<h1>Exploring the Deep Sea</h1>
<h2>Creatures of the Abyss</h2>
<p>
  The deep sea is one of the most 
  mysterious places on Earth. It's
  home to creatures that are 
  <strong>truly alien</strong> to us.
</p>
<p>
  One famous example is the anglerfish,
  which uses a bioluminescent lure to
  attract prey in the total darkness.
</p>
<hr>
<p>
  <em>Author: Jane Doe</em><br>
  <em>Published: 2025</em>
</p>

How the Browser Renders It

Exploring the Deep Sea

Creatures of the Abyss

The deep sea is one of the most mysterious places on Earth. It's home to creatures that are truly alien to us.

One famous example is the anglerfish, which uses a bioluminescent lure to attract prey in the total darkness.

Author: Jane Doe
Published: 2025

Common Tags Glossary

<h1> - <h6>
Heading tags. They define a hierarchy of titles and subtitles, with <h1> being the most important and <h6> the least.
<p>
The standard tag for paragraphs of text. It creates a distinct block of content.
<strong>
Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render this as bold text.
<em>
Stands for "emphasis." It's used to stress a word or phrase. Browsers typically render this as italic text.
<br>
The "break" tag. It produces a line break in text and is useful for writing poems or addresses where the division of lines is significant.
<hr>
The "horizontal rule" tag. It represents a thematic break between paragraph-level elements, such as a change of scene in a story, and is displayed as a horizontal line.