2

HTML Elements and Tags

Learn how to use HTML elements to structure your web content

Previous Lesson Next Lesson

Understanding HTML Elements

HTML elements are the building blocks of web pages. Each element defines a specific part of your content and tells the browser how to display it.

Key Insight: HTML elements consist of a start tag, content, and an end tag. Some elements are self-closing and don't require an end tag.

Element Structure

<tagname>Content goes here...</tagname>
Examples:
  • <h1>Main Heading</h1> - Creates a top-level heading
  • <p>This is a paragraph.</p> - Creates a paragraph
  • <br> - Creates a line break (self-closing)

Basic HTML Elements

Here are the essential HTML elements every web developer should know:

Element Description Example
<html> Root element of an HTML page <html>...</html>
<head> Container for metadata and page information <head>...</head>
<title> Defines the title of the document <title>My Page</title>
<body> Contains the visible page content <body>...</body>
<h1> to <h6> HTML headings <h1>Heading 1</h1>
<p> Defines a paragraph <p>Paragraph text</p>
<b> Bold text <b>Bold text</b>
<i> Italic text <i>Italic text</i>
<u> Underlined text <u>Underlined text</u>
<br> Line break Line one<br>Line two

Practical Examples

Let's explore some practical examples of using HTML elements to create web content.

Example 2.1: Basic HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph.</p>
    <p>This is another paragraph with <b>bold text</b> and <i>italic text</i>.</p>
    <p>Here's a line break:<br>This text is on a new line.</p>
</body>
</html>

Result:

Welcome to My Website

This is my first paragraph.

This is another paragraph with bold text and italic text.

Here's a line break:
This text is on a new line.

Example 2.2: Combining Elements

HTML elements can be nested inside each other to create complex structures.

<h1><i>Italic Heading</i></h1>
<h3><u>Underlined Heading</u></h3>
<p>
    <b><i>Bold and italic text</i></b><br>
    <b><i><u>Bold, italic and underlined text</u></i></b>
</p>

Result:

Italic Heading

Underlined Heading

Bold and italic text
Bold, italic and underlined text

Interactive Element Explorer

Experiment with different HTML elements to see how they work:

HTML Code

Result

Hello, World!

Try modifying this text with different HTML elements.

Here are some ideas:

  • Add bold text
  • Create italic text
  • Insert a line
    break
  • Try different heading sizes

    to

Important: Always remember to close your HTML tags properly. Unclosed tags can cause unexpected layout issues.

Self-Closing Elements

Some HTML elements don't have content or a closing tag. These are called self-closing or void elements.

Element Description Usage
<br> Line break First line<br>Second line
<hr> Thematic break (horizontal rule) Section 1<hr>Section 2
<img> Embed an image <img src="image.jpg" alt="Description">
<input> Input field <input type="text">
<meta> Metadata <meta charset="UTF-8">

Example 2.3: Using Self-Closing Elements

<h2>Document Sections</h2>
<p>This is the first section of content.</p>
<hr>
<p>This is the second section after a horizontal rule.</p>
<p>Line one<br>Line two<br>Line three</p>

Result:

Document Sections

This is the first section of content.

This is the second section after a horizontal rule.

Line one
Line two
Line three

Learning Resources

Continue your HTML journey with these recommended resources:

HTML Reference

Complete guide to all HTML elements and attributes

View Reference

HTML Examples

Practical code samples for common tasks

Explore Examples

Video Tutorials

Step-by-step video guides for beginners

Watch Videos

FAQ Section

Answers to common HTML questions

Read FAQ
Previous Lesson Next Lesson: More HTML Elements