HTML5 - Como identificar um elemento
Tags: webdev, beginners, html, tutorial
Published: 2023-09-14 15:11:04


Neste artigo, vou ensinar a você como identificar uma **tag**. Isso é muito importante quando usamos **CSS** ou **JavaScript**.

## Três Formas de Identificação

Um **elemento** ou **tag (abertura)** pode ser identificado de três maneiras:

1. Usando um **ID (identificador)**;
2. Usando uma **classe**;
3. Usando o **nome da tag**;

### Usando um ID

**ID** é um **atributo** que pode ser colocado em uma tag, mas você deve usá-lo apenas para identificar **elementos únicos** e "nunca" usá-lo em um **seletor CSS**. Um **ID** é único; não há dois IDs iguais na mesma página, porque **ID** é como seu **CPF (identificador de uma pessoa brasileira)**. **ID** é muito útil quando você precisa acessar o elemento por meio do **JavaScript**.

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

### Usando uma Classe

**Classe** é um **atributo** que pode ser colocado em uma tag, e recomendamos que você use **classe** em quase todas as tags que precisarão de **estilização com CSS**. Uma **classe** é a mesma coisa que **classe** na vida real; você pertence à classe de estudantes, à classe de humanos, à classe de desenvolvedores, etc. É possível que um elemento tenha **ID** e **Classe** ao mesmo tempo. Porque cada um é para um propósito diferente.

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

### Usando um Nome de Tag

É possível acessar uma tag usando seu **nome de tag**, seja **CSS** ou **JavaScript**, mas não recomendo usar essa forma em **JS**, e recomendo usá-la em **CSS** apenas para **estilizar um elemento em geral**, nunca um elemento específico.

## Código Inicial Completo

Após este texto, abaixo, mostro a você um código inicial completo para seus códigos **HTML5**.

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- Arquivos externos (CSS, JS) e metadados -->
    </head>
    <body>
        <!-- Prefira usar classes para estilização; IDs são apenas para JS -->
        <header class="header" id="header">
            cabeçalho da página
        </header>
        <nav class="nav">
            menu
        </nav>
        <main class="content">
            <!-- Apenas um por página/documento -->
            Conteúdo principal
            <article>
                artigo interno
                <header>cabeçalho deste artigo</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- É possível ter artigos dentro de seções ou vice-versa; veja o link do Stack Overflow -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>
```

Vou explicar cada linha do código HTML fornecido:

1. `<!DOCTYPE html>`: Esta é a declaração do tipo de documento, especificando que o documento é um documento HTML5.
2. `<html>`: Esta é a tag de abertura `<html>`, indicando o início do documento HTML.
3. `<head>`: O elemento `<head>` contém metainformações sobre o documento, como links para arquivos externos (CSS e JavaScript) e metadados (como o título do documento).
4. `<!-- Arquivos externos (CSS, JS) e metadados -->`: Este é um comentário HTML, fornecendo uma observação para quem lê o código, mas não afeta a renderização da página. Sugere que a seção `<head>` é onde você normalmente inclui links para arquivos CSS e JavaScript externos e especifica metadados.
5. `<body>`: O elemento `<body>` é onde vai o conteúdo visível da página da web.
6. `<!-- Prefira usar classes para estilização; IDs são apenas para JS -->`: Outro comentário HTML, fornecendo orientações sobre o uso de classes para estilizar elementos e reservar IDs principalmente para interações com JavaScript.
7. `<header class="header" id="header">`: Esta linha define um elemento de cabeçalho (`<header>`) com tanto um atributo `class` quanto um atributo `id`. O atributo `class` é definido como "header", que pode ser usado para estilização com CSS. O atributo `id` também é definido como "header", o que identifica exclusivamente esse elemento na página.
8. `cabeçalho da página`: Dentro do elemento `<header>`, "cabeçalho da página" é o conteúdo visível que será exibido como o cabeçalho da página.
9. `<nav class="nav">`: Esta linha define um elemento de navegação (`<nav>`) com um atributo `class` definido como "nav", indicando que é um menu de navegação.
10. `menu`: Dentro do elemento `<nav>`, "menu" é o conteúdo visível do menu de navegação.
11. `<main class="content">`: Aqui, um elemento `<main>` é definido com um atributo `class` definido como "content". O elemento `<main>` geralmente contém o conteúdo principal da página da web.
12. `Conteúdo principal`: Dentro do elemento `<main>`, "Conteúdo principal" é o conteúdo visível que indica o conteúdo principal da página.
13. `<article>`: O elemento `<article>` é usado para representar uma peça de conteúdo autônoma, como uma postagem de blog, artigo ou notícia.
14. `artigo interno`: Dentro do elemento `<article>`, "artigo interno" representa o título ou cabeçalho do artigo.
15. `<header>cabeçalho deste artigo</header>`: Esta linha define outro elemento `<header>` dentro do `<article>`, contendo o cabeçalho ou título do artigo.
16. `<section id="introduction">`: Esta linha define um elemento `<section>` com um atributo `id` definido como "introduction", que pode ser usado para direcionar e estilizar esta seção especificamente.
17. `<section id="content">`: Semelhante à linha anterior, esta define outro elemento `<section>` com um atributo `id` definido como "content".
18. `<section id="summary">`: Mais um elemento `<section>` é definido com um atributo `id` definido como "summary".
19. `<!-- É possível ter artigos dentro de seções ou vice-versa; veja o link do Stack Overflow -->`: Este é outro comentário HTML, fornecendo uma observação sobre a possibilidade de ter artigos dentro de seções ou vice-versa. Ele também faz referência a um link do Stack Overflow para mais informações.
20. `</article>`: Isso marca o final do elemento `<article>`, fechando-o.
21. `<section id="comments">`: Esta linha define um elemento `<section>` com um atributo `id` definido como "comments", provavelmente indicando uma seção onde comentários ou discussões seriam inseridos.
22. `</section>`: Isso fecha o elemento `<section>` para comentários.
23. `<footer class="footer">`: Aqui, um elemento `<footer>` é definido com um atributo `class` definido como "footer", sugerindo que é a seção de rodapé da página.
24. `</footer>`: Isso fecha o elemento `<footer>`.
25. `</body>`: Isso marca o final do elemento `<body>`.
26. `</html>`: Esta é a tag de fechamento `</html>`, indicando o fim do documento HTML.

Cada linha deste código HTML contribui para a estrutura e conteúdo de uma página da web. Os comentários fornecem informações adicionais e orientações para entender o código.

## O Que Vem Pela Frente

Nos próximos artigos, você irá explorar:

- **figuras**
- **imagens**
- **listas ordenadas e não ordenadas**
- **listas de definição**
- **detalhes**
- **tabelas**

Fique ligado!