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 maiúsculas ou minúsculas, logo, podemos utilizar de várias 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 da 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. Existe 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 do 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 elemento <title>:
Define um título na barra de ferramentas do navegador, fornece um título para a página quando ela é adicionada aos favoritos e exibe um título para a página nos resultados do mecanismo de pesquisa.
Aí vã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.
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.
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.
Aqui temos a tag de fechamento body. Ela indica que a parte de conteúdo da página chegou ao final.
E aqui, a tag de fechamento HTML. Ela indica que o documento chegou ao final.
E aí? Conseguiu entender como é a estrutura básica de um documento HTML?Se tiver qualquer dúvida, sugestão ou crítica, não deixe de enviar para a gente, ok?
Pic of the week: Sunset at margate beach
The first day’s journey was through the pink fields
The first day’s journey was through the pink fields
The first day’s journey was through the pink fields
The first day’s journey was through the pink fields