Os documentos HTML incluem uma declaração de tipo de documento e o <html> root
element. O cabeçalho e o corpo do documento estão aninhados no elemento <html>.
Embora o cabeçalho do documento não seja 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 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 ausentes, mas é recomendável incluí-los.
<!DOCTYPE html>
A primeira coisa em qualquer documento HTML é o preâmbulo. Para HTML, tudo o que você precisa é
<!DOCTYPE html>. Isso parece um elemento HTML, mas na verdade é um nó especial chamado doctype. O doctype informa ao navegador para usar o modo padrão.
Quando omitido, os navegadores usam um modo de renderização diferente conhecido como
modo quirks.
A inclusão do doctype ajuda a evitar o modo quirks.
<html>
O elemento <html> é o elemento raiz de um documento HTML. Ele é o pai
de <head> e <body>, contendo tudo no documento HTML, exceto
o doctype. Se omitido, o idioma será implícito, mas é recomendável incluí-lo 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 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 nos componentes
aninhados dentro do <head> elemento.
Componentes obrigatórios dentro do <head>
Os metadados do documento, incluindo o título, o conjunto de caracteres, as configurações da janela de visualização
, a descrição, o URL base, os links da folha de estilo e os ícones, são encontrados no elemento
<head>. Embora você não precise de todos esses recursos, sempre inclua o conjunto de caracteres, o título e as configurações da janela de visualização.
Codificação de caracteres
O primeiro elemento no <head> precisa ser a declaração de codificação de caracteres charset. Ele vem antes do título para garantir que o navegador possa renderizar os caracteres nesse título e todos os caracteres no restante do documento.
A codificação padrão
na maioria dos navegadores é windows-1252, dependendo da localidade. No entanto, você deve
usar 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 distinção entre 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 na selectorAPI. Se você usar emojis, use-os de uma forma que melhore a usabilidade sem prejudicar a acessibilidade.
Título do documento
Cada página, 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
<meta> tags, nos cards de redes sociais.
<title>Machine Learning Workshop</title>
Metadados da janela de visualização
A metatag da janela de visualização é essencial para a capacidade de resposta do site, garantindo que o conteúdo seja renderizado bem, independentemente da largura da janela de visualização. Embora a metatag viewport exista desde 2007, ela só foi documentada recentemente em uma especificação. Ela 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 pela largura do conteúdo como a largura da tela". Além da width, você pode definir o zoom e a escalonabilidade, mas ambos são definidos como valores acessíveis. Se você 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 contorno 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 <head> conteúdo
Há muito mais no <head>. Na verdade, todos os metadados.
Embora a maioria dos elementos encontrados no <head> seja abordada neste
módulo, vamos compartilhar mais no módulo de metadados.
Você já viu o conjunto de metacaracteres 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 aprendizagem dedicado ao CSS se você quiser aprender sobre estilos,
mas é necessário saber como incluí-los nos documentos HTML.
Há três maneiras de incluir CSS: <link>, <style> e o style
atributo.
As duas principais maneiras de incluir estilos no arquivo HTML são incluindo um
recurso externo usando um <link> elemento com o rel atributo definido como
stylesheet, ou incluindo 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 a performance do site: você pode manter o CSS em um só lugar em vez de espalhá-lo por todo o site, 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 folha de estilo. Você pode ver o
type="text/css" atributo, mas ele não é obrigatório. O atributo rel define a relação, que é stylesheet nesse caso. Se você omitir o atributo rel, o CSS não será vinculado.
Você vai descobrir alguns outros valores rel em breve, mas primeiro vai aprender outras maneiras de incluir CSS.
Se você quiser que os estilos da folha de estilo 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 bastante novas e você não encontre o
@import em um <style> de cabeçalho, geralmente verá 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. Embora funcionem quando incluídos no corpo do documento, é recomendável adicionar estilos no cabeçalho por motivos de performance. Isso pode parecer contraditório, já que você pode querer que o conteúdo seja carregado primeiro. No entanto, é melhor que o navegador saiba como renderizar o conteúdo quando ele for carregado. Adicionar estilos primeiro evita a repintura desnecessária que ocorre se um elemento for estilizado após a primeira renderização.
Há uma maneira de incluir estilos que você nunca vai usar no <head> do seu
documento: estilos inline. Provavelmente, você nunca vai usar estilos inline no cabeçalho porque as folhas de estilo dos user agents ocultam o cabeçalho por padrão. No entanto, se você quiser criar um editor de CSS sem JavaScript, por exemplo, para testar os elementos personalizados da página, é possível tornar o cabeçalho visível com display: block e, em seguida, ocultar tudo no cabeçalho e, com um atributo style inline, tornar 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>
Você pode adicionar estilos inline ao <style> elemento.
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 relação é 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 aqueles relacionados a metainformação
no cabeçalho e aqueles relacionados à performance no <body>.
Agora, você vai incluir outros três 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 são reduzidas, 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>, você pode 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 o ícone para cenários em que um 16px, 32px ou 48px faz sentido". O atributo de tamanhos aceita o valor any para ícones escalonáveis ou uma lista separada por espaços de valores quadrados widthXheight, em que 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 não padrão de ícones 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: você pode especificar vários ícones com sizes diferentes 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 você possa 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. No entanto, todos os ícones do Google usam o mesmo esquema de cores. Você sabe exatamente qual é 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 brasileiro:
<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 é para mais do que apenas traduções. Por exemplo, o atributo type pode definir o URI alternativo para um feed RSS quando o atributo type é definido como application/rss+xml ou application/atom+xml.
Link para uma versão PDF simulada do site:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Se o valor 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 Machine Learning Workshop, os mecanismos de pesquisa poderão não identificar a fonte confiável. Use rel="canonical"
para identificar o URL preferencial 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 postagem cruzada com
publicações e plataformas de blogs para creditar a fonte original. Quando um site sindicaliza 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 type atributo com o tipo MIME, ou type="module" para um módulo JavaScript.
Somente módulos JavaScript e JavaScript são analisados e executados.
As tags <script> podem ser usadas para encapsular o código ou para baixar um
arquivo externo. No MLW, não há arquivo de script externo porque, ao contrário da crença popular, você não precisa de JavaScript para um site funcional. Este é um
programa de aprendizagem 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 de 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.
Quando adicionarmos o elemento do interruptor de luz, vamos adicionar o <script> na parte de baixo
do <body> em vez do <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.
E, principalmente, o JavaScript não é apenas um
bloqueador 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 esse motivo, você geralmente encontra solicitações de JavaScript no final do documento, em vez do 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 HTML não é bloqueada durante o download, e o JavaScript só é executado depois que o documento termina a renderização. Com async, a renderização também não é bloqueada durante o download, mas, depois que o script termina o download, a renderização é pausada enquanto o JavaScript é executado.
Para incluir o JavaScript do MLW em um arquivo externo, você pode escrever:
<script src="js/switch.js" defer></script>
Adicionar o defer
atributo adia a execução do script até que tudo seja renderizado,
impedindo que o script prejudique a performance. Os atributos async e defer só são válidos em scripts externos.
Base
Há outro elemento que só é encontrado no <head>. O elemento <base>, usado com pouca frequência
, permite definir um URL e um destino de link padrão. O atributo href define o URL base para todos os links relativos.
O atributo target, válido em <base>, bem como em links e formulários, define
onde esses links precisam ser abertos. O padrão _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 é exibido fora de qualquer contexto para ocupar toda a guia.
A maioria dos desenvolvedores adiciona o target atributo aos poucos links que querem
abrir em uma nova janela nos links ou no formulário, em vez de usar
<base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Se nosso site estiver aninhado em um iframe em um site como o Yummly,
incluindo o elemento <base> significa que, quando um usuário clicar em qualquer link no
nosso documento, o link será carregado fora do iframe, ocupando toda a
janela do navegador.
Uma das desvantagens desse elemento é que os links de âncora são resolvidos com
<base>. O <base> converte efetivamente o link <a href="#ref"> para
<a target="_top" href="https://machinelearningworkshop.com#ref">, acionando
uma solicitação HTTP para o URL base com o fragmento anexado.
Mais algumas coisas sobre <base>:
- Só pode haver um elemento
<base>em um documento. - Ele precisa vir antes de qualquer URL relativo ser usado, incluindo possíveis referências de script ou folha de estilo.
Agora, o código é 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 em colchetes angulares, traços e um ponto de exclamação, que é como você comenta o HTML. Qualquer coisa entre <!-- e --> não é visível nem
analisada. Você pode colocar comentários HTML em qualquer lugar da página, exceto em scripts ou blocos de estilo, em que é necessário usar comentários JavaScript e CSS.
Você já abordou o básico do que entra no <head>, mas quer aprender
mais do que o básico. Nas próximas seções, vamos aprender sobre metatags e como controlar o que é exibido quando seu site é vinculado nas mídias sociais.
Teste seu conhecimento
Teste seu conhecimento sobre a estrutura do documento.
Como você identifica o idioma do documento?
language à tag HTML.lang à tag HTML.Add the <lang> ao <head>.Selecione os elementos que podem ser incluídos no <head>.
<p><title><meta>