O que é HTML e Quais São as Principais Tags?

imagem de linguagem ícone de html
	HTML (HyperText Markup Language) é a linguagem fundamental para construir páginas na web. Ela usa tags para estruturar o conteúdo, como textos, links, imagens e muito mais. No HTML, cada tag tem uma função específica, e é através delas que a página ganha forma e estrutura.
		
	Aqui está um exemplo simples de código HTML para ilustrar algumas das tags mais comuns e como elas são usadas:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de HTML</title>
</head>

<body>
    <h1>Bem-vindo ao meu site!</h1>
    <p>Este é um parágrafo de exemplo. Aqui você pode escrever o conteúdo da sua página.</p>

    <h2>Links e Imagens</h2>
    <a href="https://portfolio-karina-barros-projects.vercel.app/blog">Clique aqui para visitar o site</a>
    <img src="https://portfolio-karina-barros-projects.vercel.app/blog/html.png" alt="Imagem de exemplo">

    <h2>Listas</h2>
    <ul>
        <li>Primeiro item</li>
        <li>Segundo item</li>
    </ul>

    <h2>Formulário</h2>
    <form action="/submit">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome">
        <input type="submit" value="Enviar">
    </form>

    <h2>Comentários e Tabelas</h2>
    <p>O código abaixo é um exemplo de tabela e comentário em HTML:</p>
    <!-- Este é um comentário, que não aparece na página -->
    <table>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
        <tr>
            <td>João</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>30</td>
        </tr>
    </table>

    <h2>Estrutura com div</h2>
    <div class="container">
        <h3>Conteúdo Organizado</h3>
        <p>Usamos a tag div para agrupar conteúdo e organizar melhor a página.</p>
    </div>

    <h2>Elementos de Formatação</h2>
    <p>Você pode usar tags como <strong>strong para destacar textos em negrito</strong> e <em>em para deixar o texto em
            itálico.</em></p>
</body>

</html>
	Copie esse código e cole em um editor de texto simples, como o Bloco de Notas, ou em um editor de código como o VS Code. Salve o arquivo com a extensão .html (por exemplo, index.html) e depois clique duas vezes no arquivo para abri-lo no navegador. Assim, você verá como as tags HTML estruturam o conteúdo da página.

Principais Tags do HTML

	<html>: Essa tag é a base do seu documento HTML. Tudo o que está dentro dela será considerado parte da sua página.
		
	<head>: Aqui ficam as informações sobre a página, como o título (que aparece na aba do navegador) e as configurações iniciais, como o conjunto de caracteres e o ajuste para dispositivos móveis.
		
	<body>: Tudo o que aparece na página web (texto, imagens, links) fica dentro da tag <body>. É onde você coloca o conteúdo que será visualizado pelos visitantes.
		
	<h1>, <h2>, <h3>, etc.: Essas são as tags de título. O <h1> é o título principal, e as outras são usadas para subtítulos e divisões do conteúdo.
		
	<p>: Essa tag é usada para parágrafos de texto. Tudo o que você escrever entre <p> e </p> será considerado um parágrafo.
		
	<a>: É a tag usada para criar links. Através do atributo href, você define o destino do link, seja outro site ou uma seção da própria página.
		
	<img>: Usada para exibir imagens. O atributo src indica o caminho do arquivo da imagem, e o alt descreve a imagem para acessibilidade.
		
	<ul>, <ol>, <li>: Essas tags são usadas para listas. O <ul> cria uma lista não ordenada (com marcadores), e o <ol> cria uma lista numerada. Cada item da lista fica dentro de <li>.
		
	<form>: Os formulários são criados com essa tag. Dentro de um formulário, você pode incluir campos de texto, botões de envio e outros elementos para interagir com o usuário.
		
	<label>: A tag <label> serve para definir rótulos em campos de formulários, como caixas de texto e botões.
		
	<input>: Usada para criar campos de entrada, como caixas de texto, botões de envio e até campos de senha.
		
	<table>, <tr>, <th>, <td>: Essas tags são usadas para criar tabelas. O <table> cria a estrutura da tabela, o <tr> cria as linhas, o <th> define as células de cabeçalho e o <td> define as células com os dados.
		
	<!-- -->: Essa é a tag de comentário. Tudo o que você escrever entre <!-- e --> será ignorado pelo navegador, mas pode ser útil para deixar notas ou explicações no código.
		
	<div>: A tag <div> é um contêiner, ou seja, ela é usada para agrupar outros elementos e ajudar a organizar a estrutura da página. É muito útil para dividir a página em seções e aplicar estilos.
		
	<strong> e <em>: Essas tags são usadas para destacar o texto. O <strong> coloca o texto em negrito para dar mais ênfase, e o <em> coloca o texto em itálico, geralmente para dar ênfase de forma mais sutil.

Conclusão

	Essas são apenas algumas das tags mais utilizadas no HTML, mas o HTML é muito mais amplo, permitindo criar páginas com conteúdo rico e interativo. À medida que você aprende mais sobre HTML, pode começar a adicionar mais complexidade e interatividade à sua página, integrando CSS e JavaScript para personalizar ainda mais o visual e o comportamento da sua página.



Data: 05/02/2025

Autor: Karina Ariane de Barros



Deixe seu comentário