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 esteja visível para um visitante com visão normal, é fundamental que o site funcione. Ela contém todas as metainformações, incluindo informações dos mecanismos de pesquisa e dos resultados de mídias sociais, ícones da guia do navegador e do atalho da tela inicial de dispositivos móveis, além do comportamento e da apresentação do seu conteúdo. Nesta seção, você vai conhecer 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), inclua os componentes que devem ser considerados essenciais para todas as páginas da Web: o tipo de documento, a linguagem humana do conteúdo, o conjunto de caracteres e, é claro, o título ou nome do site ou aplicativo.
Adicionar a cada documento HTML
Há vários recursos que devem ser considerados essenciais para toda e qualquer página da Web. Os navegadores ainda renderizarão o conteúdo se esses elementos estiverem ausentes, mas os incluirão. Sempre.
<!DOCTYPE html>
A primeira coisa em qualquer documento HTML é o preâmbulo. Para HTML, tudo o que você precisa é <!DOCTYPE html>. Ele pode parecer um elemento HTML, mas não é. É um tipo especial de nó chamado "doctype". O doctype instrui o navegador a usar o modo padrão. Se 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 pai de <head> e <body>, contendo tudo no documento HTML diferente do doctype. Se omitido, o texto ficará implícito, mas é importante incluí-lo, já que esse é o elemento em que o idioma do conteúdo do documento é declarado.
Idioma do conteúdo
O atributo de idioma lang adicionado à tag <html> define o idioma principal do documento. O valor do atributo lang é um código de idioma ISO de duas ou três letras seguido pela região. A região é opcional, mas recomendada, já que o idioma pode variar muito entre as regiões. Por exemplo, o francês é muito diferente no Canadá (fr-CA) e em Burkina Faso (fr-BF). Essa declaração de idioma permite que leitores de tela, mecanismos de pesquisa e serviços de tradução saibam o idioma do documento.
O atributo lang não está limitado à tag <html>. Se houver texto na página em um idioma diferente do idioma do documento principal, o atributo lang deverá ser usado para identificar exceções ao idioma principal do documento. Assim como quando é incluído na cabeça, o atributo lang no corpo não tem efeito visual. Ela apenas adiciona semântica, permitindo que tecnologias adaptativas e serviços automatizados saibam o idioma do conteúdo afetado.
Além de definir o idioma do documento e as exceções a esse idioma de 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 <html> de abertura e fechamento, encontramos os dois filhos: <head> e <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
O <head>, ou cabeçalho de metadados do documento, contém todos os metadados de um site ou aplicativo. O corpo inclui o conteúdo visível. O restante desta seção se concentra nos componentes encontrados aninhados dentro da <head></head> de abertura e fechamento.
Componentes obrigatórios no <head>
Os metadados do documento, incluindo o título do documento, o conjunto de caracteres, as configurações da janela de visualização, a descrição, o URL de base, os links da folha de estilo e os ícones, são encontrados no elemento <head>. Embora você talvez não precise de todos esses recursos, sempre inclua configurações de conjunto de caracteres, título e 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 do 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, é preciso usar UTF-8, que permite a codificação de um a quatro bytes de todos os caracteres, mesmo os que você nem sabia que existiam. Além disso, é o tipo de codificação exigido pelo HTML5.
Para definir a codificação de caracteres como UTF-8, inclua:
<meta charset="utf-8" />
Ao declarar UTF-8 (não diferencia maiúsculas de 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 nos nomes de classes e na selectorAPI (não faça isso). Se você usa emojis, faça isso de uma forma que melhore a usabilidade sem prejudicar a acessibilidade.
Título do documento
Sua página inicial e todas as páginas adicionais devem ter um título exclusivo. O conteúdo do título do documento, o texto entre as tags <title> de abertura e fechamento, é exibido na guia do navegador, a lista de janelas abertas, o histórico, os resultados da pesquisa e, a menos que redefinido com tags <meta>, em cards de mídias sociais.
<title>Machine Learning Workshop</title>
Metadados da janela de visualização
A outra metatag que deve ser considerada essencial é a janela de visualização, que ajuda na capacidade de resposta do site, permitindo que o conteúdo seja renderizado bem por padrão, independentemente da largura da janela de visualização. Embora a metatag da janela de visualização esteja disponível desde junho de 2007, quando o primeiro iPhone foi lançado, ela foi documentada em uma especificação recentemente. Como ele permite controlar o tamanho e a escala de uma janela de visualização e evita que o conteúdo do site seja dimensionado para caber em um site de 960 pixels em uma tela de 320 pixels, ele é definitivamente recomendado.
<meta name="viewport" content="width=device-width" />
O código anterior significa "tornar o site responsivo, começando por tornar a largura do conteúdo a largura da tela". Além de width, é possível definir zoom e escalonabilidade, mas ambos têm valores acessíveis por padrão. Para deixar o texto 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>
Outros conteúdos de <head>
Há muito mais sobre o <head>. Todos os metadados, na verdade. A maioria dos elementos encontrados no <head> está abordada aqui, mas salva uma infinidade das opções de <meta> para o próximo capítulo.
Você já viu o conjunto de caracteres meta e o título do documento, mas há muito mais metadados além das tags <meta> que precisam ser incluídos.
CSS
<head> é onde se incluem estilos para o HTML. Há um programa de aprendizado dedicado ao CSS que você pode aprender sobre estilos, mas é preciso saber como incluí-los nos seus documentos HTML.
Há três maneiras de incluir CSS: <link>, <style> e o atributo style.
As duas principais maneiras de incluir estilos no seu arquivo HTML são incluir um recurso externo usando um elemento <link> com o atributo rel definido como stylesheet ou incluir o CSS diretamente no cabeçalho do documento nas tags <style> de abertura e fechamento.
A tag <link> é o método preferido para incluir folhas de estilo. Vincular uma ou algumas folhas de estilo externas é bom tanto para a experiência do desenvolvedor quanto para o desempenho do site: você mantém o CSS em um único local em vez de ele ser espalhado em todos os lugares, e os navegadores podem armazenar o arquivo externo em cache, o que significa que ele não precisa ser baixado novamente a cada navegação nas páginas.
A sintaxe é <link rel="stylesheet" href="styles.css">, em questyle.css é o URL da folha de estilo. type="text/css" vai aparecer com frequência. Não é necessário. Se você estiver incluindo estilos escritos em algo diferente de CSS, o type será necessário. No entanto, como não há outro tipo, esse atributo não é necessário. O atributo rel define a relação, neste caso, stylesheet. Se você omitir essa informação, o CSS não será vinculado.
Você vai descobrir alguns outros valores de rel em breve, mas primeiro vamos discutir outras maneiras de incluir o CSS.
Se você quiser que os estilos de folha de estilo externos fiquem em uma camada em cascata, mas não tiver acesso para editar o arquivo CSS e colocar as informações da camada nele, 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 na <style> ou 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 encontre o @import em um <style> principal, muitas vezes você vai encontrar propriedades personalizadas declaradas em um bloco de estilo principal:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Os estilos precisam aparecer no cabeçalho, usando <link> ou <style> ou ambos. Eles funcionarão se forem incluídos no corpo do documento, mas você quer os estilos no cabeçalho por motivos de desempenho. Isso pode parecer contraditório, já que você pode achar que o conteúdo deve ser carregado primeiro, mas o navegador precisa saber como renderizar o conteúdo quando ele for carregado. Adicionar estilos primeiro evita a repintura desnecessária que ocorre se um elemento é estilizado depois de ser renderizado pela primeira vez.
Há uma maneira de incluir estilos que você nunca usará no <head> do seu documento: estilos in-line. Você provavelmente nunca usará estilos in-line 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 nele e, com um atributo style in-line, tornar visível um bloco de estilo editável pelo conteúdo.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Embora seja possível adicionar estilos in-line à <style>, é muito mais divertido estilizar o <style> no style. Estou livre.
Outros usos do elemento <link>
O elemento link é usado para criar relacionamentos entre o documento HTML e recursos externos. Alguns desses recursos podem ser transferidos por download, outros são informativos. O tipo de relacionamento é definido pelo valor do atributo rel. No momento, há 25 valores disponíveis para o atributo rel que podem ser usados com <link>, <a> e <area> ou <form>. Alguns deles podem ser usados com todos. É preferível incluir aqueles relacionados a metainformações no cabeçalho e aqueles relacionados ao desempenho no <body>.
Agora, você incluirá três outros tipos no cabeçalho: icon, alternate e canonical. Você vai incluir um quarto tipo, rel="manifest", no próximo módulo.
Favicon
Use a tag <link> com o par de atributo/valor rel="icon" para identificar o favicon a ser usado no documento. Um favicon é um ícone muito pequeno que aparece na guia do navegador, geralmente à esquerda do título do documento. Quando houver muitas guias abertas, elas encolhem e o título pode desaparecer completamente, mas o ícone continua 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 o ícone para cenários em que 16 px, 32 px ou 48 px faz sentido". O atributo de tamanhos aceita o valor de any para ícones escalonáveis ou uma lista de valores quadrados separados por espaço widthXheight. Nos quais 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" />
Existem 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. O apple-touch-icon é aplicado somente quando o usuário adiciona um site à tela inicial: é possível especificar vários ícones com sizes diferentes para dispositivos diferentes. O mask-icon só vai ser usado se o usuário fixar a guia no Safari para computador: o ícone 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 manter a consistência e oferecer uma boa experiência do usuário, use uma única imagem. O Twitter usa o pássaro azul: quando você vê o pássaro azul na guia do navegador, sabe que a guia está aberta em uma página do Twitter sem clicar na guia. O Google usa favicons diferentes para cada aplicativo. Por exemplo, há um ícone de e-mail ou de calendário. Mas todos os ícones do Google usam o mesmo esquema de cores. Mais uma vez, você sabe exatamente qual é o conteúdo de uma guia aberta simplesmente pelo ícone.
Versões alternativas do site
Usamos 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 o francês e o 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 serve para mais do que apenas traduções. Por exemplo, o atributo type pode definir o URI alternativo de um feed RSS quando o type está definido como application/rss+xml ou application/atom+xml. Vamos criar um link para uma versão falsa em PDF do site.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Se o valor rel for alternate stylesheet, ele vai definir uma folha de estilo alternativa, e o atributo title precisará ser definido para atribuir 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 poderão se confundir sobre qual versão é a fonte autorizada. Para isso, use rel="canonical" e identifique o URL preferencial para o site ou aplicativo.
Inclua o URL canônico em todas as páginas traduzidas e na página inicial, indicando nosso URL preferido:
<link rel="canonical" href="https://www.machinelearning.com" />
O link canônico rel="canonical" é mais usado em postagens cruzadas com publicações e plataformas de blog para dar o crédito à fonte original. Quando um site distribui conteúdo, ele precisa incluir o link canônico para a fonte original.
Scripts
A tag <script> é usada para incluir scripts. O tipo padrão é JavaScript. Se você incluir qualquer outra linguagem de script, inclua o atributo type com o tipo MIME ou type="module" se for um módulo JavaScript. Apenas módulos JavaScript e 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, você não precisa de JavaScript para um site funcional, e esse é um programa de aprendizado em HTML, não em JavaScript.
Mais adiante, você incluirá um pequeno trecho de JavaScript para criar um Easter egg:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Este snippet cria um manipulador de eventos para um elemento com o código de switch. Com JavaScript, não é recomendável referenciar um elemento antes que ele exista. Como ainda não existe, não vamos incluí-lo ainda. Ao adicionar o elemento de chave de luz, vamos incluir o <script> na parte de baixo do <body>, e não na <head>. Por quê? Há dois motivos. Como não estamos baseando esse script em um evento DOMContentLoaded, queremos garantir que os elementos existam antes que o script que os referencia seja encontrado. E, principalmente, o JavaScript não somente bloqueia a renderização, mas o navegador para de fazer o download de todos os recursos quando o download dos scripts é feito e não retoma o download de outros recursos até que o JavaScript termine a execução. Por esse motivo, as solicitações JavaScript são frequentemente encontradas no final do documento, e não 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 o defer, a renderização HTML não é bloqueada durante o download, e o JavaScript só é executado após o documento terminar a renderização. Com async, a renderização também não é bloqueada durante o download, mas, quando o download do script é concluído, 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 atributo defer adia a execução do script até que tudo seja renderizado, impedindo que ele prejudique o desempenho. Os atributos async e defer são válidos apenas em scripts externos.
Base
Há outro elemento que só é encontrado na <head>.. Não é usado com muita frequência, o elemento <base> permite definir um URL e um destino do link padrão. O atributo href define o URL de base para todos os links relativos.
O atributo target, válido no <base>, assim como em links e formulários, define onde esses links devem 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, a _parent do conteúdo atual, que pode ser igual a si mesmo se o abridor não for um iframe, ou _top, que está na mesma guia do navegador, mas retirada de qualquer contexto para ocupar a guia inteira.
A maioria dos desenvolvedores adiciona o atributo target aos próprios links ou ao formulário em uma nova janela, se houver, em vez de usar <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Se nosso site se encontrar aninhado em um iframe em um site como o Yummly, incluir o elemento <base> significaria que, quando um usuário clicar em qualquer link no documento, o link será carregado fora do iframe, ocupando toda a janela do navegador.
Uma das desvantagens desse elemento é que os links fixos 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 de base com o fragmento anexado.
Algumas outras coisas a observar sobre <base>: só pode haver um elemento <base> em um documento e precisa vir antes de qualquer URL relativo ser usado, incluindo possíveis referências de script ou folha de estilo.
O código 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" src="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
Observe que o script está entre alguns sinais de maior e menor, traços e um estrondo. É assim que se faz comentários em HTML. Deixaremos o script comentado até que tenhamos o conteúdo real na página. Os valores entre <!-- e --> não ficarão visíveis nem analisados. Comentários HTML podem ser colocados em qualquer lugar da página, incluindo cabeçalho ou corpo, exceto scripts ou blocos de estilo, onde você deve usar comentários JavaScript e CSS, respectivamente.
Você aprendeu as noções básicas do <head>, mas quer aprender mais do que o básico. Nas próximas seções, aprenderemos sobre metatags e como controlar o que é exibido quando seu site está vinculado nas mídias sociais.
Teste seu conhecimento
Teste seus conhecimentos sobre a estrutura do documento.
Como você identifica o idioma do documento?
language à tag HTML.lang à tag HTML.Add the <lang> ao <head>.Selecione elementos que podem ser incluídos na <head>.
<p><title><meta>