O que é o HTML e suas tags? Parte 1: estrutura básica

O que é o HTML e suas tags? Parte 1: estrutura básica
Beatriz Moura
Beatriz Moura

Compartilhe

Autores: Beatriz Moura e Mateus Henrique

Você já pensou em como uma página web é feita nos detalhes? O primeiro ponto importante para isso, é compreender como funciona a sua estrutura e como criar os elementos que a compõem.

Esse artigo compõe uma série de cinco artigos sobre o que é HTML e suas tags:

  1. O que é o HTML e suas tags: estrutura básica
  2. O que é o HTML e suas tags: elementos inline
  3. O que é o HTML e suas tags: elementos block-level
  4. O que é o HTML e suas tags: elementos de um formulário
  5. O que é o HTML e suas tags: atributos dos elementos

O que é HTML e suas tags?

O HTML existe desde 1991 e atualmente está na versão 5, que veio recheada de recursos e funcionalidades que trazem melhorias para o desenvolvimento web, sua responsabilidade principal é demarcar a estrutura de uma página da web. Essa estrutura do HTML é formada por um conjunto de elementos, ou seja, os hipertextos, que se conectam entre si formando a página. Os elementos HTML ou também chamados de tags HTML, são utilizados para informar ao navegador que tipo de estrutura é essa que está sendo construída, podendo ser títulos, parágrafos, imagens, links, entre outros.

Dessa forma, para que um documento seja interpretado pelo navegador, é necessário que o arquivo tenha a extensão .html e a partir disso, poderá ser exibido por qualquer navegador web.

As tags são formadas por uma estrutura própria, iniciam com o sinal “menor que”, em seguida vem o nome daquele elemento e por fim, o sinal “maior que”. Podem ser dispostas em tags que precisam de fechamento e tags que fecham sozinhas (self-closing). O fechamento de uma tag será definido com uma barra (/), sendo que no caso das tags de auto fechamento, não há necessidade da presença desse caractere.

 <!--Tag que precisa de fechamento-->
    <h1>Olá Mundo!</h1>
    <!--Tag de auto fechamento-->
    <img loading="lazy" src="banner.jpg">

Tipos de tag

As tags podem ser categorizadas inicialmente em dois tipos, em “nível de bloco” (block-level) e “em linha” (inline). Um elemento em nível de bloco ocupa toda a largura de seu elemento pai, que também chamamos de elemento container, criando assim um “bloco”. Já os elementos inline, geralmente usamos para demarcação de conteúdos de texto.

De um lado há duas frases, uma abaixo da outra, ambas escritas “Olá Mundo!”, a frase da primeira linha ocupa 100% da largura disponível e a segunda linha ocupa a largura apenas do seu conteúdo de texto. Do outro lado, há linhas de código html, a tag p encapsulando o primeiro olá mundo, representando o elemento de nível de bloco e em seguida a tag a encapsulando o segundo olá mundo representado o elemento inline.

Estrutura básica

O VS Code utiliza por padrão o Emmet Abbreviations, que traz o aparecimento automático de linhas de código que fazem parte da estrutura básica do HTML ao digitar o ponto de exclamação. Dessa forma:

!

Resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Banner da Escola de Front-End: Matricula-se na escola de Front-End. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

<!DOCTYPE html>

Informa ao navegador que esse documento é do tipo HTML e sua versão. Quando está escrito apenas html, indica que é a mais recente...

<html>

Representa a raiz do documento, serve com um container que engloba todos os outros elementos HTML.

<body>

É onde fica todo o conteúdo de texto, imagem e vídeos, em que o usuário vê e interage, nele os conteúdos são estruturados pelas demais tags do HTML.

<script>

Esse elemento contém instruções de script ou aponta para um arquivo de script externo por meio do atributo src.

<head>

Compreende as informações do documento que serão interpretadas pelo navegador (metadados). Como por exemplo, título do documento, links para folhas de estilo etc.

<meta>

Define metadados, ou seja, informações sobre dados de um documento HTML. As <meta> tags vão dentro do elemento <head> e são usadas para especificar o conjunto de caracteres, o autor do documento, as configurações da janela de visualização etc.

<link>

É uma tag vazia, que contém apenas atributos e faz a relação do documento HTML com recursos externos, é comumente usado para vincular uma folha de estilo externa, também é usada para definir o favicon da página (ícone da aba do navegador), como outros recursos.

<style>

Essa tag é usada para declarar estilos (CSS) para um documento.

Tags semânticas

Tags semânticas são tags que possuem um significado, que dão sentido a informação de texto ao navegador e buscadores, como por exemplo, utilizar a tag <header> para cabeçalhos ou <article> para dar um significado de artigo para aquele bloco de texto, até mesmo <p> para indicar que aquele texto é um parágrafo, é uma boa prática tentar sempre utilizar essas tags semânticas para ajudar no entendimento do código, além de ajudar muito no SEO do site (Otimização para motores de busca, é o que ajuda o seu site a se rankear melhor nos motores de buscas como o Google). Segue abaixo a lista de tags semânticas citadas durante o artigo:

  • <header>
  • <main>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <nav>
  • <ol>
  • <ul>
  • <li>

Exemplo de estruturação com tags semânticas:

A imagem mostra os principais elementos container semânticos presentes dentro de uma página web. Elemento nav está no topo da página ocupando a largura de 100% da página. Abaixo do nav e à esquerda, há o elemento header e abaixo dele, há dois elemento sections que juntos ocupam toda a largura do header. Abaixo do nav e à direita, há o elemento aside, mais estreito e com uma extensão de altura que vai do início do header até o final dos sections. Após todos esses elementos, encontra-se o footer, que assim como o nav, ocupa 100% da largura da página.

Tags sem semântica

As tags que não possuem semântica não definem um significado para aquele texto, normalmente são utilizadas apenas para fins de separação e estilização. Veja logo abaixo a lista de algumas tags sem semântica:

  • <div>
  • <span>
  • <b>
  • <i>

Comentários

Comentários no HTML ou em qualquer outra linguagem são notas que podem ser incluídas no código fonte para descrever o que se quiser. Assim, não modificam o programa executado e servem somente para ajudar a pessoa que está desenvolvendo a melhor organizar os seus códigos. Para comentar algum código no HTML você deve envolvê-lo entre <!-- Seu código aqui –>. Por exemplo:

<!-- 

<div>
    <p>Esse código será ignorado pelo navegador</p>
</div>

–>

Continua…

Nesse artigo vimos que o HTML é a principal linguagem de marcação da Web e também a tecnologia mais básica do desenvolvimento front-end, ou seja, o pontapé inicial para criação de estruturas de sites e aplicações web.

E agora que conhecemos um pouco mais sobre a estrutura básica, vamos juntos aprofundar cada vez mais! Abaixo, clique para acessar a continuação da série sobre o HTML e suas tags.

Beatriz Moura
Beatriz Moura

Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação!Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design.Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico.Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.

Veja outros artigos sobre Front-end