An Introduction to HTML - Tags

Welcome to your first steps in learning HTML!

In this article, we'll focus on understanding the fundamental concept of HTML: tags.

Tags are the building blocks of HTML and are essential for creating any webpage.

What is HTML?

"HTML" stands for HyperText Markup Language.

HTML is not a programming language, as it doesn't perform any actions. Instead, it is used to structure and display content on a webpage.

Think of it like the language of a book or a document: it provides content.

What are HTML Tags?

HTML tags are the fundamental elements used to create and structure content on a webpage. They describe the content inside them and are crucial for web browsers to display the content correctly.

Every tag has an opening tag and a closing tag. The opening tag starts an element, and the closing tag ends it. Here's a simple example:

<h1>My first tag!</h1>

<h1> is the opening tag.
</h1> is the closing tag.
The text "My first tag!" is the content.

When you view this in a browser, it would look like this:

The <h1> tag is a heading tag. It's used for the main title on the page. Browsers make <h1> text bigger and bolder because it's meant to stand out as important.

But tags like <h1> do more than just change how text looks.

Why Are Tags Important?

Tags help web browsers and other tools understand the structure and importance of different parts of your webpage. For example:

Browsers: Display content in a structured way.
Screen Readers: Help visually impaired users by reading content out loud and understanding the structure.
Search Engines: Like Google and Safari, tags are used to understand the content and rank pages accordingly.

Basic Syntax of HTML Tags

You've already seen your first tag in action but let's break it down piece by piece to show how it works:

Opening Tag: Starts an element.
```
<tagname>
```
Content: The information or text inside the tags.
Closing Tag: Ends an element.
```
</tagname>
```

Here’s another example using the <p> tag, which stands for "paragraph":

<p>This is a paragraph of text in HTML.</p>

Opening Tag: <p>
Content: This is a paragraph of text in HTML.
Closing Tag: </p>

Self-Closing Tags

Some tags don't have any content and are self-closing.

These tags open and close themselves. For example, the <input> tag:

<input />

In this example, <input> is a self-closing tag. The slash / at the end means it closes itself. For simplicity, you can also write it without the slash:

<input>

Both versions are correct because <input> is always self-closing.

You don't need to memorize these facts right now, but being aware will help explain why we have some tags without content that we will explore in the next article.

Nesting Tags

Tags can be nested inside each other. When nesting tags, close the most recently opened tag first. Here’s a correct example:

<div>
  <p>Hello world</p>
</div>

<div> is opened first and closed last.
<p> is opened second and closed before the <div>.

Here’s an incorrect example:

<div>
  <p>
    Hello world
  </div>
</p>

In this case, the <div> is incorrectly closed before the <p>, which is not allowed. This would result in our content being displayed incorrectly or not at all depending on the browser.

Using Comments

HTML comments allow you to leave messages in your code.

These messages can explain what your code does, remind you of things you need to do, or temporarily disable parts of your code without deleting them. Comments are not displayed on the webpage.

Comments in HTML are written between . Anything between these tags will be treated as a comment and will not be rendered by the browser.

Here’s how you write a comment in HTML:

<!-- This is a comment -->

Anything you write inside these tags will be ignored by.

For example if you add an entire tag inside a comment tag it will be ignored:

<!-- <h1>Welcome to My Website</h1> -->

Want to practice?

If you want to test out your learning, you can play around on CodePen to see the results when you use different tags. Just type the code into the "HTML" tab and it should display in the preview window.

In the next article, we will examine many different types of tags so you can start to understand how and when to use them.