Understanding HTML Tags and Elements

Welcome to the world of web development! If you have ever looked at a website and wondered, "How did they build that?", you are about to take the very first step towards understanding the answer.

Building a website starts with HTML. It might look like complicated code at first glance, but it’s actually quite logical once you know the basics.

In this post, we are going to break down the building blocks of HTML: tags and elements. By the end of this article, you will be able to look at simple HTML code and understand exactly what it’s telling the browser to do.

Let’s dive in!

What HTML is and why we use it

HTML stands for Hypertext Markup Language. That sounds technical, but let's simplify it using an analogy.

Imagine building a house. Before you pick out paint colors or install light fixtures, you need the frame—the foundation, the wooden studs, the walls, and the roof.

In web development:

• HTML is the frame of the house. It provides the structure and skeleton of your webpage. It tells the web browser, "This goes here, and that goes there."

• (CSS would be the paint and decorations, and JavaScript would be the electricity and plumbing—but we will worry about those later!)

We use HTML to give meaning to plain text. Without HTML, a browser just sees a giant wall of text. HTML allows us to tell the browser, "This line is a main heading," "This block is a paragraph," and "This text should be a clickable link."

What an HTML tag is

If HTML is a language, "tags" are the words it uses to speak to the browser.

An HTML tag is a special instruction wrapped in angle brackets: < and >. These brackets tell the browser, "Hey, pay attention! This isn't normal text to show on the screen; this is a command."

For example, if you want to tell the browser that a piece of text is a paragraph, you use the paragraph tag, which looks like this: <p>.

Opening tag, closing tag, and content

Most things you create in HTML follow a specific three-part structure like a sandwich.

1. The Opening Tag: This marks the beginning of an element. It tells the browser where a specific behavior starts. (e.g., <p>)

2. The Content: This is the actual information—text, images, or other data—that sits between the tags. This is what the user actually sees on the webpage.

3. The Closing Tag: This marks the end of the element. It looks exactly like the opening tag, but it has a forward slash (/) before the tag name. (e.g., </p>)

Let's put it together to create a paragraph saying "Hello World":

<p>Hello World</p>

• <p> tells the browser: "Start a paragraph here."

• Hello World is the text shown on the screen.

• </p> tells the browser: "End the paragraph here."

What an HTML element means

You will often hear the words "tag" and "element" used interchangeably, but there is a slight difference.

• A tag is just the part in the brackets (like <p> or </p>).

• An element is the entire package.

An HTML element includes the opening tag, the content inside, and the closing tag.

Using our previous example:

• <p> is a tag.

• </p> is a tag.

• <p>Hello World</p> is the complete paragraph element.

Self-closing elements

Remember how I said most HTML elements use the three-part sandwich structure? Well, there are a few exceptions to the rule.

Some HTML elements don't hold any content inside them. Because they don't hold content, they don't need a closing tag to tell the browser where the content ends. These are called self-closing elements (or sometimes "empty elements").

Here are two very common examples:

1. The Line Break: <br> This tag just tells the browser to drop down to the next line. It doesn't contain text; it just performs an action. You don't need a </br>.

2. The Image: <img> The image tag doesn't hold text inside it. Instead, it uses special attributes (which we will learn later) to point to an image file stored somewhere else. Since it doesn't "wrap around" content, it closes itself.

Block vs inline elements

When you put elements on a page, they generally behave in one of two ways: they either act like blocks or they act inline.

1. Block Elements Think of block elements like cardboard boxes that stack on top of each other.

• They always start on a new line.

• They take up the full width available to them (stretching all the way from left to right across the page).

Examples of block elements: Headings (<h1>) and Paragraphs (<p>). If you type two paragraphs, the second one automatically drops below the first one.

2. Inline Elements Think of inline elements like individual words in a sentence.

• They do not start on a new line. They sit right next to each other on the same line until they run out of space.

• They only take up as much width as necessary.

Example of inline elements: The bold tag (<b>) or a link tag (<a>). If you want to make one word in the middle of a sentence bold, you don't want that word to jump down to a new line; you want it to stay "in line" with the rest of the sentence.

Commonly used HTML tags

To wrap up, here is a "cheat sheet" of the most essential tags you will use when starting out.

• <h1> to <h6> (Headings): <h1> is the main, biggest heading on a page. <h2> is slightly smaller, all the way down to <h6>.

• <p> (Paragraph): Used for standard blocks of text.

• <a> (Anchor/Link): This creates a hyperlink to another webpage.

• <img> (Image): Used to display pictures. (Remember, this is a self-closing tag!)

• <ul> (Unordered List): Creates a bulleted list.

• <ol> (Ordered List): Creates a numbered list (1, 2, 3...).

• <li> (List Item): Each individual item inside a <ul> or <ol> list needs its own <li> tag.

• <b> (Bold) and <i> (Italic): Used to style text used within other elements to add emphasis.

Conclusion

Congratulations! You now understand the fundamental concepts of HTML tags and elements. It might seem like a lot of new terminology, but the best way to learn is by doing. Try opening a text editor (like VS Code or Sublime Text or TextEdit), typing some of these tags, saving the file as .html, and opening it in your web browser to see what happens!