O que é HTML? Para que serve e exemplos

Neste artigo veremos o que é HTML, para que serve e alguns exemplos de utilização. Será que HTML é uma linguagem de programação? Descubra!

Lembrando que tudo que está contido neste artigo parte da minha experiência na área, meus estudos e é claro minha opinião, o que pode ser divergente de alguns programadores 🙂

O que é HTML?

HTML é uma linguagem de estruturação e não programação, assim acredito eu

Principalmente por que não há recursos fundamentais nela, que sigam os traços de linguagens como: PHP, JS ou Python

Como por exemplo:

Condicionais;
Funções;
Objetos/Classes;

Porém no HTML temos recursos que também não se apresentam nas linguagens citadas

Que é principalmente: estruturar uma página web por meio de tags, para que receba CSS e fique com estilo

O que é tag? Estutura das tags

Além desse propósito principal, no HTML trabalhamos com tags a todo momento

Um exemplo de tag:

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

Cada tag tem seu significado especial, essa do exemplo serve para parágrafos

Uma tag é constituída por:

Uma abertura: <
O nome da tag: p
Um fechamento: >

Além disso podemos ter tags que fecham e outras não, o fechamento do <p> é </p>

Apenas devemos adicionar uma / antes do nome

Uma tag bastante utilizada, que não tem fechamentos é a img

<img src="imagem.jpg"/>

Como inserimos a imagem da tag <img> por atributo e ela não possui conteúdo, ela é fechada na própria tag de abertura com o />

Obs: a maioria das tags possuem tag de fechamento!

E o que determina o fechamento é o fim do conteúdo de cada tag, ou seja, um título com a tag <h1> recebe o fechamento </h1> quando o texto do título chega ao fim

O que é um atributo?

Puxei o gancho do atributo na seção passada, pois é um assunto bem importante no HTML

Algumas tags tem atributos, que nada mais é uma propriedade que pode ser alterada melhorando assim a utilização da tag

Por exemplo, na tag <img> temos o atributo src que é a source da imagem, ou seja, o caminho da imagem

E sem ele, a tag img não funciona corretamente, percebeu a importância dos atributos?

Nem todas as tags tem atributos, porém as que possuem é bom saber o que eles fazem ou quais são eles, pois realmente podem fazer toda a diferença

Na tag img também, por exemplo, temos o atributo alt, que atribui um texto para a imagem de acessibilidade

Ou seja, quando a imagem não é exibida o alt está lá para poder saber o conteúdo da imagem por meio de texto e também alguns leitores como o Google utilizam este atributo para ver o conteúdo da imagem

<img src="imagem.jpg" alt="Uma rua de Florianópolis" />

Neste caso, descrevemos com o alt o que aparece na imagem.jpg

Tags obrigatórias em todas as páginas web

Até agora vimos o que é o HTML e também o conceito de tag, mas muito importante também são as tags ‘obrigatórias’

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Entre aspas por que uma página pode funcionar sem elas, mas nenhum projeto profissional pode ficar sem elas

Vou apresentar uma estrutura básica de HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Página Exemplo</title>
</head>
<body>
    <h1>Título</h1>
    <p>Uma página de exemplo</p>
</body>
</html>

Acima você pode observar o que eu chamo de mínimo projeto possível, ou seja, 90% do que contém neste exemplo é exigido para um bom HTML, vamos falar um pouco sobre as tags

<!DOCTYPE html>: Uma tag de configuração com fechamento automático, serve para configuração do documento, navegadores entendem que este é um documento HTML;
<html>: Tag principal do documento, que contém a tag head e body;
<head>: Tags de configuração ou que chamam outros arquivos, CSS por exemplo, vão dentro da tag head, as tags desta seção não aparecem de forma gráfica na página;
<body>: Todas as tags que aparecem ou devem aparecer na página são adicionadas dentro desta tag;

Perceba também o nome delas, head (cabeça) uma tag utilizada para configurações, body (corpo) uma tag que contém as tags que aparecem na página, são bem sugestivas!

Então pela explicação anteriormente dada, essas tags são de suma importância para o bom andamento do projeto e acabam sendo uma boa prática também

HTML com CSS

Uma outra questão que vale citar é o HTML junto do CSS, você não deve adicionar código CSS tanto no head da página quanto nos elementos de HTML

O que é possível pelo atributo style, mas considerado uma anti padrão / má prática

Então a maneira certa é adicionar um arquivo de estilo pela tag link, no head (local onde são feita as configurações), veja um exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Página Exemplo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
... continuação do HTML

A tag link serve para ‘linkar’ folhas de estilo externas do arquivo de HTML principal da página, e você pode adicionar quantas quiser, uma para cada tag link

Esta separação de conceitos, não misturar as duas linguagens, é um bom padrão de código a ser seguido e muito profissional

HTML semântico

Este é um tópico um pouco mais avançado, mas é bom você estar ciente sobre ele, então vamos a uma introdução sobre o tema

HTML semântico é uma estratégia de utilizar as tags certas para o determinado significado da página

Ou seja, você utiliza algumas tags para um contexto e outras para outro

Um bom exemplo é a tag <h1>, ela é o título principal da página, então cada página deve conter no máximo um h1

Claro que isso é adquirido com a experiência do programador, mas é bom saber que este termo existe e influência o SEO da página

SEO (search engine optimization) é o método que o Google utiliza para rankear bem as páginas nos resultados de busca

Este é um outro termo um pouco mais complexo que vale sua pesquisa, mas resumidamente: tudo que aumenta o SEO ajuda o seu site/blog/projeto a crescer =)

Conclusão

Neste artigo vimos o que é HTML, a sua importância na web e também que na minha opinião não é uma linguagem de programação (mas tem seu lugar em meu coração)

Também as tags mais importantes, que não podem faltar em página nenhuma ou projeto que seja profissional

Algumas boas práticas relacionadas a CSS foram abordadas e também o conceito de HTML semântico e SEO

E por hoje é isso, até o próximo post!