Introdução ao HTML: A Linguagem de Marcação de Hipertexto

 

‍

Image Source: Unsplash

‍

O HTML (Linguagem de Marcação de Hipertexto) é a base da estruturação de páginas web e seu conteúdo. É uma linguagem de marcação que define a estrutura e organização do conteúdo de uma página, permitindo a formatação de texto, criação de links, inclusão de imagens e tabelas, entre outras funcionalidades.

Neste artigo, vamos explorar os conceitos básicos do HTML, entender sua anatomia e aprender como utilizar os elementos e tags para criar uma página web. Vamos mergulhar nesse universo fascinante e descobrir como o HTML é essencial para a construção de uma presença online eficaz.

O que é HTML?

O HTML não é uma linguagem de programação, mas sim uma linguagem de marcação. Sua função principal é definir a estrutura e organização do conteúdo de uma página web. Ele utiliza uma série de elementos e tags para agrupar e delimitar diferentes partes do conteúdo, atribuindo-lhes significado e permitindo que sejam exibidos ou funcionem de maneira específica.

Por exemplo, vamos considerar a seguinte linha de conteúdo:

Meu gatinho é muito mal humorado

Se quisermos que essa linha seja exibida como um parágrafo, podemos envolvê-la em uma tag de parágrafo:

<p>Meu gatinho é muito mal humorado</p>

Anatomia de um elemento HTML

Vamos explorar mais a fundo esse parágrafo para entender a estrutura de um elemento HTML. Um elemento HTML é composto por três partes principais:

1. A tag de abertura: consiste no nome do elemento, como <p>, envolvido por parênteses angulares de abertura e fechamento. Essa tag marca o início do elemento, definindo onde ele começa a ter efeito.

2. A tag de fechamento: é semelhante à tag de abertura, mas inclui uma barra antes do nome do elemento, como </p>. Essa tag marca o final do elemento, definindo onde ele termina.

3. O conteúdo: é o próprio conteúdo do elemento, que nesse caso é o texto "Meu gatinho é muito mal humorado".

Portanto, a combinação da tag de abertura, da tag de fechamento e do conteúdo forma o elemento completo.

Atributos em elementos HTML

Além das partes básicas, os elementos HTML também podem ter atributos, que fornecem informações adicionais sobre o elemento. Esses atributos são especificados dentro da tag de abertura do elemento e têm a seguinte estrutura:

<elemento atributo="valor">conteúdo</elemento>

Por exemplo, podemos adicionar um atributo class ao elemento para fornecer um identificador que pode ser usado posteriormente para aplicar estilos ou outras informações a ele:

<p class="destaque">Meu gatinho é muito mal humorado</p>

Nesse caso, "class" é o nome do atributo e "destaque" é o valor do atributo. Os atributos sempre devem seguir algumas regras:

• Deve haver um espaço entre o atributo e o nome do elemento (ou o atributo anterior, se o elemento já tiver um).
• O nome do atributo deve ser seguido por um sinal de igual.
• O valor do atributo deve ser envolvido por aspas.

É importante ressaltar que valores de atributos simples que não contêm espaços ou caracteres especiais podem ser deixados sem aspas, mas é recomendável mantê-las para garantir a consistência e compreensibilidade do código.

Aninhamento de elementos

No HTML, é possível colocar elementos dentro de outros elementos, em um processo chamado de aninhamento. Isso permite criar uma estrutura hierárquica e organizar o conteúdo de maneira mais complexa.

Por exemplo, se quisermos enfatizar a palavra "muito" na frase "Meu gatinho é muito mal humorado", podemos envolvê-la em um elemento <strong>, que indica que a palavra deve ser fortemente enfatizada:

<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>

É importante garantir que os elementos estejam devidamente aninhados. No exemplo acima, abrimos primeiro o elemento <p>, depois o elemento <strong>, e, portanto, devemos fechar primeiro o elemento <strong>, depois o elemento <p>. Caso contrário, o código estará incorreto e pode gerar resultados inesperados.

Não se esqueça de sempre abrir e fechar corretamente os elementos para garantir que eles sejam claramente visíveis e não se sobreponham uns aos outros.

Elementos vazios

Além dos elementos que possuem conteúdo, existem também os elementos vazios, que não possuem conteúdo interno. Um exemplo disso é o elemento <img>, que é utilizado para exibir imagens em uma página HTML.

Por exemplo, podemos inserir o seguinte elemento <img> em nossa página:

<img src="imagens/gatinho.jpg" alt="Meu gatinho" />

Nesse caso, o atributo src especifica o caminho para a imagem que queremos exibir, enquanto o atributo alt fornece um texto descritivo para pessoas que não podem visualizar a imagem. Esse texto também é exibido caso ocorra algum problema e a imagem não possa ser carregada.

É importante escolher um texto alternativo adequado para garantir que as informações da imagem sejam transmitidas corretamente para todos os usuários.

Anatomia de um documento HTML

