review-semantic-html
Voltar à Trilha

Revisão de HTML Semântico

Importância do HTML Semântico

  • Hierarquia estrutural para elementos de título: É importante usar o elemento de título correto para manter a hierarquia estrutural do conteúdo. O elemento h1 é o nível mais alto de título e o elemento h6 é o nível mais baixo de título.
  • Elementos HTML de apresentação: Elementos que definem a aparência do conteúdo. Ex. os elementos obsoletos center, big e font.
  • Elementos HTML semânticos: Elementos que possuem significado e estrutura. Ex. header, nav, figure.

Elementos HTML Semânticos

  • Elemento header: usado para definir o cabeçalho de um documento ou seção.
<header>
    <h1>CatPhotoApp</h1>
    <p>Welcome to our cat gallery.</p>
  </header>
  • Elemento principal: usado para conter o conteúdo principal da página web.
<main>
    <section>
      <h2>Cat Photos</h2>
      <p>Browse adorable cat pictures.</p>
    </section>
  </main>
  • Elemento section: usado para dividir o conteúdo em seções menores.
<section>
    <h2>About Me</h2>
    <p>Hi, I am Jane Doe and I am a web developer.</p>
  </section>
  • Elemento de seção de navegação (nav): representa uma seção com links de navegação.
<nav>
    <ul>
      <li><a href="#photos">Photos</a></li>
      <li><a href="#videos">Videos</a></li>
    </ul>
  </nav>
  • Elemento figure: usado para conter ilustrações e diagramas.
<figure>
    <img
      src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/cats.jpg"
      alt="Two tabby kittens sleeping together on a couch."
    />
    <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
  </figure>
  • Elemento de ênfase (em): marca texto que tem ênfase de estresse.
<p>
    Never give up on <em>your</em> dreams.
  </p>
  • Elemento de texto idiomático (i): usado para destacar voz ou modo alternativo, termos idiomáticos de outra língua, termos técnicos e pensamentos.
<p>
    There is a certain <i lang="fr">je ne sais quoi</i> in the air.
  </p>
O atributo lang dentro da tag aberta i é usado para especificar o idioma do conteúdo. Neste caso, a língua seria French. O elemento i não indica se o texto é importante ou não, ele apenas mostra que é de alguma forma diferente do texto ao redor.
  • Elemento de Importância Forte (strong): marca texto que tem forte importância.
<p>
    <strong>Warning:</strong> This product may cause allergic reactions.
  </p>
  • Dar atenção ao elemento (b): usado para chamar atenção para texto que não é importante para o significado do conteúdo. É comumente usado para destacar palavras-chave em resumos ou nomes de produtos em avaliações.
<p>
    We tested several products, including the <b>SuperSound 3000</b> for audio quality, the <b>QuickCharge Pro</b> for fast charging, and the <b>Ecoclean Vacuum</b> for cleaning. The first two performed well, but the <b>Ecoclean Vacuum</b> did not meet expectations.
  </p>
  • Elemento Description List (dl): usado para representar uma lista de agrupamentos termo-descrição.
  • Elemento Description Term (dt): usado para representar o termo que está sendo definido.
  • Elemento Description Details (dd): usado para representar a descrição do termo.
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
  </dl>
  • Elemento de Citação em Bloco (blockquote): usado para representar uma seção que é citada de outra fonte. Este elemento possui um atributo cite. O valor do atributo cite é a URL da fonte.
<blockquote cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
    "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
  </blockquote>
  • Elemento de citação (cite): usado para atribuir visualmente a fonte do trabalho referenciado. Marca o título da referência.
<div>
    <blockquote cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
      "Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
    </blockquote>
    <p>
      -Quincy Larson, <cite>How to learn to Code and Get a Developer Job [Full Book].</cite>
    </p>
  </div>
  • Elemento de Citação Inline (q): usado para representar uma citação curta inline.
<p>
    As Quincy Larson said,
    <q cite="https://www.G.E.A.R ACADEMY.org/news/learn-to-code-book/">
      Momentum is everything.
    </q>
  </p>
  • Elemento de abreviação (abbr): usado para representar uma abreviação ou acrônimo. Para ajudar os usuários a entenderem o que é a abreviação ou acrônimo, você pode mostrar sua forma completa, uma descrição legível, com o atributo title.
<p>
    <abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.
  </p>
  • Elemento Contact Address (address): usado para representar as informações de contato.
  • Elemento (Date) Time (time): usado para representar uma data e/ou hora. O atributo datetime é usado para traduzir datas e horas para um formato legível por máquina.
<p>
    The reservations are for the <time datetime="20:00">20:00 </time>
  </p>
  • Atributo de data ISO 8601 (datetime): usado para representar datas e horários em um formato legível por máquina. O formato padrão é YYYY-MM-DDThh:mm:ss, com o T maiúsculo sendo um separador entre a data e a hora.
  • Elemento sobrescrito (sup): usado para representar texto sobrescrito. Casos comuns de uso do elemento sup incluem expoentes, letras superiores e números ordinais.
<p>
    2<sup>2</sup> (2 squared) is 4.
  </p>
  • Elemento de subscrito (sub): usado para representar texto em subscrito. Casos comuns de uso do elemento de subscrito incluem fórmulas químicas, notas de rodapé e subscritos de variáveis.
<p>
    CO<sub>2</sub>
  </p>
  • Elemento de Código Inline (code): usado para representar um fragmento de código de computador.
  • Elemento de Texto Pré-formatado (pre): representa texto pré-formatado
<pre>
    <code>
      body {
        color: red;
      }
    </code>
  </pre>
  • Elemento de Anotação Não Articulada (u): usado para representar um trecho de texto inline que deve ser exibido de uma forma que indique que possui uma anotação não textual.
<p>
    You can use the unarticulated annotation element to highlight
    <u>inccccort</u> <u>spling</u> <u>issses</u>.
  </p>
  • Elemento Ruby Annotation (ruby): usado para anotar texto com pronúncia ou explicações de significado. Um exemplo de uso é para tipografia do Leste Asiático.
  • Elemento de parênteses de fallback Ruby (rp): usado como fallback para navegadores que não suportam a exibição de anotações ruby.
  • Elemento de texto Ruby (rt): usado para indicar texto para a anotação ruby. Normalmente usado para pronúncia ou detalhes de tradução na tipografia do Leste Asiático.
<ruby>
    明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
  </ruby>
  • Elemento de tachado (s): usado para representar conteúdo que não é mais preciso ou relevante.
<p>
    <s>Tomorrow's hike will be meeting at noon.</s>
  </p>
  <p>
    Due to unforeseen weather conditions, the hike has been canceled.
  </p>
  • Links internos: usados para vincular a outra seção da página usando href="#id" em um elemento a e atribuindo ao elemento de destino o mesmo id. Isso é comumente usado para links de pular, sumário ou páginas longas com múltiplas seções.
<a href="#about-section">Go to About Section</a>

<section id="about-section">
  <h2>About</h2>
  <p>This is the about section of the page.</p>
</section>