HTML5 - How to identify an element
Tags: webdev, beginners, html
Published: 2023-09-14 15:10:23


In this article, I'll teach you how to identify a **tag**. It's very important when we use **CSS** or **JavaScript**.

## Three Forms of Identification

An **element** or **tag (opening)** can be identified in three ways:

1. Using an **ID (identifier)**;
2. Using a **class**;
3. Using the **tag name**;

### Using an ID

**ID** is an **attribute** that can be put in a tag, but you must use it just to identify **unique elements** and "never" use it in **CSS selector**. An **ID** is unique; there is not a two equals ID in the same page, because **ID** is like your **CPF (a Brazilian person identifier)**. **ID** is very useful when you need to access the element by **JavaScript**.

Example:
```html
<main id="content">
...
</main>
```

### Using a Class

**Class** is an **attribute** that can be put in a tag, and we encourage you to use **class** in almost tags that will need **styling with CSS**. A **class** is the same thing that **class** in real life; you belong to student class, human class, developer class, etc. It's possible an element has **ID** and **Class** at the same time. Because each one is for a different purpose.

Example:
```html
<main class="content">
...
</main>
```

### Using a Tag Name

It's possible to access a tag using your **tag name**, whether **CSS** or **JavaScript**, but I don't recommend using this form in **JS**, and I recommend using it in **CSS** just to **style an element in general**, never a specified element.

## Complete Initial Code

After this text, below, I show you a complete initial code for your **HTML5** codes.

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- External files (CSS, JS) and metadata -->
    </head>
    <body>
        <!-- Prefer class than ID if you use it in CSS; ID is only for JS -->
        <header class="header" id="header">
            page header
        </header>
        <nav class="nav">
            menu
        </nav>
        <main class="content">
            <!-- Only one per page/document -->
            Main content
            <article>
                internal article
                <header>header of this article</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- It's possible there are articles inside sections or vice-versa; see stackoverflow link -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>
```

I'll explain each line of the provided HTML code:

1. `<!DOCTYPE html>`: This is the document type declaration, specifying that the document is an HTML5 document.
2. `<html>`: This is the opening `<html>` tag, indicating the start of the HTML document.
3. `<head>`: The `<head>` element contains meta-information about the document, such as links to external files (CSS and JavaScript) and metadata (like the document's title).
4. `<!-- External files (CSS, JS) and metadata -->`: This is an HTML comment, providing a note to anyone reading the code but doesn't affect the rendering of the page. It suggests that the `<head>` section is typically where you include links to external CSS and JavaScript files and specify metadata.
5. `<body>`: The `<body>` element is where the visible content of the web page goes.
6. `<!-- Prefer using classes for styling; IDs are primarily for JavaScript -->`: Another HTML comment, giving guidance on using classes for styling elements and reserving IDs primarily for JavaScript interactions.
7. `<header class="header" id="header">`: This line defines a header element (`<header>`) with both a `class` and an `id` attribute. The `class` attribute is set to "header," which can be used for styling with CSS. The `id` attribute is also set to "header," which uniquely identifies this element on the page.
8. `Page header`: Within the `<header>` element, "Page header" is the visible content that will be displayed as the header of the page.
9. `<nav class="nav">`: This line defines a navigation element (`<nav>`) with a `class` attribute set to "nav," indicating it's a navigation menu.
10. `Menu`: Inside the `<nav>` element, "Menu" is the visible content for the navigation menu.
11. `<main class="content">`: Here, a `<main>` element is defined with a `class` attribute set to "content." The `<main>` element typically contains the main content of the web page.
12. `Main content`: Within the `<main>` element, "Main content" is the visible content indicating the primary content of the page.
13. `<article>`: The `<article>` element is used to represent a self-contained piece of content, such as a blog post, article, or news story.
14. `Internal article`: Within the `<article>` element, "Internal article" represents the title or heading of the article.
15. `<header>Header of this article</header>`: This line defines another `<header>` element within the `<article>`, containing the header or title of the article.
16. `<section id="introduction">`: This line defines a `<section>` element with an `id` attribute set to "introduction," which can be used to target and style this section specifically.
17. `<section id="content">`: Similar to the previous line, this one defines another `<section>` element with an `id` attribute set to "content."
18. `<section id="summary">`: Yet another `<section>` element is defined with an `id` attribute set to "summary."
19. `<!-- It's possible to have articles inside sections or vice-versa; see the stackoverflow link -->`: This is another HTML comment, providing a note about the possibility of nesting articles inside sections or vice versa. It also references a Stack Overflow link for further information.
20. `</article>`: This marks the end of the `<article>` element, closing it.
21. `<section id="comments">`: This line defines a `<section>` element with an `id` attribute set to "comments," likely indicating a section where comments or discussions would go.
22. `</section>`: This closes the `<section>` element for comments.
23. `<footer class="footer">`: Here, a `<footer>` element is defined with a `class` attribute set to "footer," suggesting it's the footer section of the page.
24. `</footer>`: This closes the `<footer>` element.
25. `</body>`: This marks the end of the `<body>` element.
26. `</html>`: This is the closing `</html>` tag, indicating the end of the HTML document.

Each line in this HTML code contributes to the structure and content of a web page. The comments provide additional information and guidance for understanding the code.

## What Lies Ahead

In upcoming articles, you will delve into:

- **figures**
- **images**
- **ordered and unordered lists**
- **definition lists**
- **details**
- **tables**

Stay tuned!