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 atributoclassquanto um atributoid. O atributoclassé definido como "header", que pode ser usado para estilização com CSS. O atributoidtambé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 atributoclassdefinido 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 atributoclassdefinido 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 atributoiddefinido 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 atributoiddefinido como "content". -
<section id="summary">: Mais um elemento<section>é definido com um atributoiddefinido 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 atributoiddefinido 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 atributoclassdefinido 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)