HTML
Linguagem HTML
HTML
Neste texto vamos entender como montar uma estrutura de uma página web e entender um pouco sobre o que HTML HyperText Markup Language - linguagem de marcação de hipertexto), está em toda web. Então todos os sites que nós conhecemos são feitos a partir dessa linguagem de marcação chamada HTML. O HTML é interpretado pelos navegadores como o FireFox, Internet Explorer, Google e Chrome entre outros. Você escreve HTML utilizando estruturas chamadas tags.
O que são tags HTML?
Atributos
Os atributos são usados para personalizar as tags, modificando sua estrutura ou funcionalidade. Igualmente, os atributos são utilizados para atribuir uma classe ou id a um elemento. A maioria das tags tem seus próprios atributos. Contudo, existem alguns atributos genéricos que podem ser utilizados na maioria das tags HTML, vamos estudá-los:
● class=”...“ – Atribui uma classe ao elemento (uma classe pode ser utilizada para um ou mais elementos);
● id=”...“ – Atribui um id ao elemento (um id deve ser único, ou seja atribuído a um único elemento);
● style=”...” – Permite incluir elementos CSS (estilos) dentro da tag;
● lang=”...” – Define o idioma principal do elemento;
● title=”...” – Define o título do elemento;
● alt=”...” – Define um texto alternativo e, por isso, é muito utilizado em imagens, auxilia nas práticas de SEO;
● hidden – Oculta o elemento;
● align=”...” – Permite definir o padrão de alinhamento desse elemento, como por exemplo: right, center, left e justify;
● width=”...” – Define uma largura para o elemento;
● height=”...” – Define uma altura para o elemento.
Essas são os principais atributos, porém existem diversos outros que devem ser estudados e podem ser
utilizados no seu código.
Estrutura HTML
Estrutura básica de um documento HTML
Um documento HTML recebe algumas tags que formam a sua estrutura básica. No HTML5, o documento padrão recebe a seguinte estrutura:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Em primeiro lugar, vamos agora entender para que serve cada uma dessas tags:
- <!DOCTYPE html> – A tag !DOCTYPE informa ao navegador a versão do HTML que está sendo utilizada no documento. Por exemplo: no HTML5, basta incluir !DOCTYPE html, e assim o navegador já saberá que se trata de um documento na versão HTML5;
- <html></html> – Esta tag é o elemento básico da estrutura do HTML. Assim sendo, ela conterá todos os elementos do seu documento. Todo documento HTML deve iniciar e finalizar com essa tag;
- <head></head> – Essa tag delimita o cabeçalho do documento. Não possui nenhum valor visível, porém é capaz de transmitir ao navegador diversas informações muito úteis e essenciais a uma boa apresentação do seu documento HTML;
- <title></title> – Essa tag define o título da sua página, o nome que aparecerá na sua aba, janela ou guia. Por esta razão, a tag >title> é de grande importância para o SEO;
- <meta/> – Essa tag permite inserir metadados ao seu documento, no caso acima, a informação charset=”UTF-8′′, que garante a compatibilidade do código com os caracteres de padrão latino americano;
- <body></body> – Finalmente, a tag que representa o corpo do documento. Em síntese, é nessa tag que todos os elementos visíveis do seu site devem ser inseridos.
Agora que já conhecemos as tags HTML que formam a estrutura básica de uma página, podemos então estudar as diversas tags que contemplarão o documento.