Basic HTML Tags: The Building Blocks of Web Pages

Discover the fundamental commands that structure every webpage. Learn to use headings, paragraphs, and emphasis tags to build your first page.

🧱

Welcome! Let's discover HTML tags, the fundamental building blocks of every website.

/* Tags are instructions for the browser */

The Anatomy of an HTML Tag

Most HTML tags come in pairs: an opening tag (like <p>) and a closing tag (like </p>). The content you want to display goes in between. This entire structure is called an HTML element.

Headings: Structuring Your Content

Headings structure your page content. Use <h1> for the main title, <h2> for main sections, <h3> for subsections, and so on down to <h6>. This creates a logical hierarchy for readers and search engines.

Paragraphs: The Workhorse of Text

The <p> tag is for paragraphs of text. Whenever you want to start a new block of text, you wrap it in <p>...</p> tags. Browsers automatically add a little space between paragraphs.

Emphasis: Making Text Stand Out

To give text semantic importance, use <strong> for strong importance (usually bold) and <em> for emphasis (usually italic). These are better for SEO than older tags like <b> and <i>.

Practice Zone

Interactive Test 1: Structure a Document

Drag the elements to create a simple, structured document.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<h1>My Title</h1>

<p>First paragraph.</p>

<p>Second paragraph.</p>

Completa el código:

Start of Document______End of Document

Unlock with Premium

Interactive Test 2: Complete the Tags

Rellena los huecos en cada casilla.

<>Important Title</>
<>
  This paragraph contains text with  importance.
</>

Unlock with Premium

Practice Example: Code Editor

Create a document with a main heading (h1), a subheading (h2), and a paragraph (p).

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

<h1>Main Title</h1>
<h2>Subheading</h2>
<p>This is a paragraph under the subheading.</p>

Unlock with Premium

Knowledge Check

Which tag represents the most important heading on a page?

Unlock with Premium

Writing HTML with Meaning

Good HTML isn't just about what you see. It's about using the right tag for the right job. This is called "semantic HTML," and it's crucial for accessibility and SEO.

1. The Importance of Hierarchy

Search engines and screen readers use heading tags (<h1>, <h2>, etc.) to understand the structure of your content. Always use them in logical order, with only one <h1> per page.


<h1>Page Title</h1>
<h2>Section 1</h2>
  <h3>Subsection 1.1</h3>
<h2>Section 2</h2>

2. Emphasis vs. Visual Style

While <b> makes text bold and <i> makes it italic, they carry no special meaning. Use <strong> to indicate that text is important and <em> to add emphasis. The visual result is often the same, but the semantic meaning is much richer.

<p>This is <strong>very important</strong>.</p>
<p>I <em>really</em> mean it.</p>

Practical Takeaway: Think about the *meaning* of your content, not just its appearance. Choosing the right semantic tag makes your website better for everyone.

Basic Tags Glossary

<h1> - <h6>: Heading tags. They define a hierarchy of titles and subtitles on a page, with <h1> being the most important.
<p>: The standard tag for creating a paragraph of text.
<strong>: Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render this as bold text.
<em>: Marks text that has stress emphasis. Browsers typically render this as italic text.
<br>: A line break. This is an "empty" tag, meaning it doesn't have a closing tag. Use it to create a break within a block of text, like in a poem or address.
<hr>: Represents a thematic break between paragraph-level elements. It's often displayed as a horizontal line. This is also an empty tag.