Escrever um código pode ser uma tarefa simples ou complicada, dependendo do resultado que espera-se obter com ele. No entanto, seja para escrever um código HTML simples ou um código um pouco mais complexo é necessário ter conhecimento do código base ou sintaxe básica do HTML.
A sintaxe básica do html, como o nome já sugere, é o conjunto de comandos fundamentais para que os navegadores (browsers), possam identificar e interpretar o código corretamente.
Agora, vamos ver na prática como é a estrutura básica do html e logo a seguir, uma explicação detalhada de cada comando.
A sintaxe ou estrutura básica do HTML5
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
<title>título</title>
</head>
<body>
</body>
</html>
Agora cada linha de forma mais detalhada:
<!DOCTYPE html>
DOCTYPE não é uma tag, mas sim, uma declaração que informa ao navegador qual tipo de documento esperar. A declaração DOCTYPE é utilizada na primeira linha do código HTML.
Observação: Apesar de ser bastante comum a escrita da declaração DOCTYPE, o navegador não faz diferenciação sobre a forma como ela é escrita, seja com letras maiusculas ou minúsculas, logo, podemos utilizar de varias maneiras:
Dica: A <!DOCTYPE>declaração NÃO diferencia maiúsculas de minúsculas.
Exemplos
<!DOCTYPE html>
<!DocType html>
<!Doctype html>
<!doctype html>
<html lang=”pt-br”>
A tag HTML é utilizada para abrir de forma oficial o documento. A tag HTML é uma tag de abertura e fechamento, isso quer dizer que ao ser aberta, precisa ser fechada.
Junto com a tag HTML podemos utilizar o atributo indicativo de idioma, que informa ao navegador o idioma em que o documento foi escrito ou o idioma predominante. Para isso, após abrir a tag HTML, inserimos o atributo lang acompanhado do sinal de igual e entre aspas, a sigla indicativa de idioma.
<head>:
A tag head, assim como a tag HTML, também é uma tag de abertura e fechamento, ou seja, ao ser aberta, necessita ser fechada.
A tag head abriga os metadados e outros scripts que executam ações dentro da página e deve ficar localizada entre a tag HTML e a tag body.
<meta charset=”UTF-8″>
A tag de metadados charset UTF 8, serve para indicar aos navegadores o conjunto de caracteres utilizados no documento. Existem uma variedade de charset e a escolha pelo UTF-8 se deve ao fato de ser o conjunto que identifica caracteres em português brasileiro, como acentos e cedilha, por exemplo. Se você estiver escrevendo um documento html em outro idioma, fique de olho no conjunto de caracteres que mais se adequa.
<meta name=”viewport”content=”width=device-width, initial-scale=1.0″>
Viewport é um metadado de responsabilidade para o documento HTML, afinal você não vai querer publicar um site que não seja responsivo, não é verdade? Por isso, viewport pode sim, ser considerado como integrante da sintaxe básica de HTML.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Isso fornece ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página.
A parte width=device-width define a largura da página para seguir a largura da tela do dispositivo (que varia dependendo do dispositivo).
A parte initial-scale=1.0define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
<title>Título da página </title>
A tag title permite que um título somente de texto seja inserido no documento html e é exibido na barra de títulos do navegador, juntamente com o favicon<title>título</title>
O conteúdo do título de uma página é muito importante para a otimização de mecanismo de busca (SEO)! O título da página é usado pelos algoritmos do mecanismo de pesquisa para decidir a ordem ao listar as páginas nos resultados da pesquisa.
O <title>elemento:
- define um título na barra de ferramentas do navegador
- fornece um título para a página quando ela é adicionada aos favoritos
- exibe um título para a página nos resultados do mecanismo de pesquisa
Aqui estão algumas dicas para criar bons títulos:
- Escolha um título mais longo e descritivo (evite títulos de uma ou duas palavras)
- Os mecanismos de pesquisa exibirão cerca de 50 a 60 caracteres do título, portanto, tente não ter títulos mais longos do que isso
- Não use apenas uma lista de palavras como título (isso pode reduzir a posição da página nos resultados da pesquisa)
Portanto, tente tornar o título o mais preciso e significativo possível!
Observação: você NÃO pode ter mais de um <title>elemento em um documento HTML.
</head>
Aqui temos o fechamento da tag head. É importante observar se as tags que precisam ser fechadas, estão dessa forma, pois não fechar tags que exigem fechamento impacta diretamente na funcionalidade do documento.
<body>
A tag body abriga todo o conteúdo que é exibido ao usuário na tela como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas, listas, etc.
Observação: Só pode haver um <body> elemento em um documento HTML.
</body>
Aqui temos a tag de fechamento body. Ela indica que a parte de conteúdo da página chegou ao final.
</html>
Aqui temos a tag de fechamento HTML. Ela indica que o documento chegou ao final.
E aí? Conseguiu entender como é a estrura básica de um documento html?
Se tiver qualquer dúvida, sugestão, críticas, não deixe de enviar para a gente, ok?
