Comandos HTML: guia completo para iniciantes

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">

• 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.

Conclusão

HTML é uma base de desenvolvimento web, e dominar seus comandos é essencial para criar páginas práticas e bem estruturadas. Neste artigo, exploramos desde os comandos básicos até conceitos mais avançados, com exemplos práticos para facilitar o aprendizado. Lembre-se de usar boas práticas, como tags semânticas e validação de código, para garantir que suas páginas sejam seguras e otimizadas.

Gostou do conteúdo? Confira outros artigos em nosso blog e continue aprimorando suas habilidades de desenvolvimento web!