Os documentos HTML incluem uma declaração de tipo de documento e o elemento raiz <html>. Aninhados no elemento <html> estão o cabeçalho e o corpo do documento.
Embora o cabeçalho do documento não fique visível fora do código, ele é essencial para o funcionamento de um site. Ele contém todas as metainformações, incluindo informações para mecanismos de pesquisa e resultados de mídias sociais, ícones para a guia do navegador e o atalho da tela inicial do dispositivo móvel, além do comportamento e da apresentação do seu conteúdo. Nesta seção, você vai descobrir os componentes que, embora não sejam visíveis, estão presentes em quase todas as páginas da Web.
Para criar o site MachineLearningWorkshop.com (MLW), comece incluindo os componentes que devem ser considerados essenciais para todas as páginas da Web: o tipo de documento, o idioma humano do conteúdo, o conjunto de caracteres e, é claro, o título ou nome do site ou aplicativo.
Adicionar a todos os documentos HTML
Há vários elementos essenciais para todas as páginas da Web. Os navegadores renderizam o conteúdo se esses elementos estiverem faltando, mas é recomendável incluí-los.
<!DOCTYPE html>
A primeira coisa em qualquer documento HTML é o preâmbulo. Para HTML, você só precisa de
<!DOCTYPE html>. Isso parece um elemento HTML, mas é um nó especial chamado doctype. O doctype informa ao navegador para usar o modo de padrões.
Quando omitido, os navegadores usam um modo de renderização diferente conhecido como modo quirks.
Incluir o doctype ajuda a evitar o modo quirks.
<html>
O elemento <html> é o elemento raiz de um documento HTML. É o elemento pai de <head> e <body>, contendo tudo no documento HTML, exceto o doctype. Se omitido, o idioma será implícito, mas é recomendável incluir para declarar o idioma do documento.
Idioma do conteúdo
O atributo lang
na tag <html> define o idioma principal do documento. O valor é um código de idioma ISO seguido por uma região opcional.
Por exemplo, o francês no Canadá é fr-CA, enquanto em Burkina Faso é fr-BF. Essa declaração ajuda leitores de tela, mecanismos de pesquisa e serviços de tradução a identificar o idioma do documento.
Você pode usar o atributo lang em outras tags para identificar exceções ao idioma principal do documento. Assim como no cabeçalho, o atributo lang no corpo não tem efeito visual. Ele adiciona semântica para que tecnologias assistivas e serviços automatizados possam identificar o idioma de um conteúdo específico.
Além de definir o idioma do documento e as exceções a esse idioma base, o atributo pode ser usado em seletores de CSS.
<span lang="fr-fr">Ceci n'est pas une pipe.</span> pode ser segmentado com os seletores de atributo e idioma [lang|="fr"] e :lang(fr).
<head>
Aninhados entre as tags de abertura e fechamento <html>, encontramos os dois filhos: <head> e <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
O <head> contém metadados de um site ou aplicativo, enquanto o <body>
contém conteúdo visível. O restante desta seção se concentra em componentes
aninhados dentro do elemento <head>.
Componentes obrigatórios dentro do <head>
Os metadados do documento, incluindo título, conjunto de caracteres, configurações de viewport, descrição, URL base, links de folha de estilo e ícones, são encontrados no elemento <head>. Embora você não precise de todos esses recursos, sempre inclua
conjunto de caracteres, título e configurações de viewport.
Codificação de caracteres
O primeiro elemento em <head> precisa ser a declaração de codificação de caracteres charset. Ele aparece antes do título para garantir que o navegador possa renderizar
os caracteres do título e todos os caracteres do restante do documento.
A codificação padrão na maioria dos navegadores é windows-1252, dependendo da localidade. No entanto, use UTF-8, que permite a codificação de um a quatro bytes de todos os caracteres.
Para definir a codificação de caracteres como UTF-8, inclua:
<meta charset="utf-8" />
Ao declarar UTF-8 (sem diferenciação de maiúsculas e minúsculas), você pode até incluir emojis no título.
A codificação de caracteres é herdada em tudo no documento, até mesmo
<style> e <script>. Essa pequena declaração significa que você pode incluir emojis em
nomes de classes e no selectorAPI. Se você usar emojis, faça isso de uma
maneira que melhore a usabilidade sem prejudicar a acessibilidade.
Título do documento
Cada página, incluindo a inicial e todas as outras, precisa ter um título exclusivo.
O conteúdo do título do documento, o texto entre as tags de abertura e fechamento
<title>, é exibido na guia do navegador, na lista de janelas abertas, no
histórico, nos resultados da pesquisa e, a menos que seja redefinido com
tags<meta>, nos cards de redes sociais.
<title>Machine Learning Workshop</title>
Metadados da janela de visualização
A metatag viewport é essencial para a capacidade de resposta do site, garantindo que o conteúdo seja renderizado bem, independente da largura da janela de visualização. Embora a metatag viewport exista desde 2007, ela só foi documentada em uma especificação recentemente. Ele controla o tamanho e a escala da janela de visualização, impedindo que o conteúdo seja reduzido para caber em telas menores.
<meta name="viewport" content="width=device-width" />
O código anterior significa "tornar o site responsivo, começando por fazer com que a largura do conteúdo seja a largura da tela". Além de width, é possível definir zoom e escalonabilidade, mas ambos têm valores padrão acessíveis. Se quiser ser explícito, inclua:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
A janela de visualização faz parte da auditoria de acessibilidade do Lighthouse. Seu site será aprovado se for escalonável e não tiver um tamanho máximo definido.
Até agora, o esboço do nosso arquivo HTML é:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Outro conteúdo do <head>
Há muito mais coisas envolvidas no <head>. Todos os metadados, na verdade.
Embora a maioria dos elementos encontrados no <head> seja abordada neste módulo, vamos compartilhar mais informações no módulo de metadados.
Você já viu o conjunto de caracteres meta e o título do documento, mas há muito mais metadados fora das tags <meta> que precisam ser incluídos.
CSS
O <head> é onde você inclui estilos para seu HTML. Há um programa de aprendizado dedicado ao CSS se você quiser saber mais sobre estilos, mas é necessário saber como incluí-los nos documentos HTML.
Há três maneiras de incluir CSS: <link>, <style> e o atributo style.
As duas principais maneiras de incluir estilos no arquivo HTML são: incluir um recurso externo usando um elemento <link> com o atributo rel definido como stylesheet ou incluir CSS diretamente no cabeçalho do documento dentro das tags de abertura e fechamento <style>.
A tag <link> é o método preferencial para incluir folhas de estilo. Vincular uma ou algumas folhas de estilo externas é bom para a experiência do desenvolvedor e para o desempenho do site: você mantém o CSS em um só lugar em vez de espalhado por toda parte, e os navegadores podem armazenar em cache o arquivo externo, o que significa que ele não precisa ser baixado novamente a cada navegação de página.
A sintaxe é <link rel="stylesheet" href="styles.css">, em que styles.css é o nome do arquivo e o local relativo da sua folha de estilo. Você pode ver o atributo
type="text/css", mas ele não é obrigatório. O atributo rel define a relação, que é stylesheet neste caso. Se você omitir o atributo rel, seu CSS não será vinculado.
Em breve, você vai descobrir outros valores de rel, mas primeiro vai aprender outras
maneiras de incluir CSS.
Se você quiser que os estilos da sua folha de estilos externa estejam em uma camada em cascata, mas não tiver acesso para editar o arquivo CSS, inclua o CSS com @import dentro de um <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Ao usar @import para importar folhas de estilo para o documento, opcionalmente em
camadas em cascata, as instruções @import precisam ser as primeiras instruções no
<style> ou na folha de estilo vinculada, fora da declaração do conjunto de caracteres.
Embora as camadas em cascata ainda sejam relativamente novas e você não veja o
@import em um cabeçalho <style>, é comum encontrar propriedades personalizadas declaradas em
um bloco de estilo de cabeçalho:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Os estilos, adicionados com <link>, <style> ou ambos, precisam estar no cabeçalho. Eles funcionam quando incluídos no corpo do documento, mas é recomendável adicionar estilos no cabeçalho por motivos de performance. Isso pode parecer contraditório, já que você pode querer que seu conteúdo seja carregado primeiro. Mas é melhor que o navegador saiba como renderizar o conteúdo quando ele é carregado. Adicionar estilos primeiro evita a repintura desnecessária que ocorre se um elemento for estilizado depois de ser renderizado pela primeira vez.
Há uma maneira de incluir estilos que você nunca vai usar no <head> do seu
documento: estilos inline. Você provavelmente nunca vai usar estilos inline no cabeçalho, porque as folhas de estilo dos user agents ocultam o cabeçalho por padrão. Mas se você quiser
criar um editor de CSS sem JavaScript, por exemplo, para testar os
elementos personalizados da página, torne o cabeçalho visível com display: block,
oculte tudo no cabeçalho e, com um atributo style inline,
torne um bloco de estilo editável visível.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
É possível adicionar estilos inline ao elemento <style>.
Outros usos do elemento <link>
O elemento link é usado para criar relações entre o documento HTML e recursos externos. Alguns desses recursos podem ser baixados, outros são
informativos. O tipo de relacionamento é definido pelo valor do atributo rel. Há 25 valores disponíveis para o atributo rel
que podem ser usados com <link>, <a> e <area> ou <form>, com alguns que
podem ser usados com todos. É preferível incluir as informações relacionadas a metadados no cabeçalho e as relacionadas à performance no <body>.
Agora você vai incluir três outros tipos no cabeçalho: icon, alternate e canonical. Você vai adicionar um quarto tipo, rel="manifest", no próximo módulo.
Favicon
Use a tag <link> com rel="icon" para identificar o favicon do seu
documento. Um favicon é um pequeno ícone que aparece na guia do navegador, geralmente à esquerda do título do documento. Quando as guias diminuem, o título pode desaparecer, mas o ícone permanece visível. A maioria dos favicons são logotipos de empresas ou aplicativos.
Se você não declarar um favicon, o navegador vai procurar um arquivo chamado
favicon.ico no diretório de nível superior (a pasta raiz do site). Com
<link>, é possível usar um nome de arquivo e um local diferentes:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
O código anterior diz "use o mlwicon.png como ícone para cenários em que um
16px, 32px ou 48px faz sentido". O atributo "sizes" aceita o valor any para ícones escalonáveis ou uma lista separada por espaços de valores quadrados widthXheight. Nela, os valores de largura e altura são 16, 32, 48 ou maiores nessa sequência geométrica, a unidade de pixel é omitida, e o X não diferencia maiúsculas de minúsculas.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Há dois tipos especiais de ícones não padrão para o navegador Safari:
apple-touch-icon para dispositivos iOS e mask-icon para guias fixadas no macOS.
apple-touch-icon é aplicado apenas quando o usuário adiciona um site à tela inicial. É possível especificar vários ícones com diferentes sizes para dispositivos diferentes.
mask-icon só será usado se o usuário fixar a guia no Safari para computador. O
ícone em si precisa ser um SVG monocromático, e o atributo color preenche o
ícone com a cor necessária.
Embora seja possível usar <link> para definir uma imagem completamente diferente em cada página ou até mesmo em cada carregamento de página, não faça isso. Para consistência e uma boa experiência do usuário, use uma única imagem. O Google usa favicons diferentes para cada um dos aplicativos: há um ícone de e-mail, um ícone de calendário, por exemplo. Mas todos os ícones do Google usam o mesmo esquema de cores. Você sabe exatamente o conteúdo de uma guia aberta pelo ícone.
Versões alternativas do site
Use o valor alternate do atributo rel para identificar traduções
ou representações alternativas do site.
Imagine que temos versões do site traduzidas para francês e português do Brasil:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Ao usar alternate para uma tradução, o atributo hreflang precisa ser definido.
O valor alternativo não é apenas para traduções. Por exemplo, o atributo type
pode definir o URI alternativo de um feed RSS quando o atributo type
é definido como application/rss+xml ou application/atom+xml.
Link para uma versão simulada em PDF do site:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Se o valor de rel for alternate stylesheet, ele definirá uma
folha de estilo alternativa
e o atributo title precisará ser definido, um nome a esse estilo alternativo.
Canônico
Se você criar várias traduções ou versões do Workshop de machine learning, os mecanismos de pesquisa talvez não identifiquem a fonte oficial. Use rel="canonical" para identificar o URL preferido do site ou aplicativo.
Inclua o URL canônico em todas as páginas traduzidas e na página inicial, indicando nosso URL preferencial:
<link rel="canonical" href="https://www.machinelearning.com" />
O link canônico rel="canonical" é usado com mais frequência para postagens cruzadas com publicações e plataformas de blogs para dar crédito à fonte original. Quando um site
sindica conteúdo, ele precisa incluir o link canônico para a fonte original.
Scripts
A tag <script> inclui scripts. O tipo padrão é JavaScript. Se você
usar outra linguagem de script, inclua o atributo type com o tipo
MIME ou type="module" para um módulo JavaScript.
Somente JavaScript e módulos JavaScript são analisados e executados.
As tags <script> podem ser usadas para encapsular seu código ou fazer o download de um
arquivo externo. No MLW, não há um arquivo de script externo porque, ao contrário da crença popular, não é necessário JavaScript para um site funcional. Este é um programa de aprendizado de HTML, não de JavaScript.
Você vai incluir um pouco de JavaScript para criar um Easter egg mais tarde:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Esse snippet cria um manipulador de eventos para um elemento com o ID switch.
Com JavaScript, evite referenciar um elemento antes que ele exista. Como switch ainda não existe, não vamos incluir o manipulador de eventos por enquanto.
Quando adicionarmos o elemento do interruptor de luz, vamos incluir o <script> na parte de baixo do <body>, em vez de no <head>. Por quê? Dois motivos. Queremos garantir que os elementos existam antes que o script que os referencia seja encontrado, já que não estamos baseando esse script em um evento DOMContentLoaded.
Além disso, o JavaScript não é apenas de bloqueio de renderização, mas o navegador para de baixar todos os recursos quando os scripts são baixados e não retoma o download de outros recursos até que o JavaScript termine a execução. Por isso, é comum encontrar solicitações de JavaScript no final do documento, em vez de no cabeçalho.
Há dois atributos que podem reduzir a natureza de bloqueio do download e da execução do JavaScript: defer e async. Com defer, a renderização de HTML não é
bloqueada durante o download, e o JavaScript só é executado depois que o documento
termina de ser renderizado. Com async, a renderização também não é bloqueada durante
o download, mas, depois que o script termina de ser baixado, ela
é pausada enquanto o JavaScript é executado.
async. Observação:os scripts de módulo carregados com <script type="module"> têm defer ativado por padrão.
Para incluir o JavaScript da MLW em um arquivo externo, você pode escrever:
<script src="js/switch.js" defer></script>
Adicionar o atributo defer
adia a execução do script até que tudo seja renderizado,
impedindo que ele prejudique a performance. Os atributos async e defer
só são válidos em scripts externos.
Base
Há outro elemento encontrado apenas no <head>.. O elemento <base> usado com pouca frequência permite definir um URL de link e um destino padrão. O atributo
href define o URL base para todos os links relativos.
O atributo target, válido em <base>, links e formulários, define onde esses links devem ser abertos. O padrão de _self abre arquivos vinculados no mesmo contexto do documento atual. Outras opções incluem _blank, que
abre todos os links em uma nova janela, o _parent do conteúdo atual, que
pode ser o mesmo que "self" se o abridor não for um iframe, ou _top, que está na
mesma guia do navegador, mas extraído de qualquer contexto para ocupar toda a guia.
A maioria dos desenvolvedores adiciona o atributo target aos poucos links que querem
abrir em uma nova janela nos links ou formulários, em vez de usar
<base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Se nosso site estivesse aninhado em um iframe em um site como o Yummly, incluir o elemento <base> significaria que, quando um usuário clicasse em qualquer link no nosso documento, o link seria carregado fora do iframe, ocupando toda a janela do navegador.
Uma das desvantagens desse elemento é que os links âncora são resolvidos com
<base>. O <base> converte o link <a href="#ref"> em
<a target="_top" href="https://machinelearningworkshop.com#ref">, acionando
uma solicitação HTTP para o URL base com o fragmento anexado.
Mais algumas informações sobre <base>:
- Só pode haver um elemento
<base>em um documento. - Ele precisa vir antes de qualquer URL relativo, incluindo possíveis referências de script ou folha de estilo.
O código agora vai ficar assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Comentários HTML
O script é envolvido por colchetes angulares, traços e uma exclamação, que é como
você comenta em HTML. Qualquer coisa entre <!-- e --> não é visível nem
analisada. É possível colocar comentários HTML em qualquer lugar da página, exceto em scripts ou blocos de estilo, em que você deve usar comentários JavaScript e CSS.
Você já aprendeu o básico sobre o que vai no <head>, mas quer saber mais do que isso. Nas próximas seções, vamos aprender sobre metatags e como controlar o que é exibido quando seu site é vinculado nas redes sociais.
Teste seu conhecimento
Teste seu conhecimento sobre a estrutura de documentos.
Como você identifica o idioma do documento?
language à tag HTML.lang à tag HTML.Add the <lang> para o <head>.Selecione os elementos que podem ser incluídos no <head>.
<p><title><meta>