HTML de apresentação foca na aparência e estilo do conteúdo. Nos primeiros dias do HTML, os desenvolvedores usavam elementos como os elementos center, big e font. Mas no desenvolvimento web moderno você não deve usar esses tipos de elementos por causa de suas limitações e impacto negativo na acessibilidade e manutenção. Muitos elementos HTML de apresentação estão obsoletos, o que significa que eles estão desatualizados e não são mais recomendados. Existem maneiras melhores de obter os mesmos resultados. No entanto, é útil saber que eles existem, então vamos dar uma olhada em alguns exemplos. O elemento font é um elemento obsoleto usado para definir o tamanho e a cor da fonte do texto. Aqui está um exemplo de um elemento font. Ative o editor interativo e altere o tamanho de 5 para 7 para ver o aumento da fonte.

<font size="5" color="blue">This text is blue and large.</font>

Este exemplo define a cor do texto para blue e o tamanho para um valor de 5. O intervalo para o atributo size é de 1 a 7, sendo 1 o menor e 7 o maior. O valor padrão é 3 se você não definir o valor explicitamente. Embora este elemento ainda funcione, você não deve usá-lo porque o tamanho e a cor da fonte devem sempre ser definidos em CSS, não em HTML. O elemento center é outro elemento obsoleto que é usado para centralizar o conteúdo horizontalmente dentro do seu contêiner. Aqui está um exemplo do elemento center que contém texto e um elemento de parágrafo. Ative o editor interativo e adicione as tags center ao redor de <p>Another example text.</p> para vê-lo centralizado na página.

<center>
  This text is centered.
  <p>HTML is awesome.</p>
</center>

<p>Another example text.</p>

E a seguir, temos o elemento big. Este é outro elemento HTML de apresentação obsoleto que torna o texto incluído um nível maior do que o texto ao seu redor. Here we have an example that defines a paragraph with two parts. Ative o editor interativo e adicione tags big ao redor do Some other text e veja as mudanças na janela de visualização.

<p>
  This text has a normal font size.
  <big>This text is larger.</big>
  Some other text.
</p>

Lembre-se de que o tamanho da fonte deve sempre ser definido com CSS, então você não deve usar este elemento em HTML moderno. Estes foram exemplos de elementos HTML de apresentação. Mas todos eles estão obsoletos e não são mais recomendados. Então, o que você deve usar em vez disso? Vamos ver. HTML semântico é agora a prática recomendada. Ele descreve o conteúdo dos elementos, então é muito mais fácil de ler, entender e manter. Motores de busca podem entender facilmente seu site quando você usa HTML semântico. Também é útil para fins de acessibilidade, porque leitores de tela precisam de informações semânticas para descrever o que está na página da web. Exemplos de elementos HTML semânticos incluem:

• O elemento header para definir o cabeçalho do documento ou seção.
• O elemento de seção de navegação, nav, para seções com links de navegação.
• O elemento section para agrupar informações relacionadas.
• O elemento figure para ilustrações e diagramas.

Este é um exemplo de um elemento header que contém um elemento de seção de navegação. Ative o editor interativo e adicione um <a href="#">Products</a> dentro do nav e veja as alterações na janela de visualização.

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <!--Add the products link here-->

    <a href="#">Contact</a>
  </nav>
</header>

Os elementos semânticos mostram claramente seu propósito dentro da estrutura HTML. Existem muitos elementos HTML semânticos diferentes. Você definitivamente encontrará um que atenda às necessidades do seu projeto. Ótimo trabalho. Agora você sabe a diferença entre HTML apresentacional e semântico: o HTML semântico descreve o conteúdo, enquanto o HTML apresentacional foca na aparência.