HTML5 - Como identificar um elemento

#html #webdev #beginners #tutorial

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:

Usando um ID (identificador);
Usando uma classe;
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:

<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:

<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.

<!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:

<!DOCTYPE html>: Esta é a declaração do tipo de documento, especificando que o documento é um documento HTML5.
<html>: Esta é a tag de abertura <html>, indicando o início do documento HTML.
<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).
: 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.
<body>: O elemento <body> é onde vai o conteúdo visível da página da web.
: Outro comentário HTML, fornecendo orientações sobre o uso de classes para estilizar elementos e reservar IDs principalmente para interações com JavaScript.
<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.
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.
<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.
menu: Dentro do elemento <nav>, "menu" é o conteúdo visível do menu de navegação.
<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.
Conteúdo principal: Dentro do elemento <main>, "Conteúdo principal" é o conteúdo visível que indica o conteúdo principal da página.
<article>: O elemento <article> é usado para representar uma peça de conteúdo autônoma, como uma postagem de blog, artigo ou notícia.
artigo interno: Dentro do elemento <article>, "artigo interno" representa o título ou cabeçalho do artigo.
<header>cabeçalho deste artigo</header>: Esta linha define outro elemento <header> dentro do <article>, contendo o cabeçalho ou título do artigo.
<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.
<section id="content">: Semelhante à linha anterior, esta define outro elemento <section> com um atributo id definido como "content".
<section id="summary">: Mais um elemento <section> é definido com um atributo id definido como "summary".
: 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.
</article>: Isso marca o final do elemento <article>, fechando-o.
<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.
</section>: Isso fecha o elemento <section> para comentários.
<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.
</footer>: Isso fecha o elemento <footer>.
</body>: Isso marca o final do elemento <body>.
</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!

DEV Community