Quer entender como diferentes técnicas de renderização afetam sua página? Veja nosso guia completo sobre renderização Web: Diferenças entre CSR, SPA, SSR, SSG e ISR.

2. Tags para formatação de texto

• <strong>e <em>: negrito e itálico, com significado semântico (destaque e ênfase).
• <mark>: destaca texto com marcação.
• <blockquote>: citação longa.

Exemplo:

<p>O <strong>HTML</strong> é <em>indispensável</em> para a web.</p>

<blockquote>"A simplicidade é a chave para a excelência."</blockquote>

3. Links e navegação

• <a>: cria links para páginas internas e externas.
• <nav>: define menus de navegação.

Exemplo:

<nav>

    <a href="index.html">Início</a> | 

    <a href="sobre.html">Sobre</a> |

    <a href="contato.html">Contato</a>

</nav>

4. Formulários e entradas de dados

Os formulários são essenciais para interagir com os usuários.

Exemplo:

<form action="/enviar" method="POST">

    <label for="nome">Nome:</label>

    <input type="text" id="nome" name="nome">

    <button type="submit">Enviar</button>

</form>

5. Mídia: imagens, vídeos e áudio

Incorpore conteúdos visuais e interativos com facilidade:

• Imagem:

<img src="imagem.jpg" alt="Descrição da imagem">

Adicione a seguinte linha ao seu script:

• <img src="imagefile.jpg" alt="Image" height="42" width="42">
• src é o caminho do arquivo da imagem.
• alt é a tag que você dá à imagem.

• Vídeo:

<video controls>

    <source src="video.mp4" type="video/mp4">

</video>

• Áudio:

<audio controls>

    <source src="audio.mp3" type="audio/mpeg">

    Seu navegador não suporta o elemento de áudio.

</audio>

6. Tabelas

As tabelas organizam dados de forma tabular. São úteis para relatórios e comparações:

<table border="1">

    <tr>

        <th>Produto</th>

        <th>Preço</th>

        <th>Quantidade</th>

    </tr>

    <tr>

        <td>Notebook</td>

        <td>R$ 3.500</td>

        <td>2</td>

    </tr>

    <tr>

        <td>Mouse</td>

        <td>R$ 50</td>

        <td>5</td>

    </tr>

</table>

Dicas para trabalhar com HTML

1. Valide seu código: Garanta que seu HTML esteja correto usando ferramentas como o Validador W3C.
2. Integre HTML com outras linguagens: Use JavaScript e CSS para dar mais vida ao seu projeto.
3. Considere acessibilidade e SEO: Faça uso de tags semânticas e atribua textos alternativos às imagens.
4. Entenda os atributos HTML: ferramentas poderosas que otimizam a experiência do usuário.

E se quiser expandir seu conhecimento, leia o artigo sobre Node.js para explorar o desenvolvimento de back-end.