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). -
<!-- 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. -
<body>
: O elemento<body>
é onde vai o conteúdo visível da página da web. -
<!-- 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. -
<header class="header" id="header">
: Esta linha define um elemento de cabeçalho (<header>
) com tanto um atributoclass
quanto um atributoid
. O atributoclass
é definido como "header", que pode ser usado para estilização com CSS. O atributoid
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 atributoclass
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 atributoclass
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 atributoid
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 atributoid
definido como "content". -
<section id="summary">
: Mais um elemento<section>
é definido com um atributoid
definido como "summary". -
<!-- É 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. -
</article>
: Isso marca o final do elemento<article>
, fechando-o. -
<section id="comments">
: Esta linha define um elemento<section>
com um atributoid
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 atributoclass
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!
Top comments (0)