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!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo