HTML for Web Development

0% completed

Previous
Next
HTML Tags

In this lesson, you'll learn about HTML tags, the fundamental building blocks of any HTML document. Understanding how to use tags correctly is essential for creating well-structured and functional web pages.

What Are HTML Tags?

HTML tags are the keywords enclosed within angle brackets (< >) that define the structure and content of an HTML document. They tell the browser how to display the content on the web page.

Most HTML tags come in pairs: an opening tag and a closing tag. Some tags are self-closing and do not require a closing tag.

Basic Syntax of HTML Tags

Image

  1. Opening Tag: Marks the beginning of an element.

    <tagname>

  2. Closing Tag: Marks the end of an element. It includes a forward slash (/) before the tag name.

    </tagname>

  3. Self-Closing Tag: Some tags do not require a closing tag and are self-contained.

    <tagname />

Examples of HTML Tags

Let's explore different types of HTML tags with examples.

1. Heading Tag (<h1>)

The <h1> tag defines the most important heading on your page. There are six levels of headings in HTML, from <h1> to <h6>, with <h1> being the highest level.

Syntax:

<h1>Your Heading Here</h1>

Explanation:

  • <h1>: Opening tag for the heading.
  • Your Heading Here: The text that will appear as the heading.
  • </h1>: Closing tag for the heading.

Example 1: Main Title

<h1>Welcome to TechGrind.io</h1>

Example 2: Section Title

<h1>Our Services</h1>

2. Line Break Tag (<br>)

The <br> tag inserts a single line break. It is a self-closing tag and does not require a closing tag.

Syntax:

<br />

Explanation:

  • <br />: Inserts a line break, moving the following content to the next line.

Example 1: Breaking Lines in an Address

<h1>Our Office</h1>
<p>123 Design Street<br />
Cityville, Country</p>

Example 2: Formatting a Poem

<h1>Happy Birthday!</h1>
<p>
  Wishing you a day filled with joy,<br />
  Laughter, and all your favorite things.<br />
  Enjoy your special day!
</p>

Final Example: Using Multiple Tags Together

Let's combine the <h1>, <a>, and <br> tags in a single HTML document to see how they work together.

HTML
. . . .

Explanation of the Final Example:

  • Main Heading: Uses the <h1> tag to display the main title "Welcome to TechGrind.io".
  • Line Break: The <br /> tag adds space below the heading.
  • Poem Formatting: Here, we are doing poem formatting with a line break.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next