Agora que entendemos os elementos individuais do HTML, vamos ver como eles se combinam para formar um documento HTML completo. A estrutura básica de um documento HTML é a seguinte:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Minha página</title>
  </head>
  <body>
    <!-- Conteúdo da página -->
  </body>
</html>

Aqui está o significado de cada parte do documento:

• <!DOCTYPE html>: é uma declaração obrigatória que define o tipo de documento como HTML5.
• <html></html>: é o elemento raiz do documento HTML, envolvendo todo o conteúdo da página.
• <head></head>: é onde são adicionadas informações sobre o documento, como a codificação de caracteres, o título da página e o CSS.
• <meta charset="utf-8" />: define a codificação de caracteres do documento como UTF-8, que é capaz de lidar com a maioria dos caracteres de diferentes idiomas.
• <title></title>: define o título da página, que é exibido na guia do navegador e nas páginas de resultados de pesquisa.
• <body></body>: contém todo o conteúdo que será exibido na página, como texto, imagens, vídeos e outros elementos.

Imagens em HTML

As imagens são elementos fundamentais em uma página web, e o HTML oferece uma maneira simples de incluí-las. Para adicionar uma imagem, utilizamos o elemento <img> juntamente com o atributo src, que especifica o caminho para o arquivo de imagem. Veja um exemplo:

<img src="imagens/gatinho.jpg" alt="Meu gatinho" />

Neste exemplo, a imagem "gatinho.jpg" será exibida na página, e o texto "Meu gatinho" será exibido caso a imagem não possa ser carregada ou para usuários com deficiência visual, que utilizam leitores de tela.

É importante selecionar um texto alternativo descritivo para garantir que todas as informações importantes da imagem sejam transmitidas aos usuários.

Marcando o texto

Uma das principais funções do HTML é permitir a marcação de texto de maneira adequada, definindo sua estrutura e dando significado a diferentes partes do conteúdo. Nesta seção, vamos explorar alguns dos elementos HTML essenciais para marcar o texto.

Cabeçalhos

Os elementos de cabeçalho permitem especificar que determinadas partes do conteúdo são títulos ou subtítulos. O HTML oferece seis níveis de cabeçalhos, indicados pelas tags <h1> a <h6>. Normalmente, usamos apenas três ou quatro níveis de cabeçalhos em uma página:

<h1>Meu título principal</h1>
<h2>Meu título de alto nível</h2>
<h3>Meu subtítulo</h3>
<h4>Meu segundo subtítulo</h4>

Os cabeçalhos ajudam a estruturar o conteúdo e fornecem uma hierarquia clara, facilitando a navegação e compreensão da página pelo usuário.

Parágrafo

O elemento <p> é usado para marcar parágrafos de texto. Ele é amplamente utilizado para organizar e estruturar o conteúdo textual de uma página:

<p>Este é um parágrafo simples</p>

Ao utilizar o elemento <p>, o texto é automaticamente formatado como um parágrafo, com espaçamento adequado entre as linhas.

Listas

As listas são elementos comuns em páginas web, e o HTML oferece tags específicas para criar listas ordenadas e não ordenadas.

As listas não ordenadas são usadas para itens em que a ordem não importa, como uma lista de compras. Elas são envolvidas pela tag <ul>, e cada item da lista é marcado com a tag <li>:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Já as listas ordenadas são usadas quando a ordem dos itens é importante, como em uma receita. Elas são envolvidas pela tag <ol>:

<ol>
  <li>Passo 1</li>
  <li>Passo 2</li>
  <li>Passo 3</li>
</ol>

Utilizando essas tags, é possível criar listas claras e bem estruturadas, facilitando a leitura e compreensão do conteúdo.

Links em HTML

Os links são um dos principais recursos da web, permitindo a navegação entre páginas e a interação com o conteúdo. Para criar um link em HTML, utilizamos a tag <a>, que significa "âncora".

Para transformar um texto em um link, siga estas etapas:

1. Escolha o texto que será o link. Por exemplo, "Clique aqui".
2. Envolve o texto em uma tag <a>, assim: <a>Clique aqui</a>.
3. Adicione o atributo href à tag <a>, que especifica o endereço da web para o qual o link aponta: <a href="https://www.exemplo.com">Clique aqui</a>.

Após seguir essas etapas, você terá um link funcional em sua página HTML.

Conclusão

Neste artigo, exploramos os conceitos básicos do HTML, desde sua definição como linguagem de marcação até a utilização dos principais elementos e tags para a estruturação de uma página web.

Aprendemos sobre a anatomia de um elemento HTML, a importância dos atributos, o aninhamento de elementos e a inclusão de imagens. Também vimos como marcar o texto corretamente, utilizando cabeçalhos, parágrafos e listas.

Com essas informações, você já está pronto para começar a criar suas próprias páginas web utilizando o HTML. Lembre-se de praticar e explorar novos recursos, pois a experiência é fundamental para se tornar um desenvolvedor web de sucesso.

Continue aprendendo e aprimorando suas habilidades em HTML e explore outros aspectos do desenvolvimento web, como o CSS e o JavaScript, para criar páginas ainda mais atraentes e interativas. Divirta-se criando sua presença online!