A linguagem de marcação de hipertexto, ou HTML, é a linguagem de marcação padrão para descrever a estrutura de documentos exibidos na web. O HTML consiste em uma série de elementos e atributos usados para marcar todos os componentes de um documento para estruturá-lo de forma significativa.
Os documentos HTML são basicamente uma árvore de nós, incluindo elementos HTML e nós de texto. Os elementos HTML fornecem a semântica e a formatação de documentos, incluindo a criação de parágrafos, listas e tabelas, bem como a incorporação de imagens e controles de formulários. Cada elemento pode ter diversos atributos especificados. Muitos elementos podem ter conteúdo, incluindo outros elementos e texto. Os outros elementos estão vazios, e a tag e os atributos definem suas funções.
Há diversas categorias de elementos, incluindo metadados, seccionamento, texto, semântica in-line, formulário, interativo, mídia, componente e script. Abordaremos a maioria deles na série. Mas primeiro, o que é um elemento?
Elementos
HTML consiste em uma série de elementos, que você usa para incluir, ou envolver, diferentes partes do conteúdo para fazê-lo aparecer ou agir de uma determinada maneira. Os elementos HTML são delineados por tags, escritas usando colchetes angulares (< e >).
O título da nossa página é um cabeçalho de nível um, para o qual usamos a tag <h1>. O título real, "Workshop de machine learning", é o conteúdo do nosso elemento. O conteúdo fica entre as tags de abertura e fechamento. A tag inteira (a tag de abertura, a tag de fechamento e o conteúdo) é o elemento.
A tag de fechamento é a mesma tag de abertura, precedida por uma barra.
Elementos e tags não são a mesma coisa, embora muitas pessoas usem os termos como sinônimos. O nome da tag é o conteúdo entre colchetes. A tag inclui os colchetes. Nesse caso, <h1>. Um "elemento" é as tags de abertura e fechamento, além de todo o conteúdo entre essas tags, incluindo elementos aninhados.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
Este elemento de parágrafo tem outros elementos aninhados. Ao aninhar elementos, é importante que eles sejam devidamente aninhados. As tags HTML devem ser fechadas na ordem inversa em que foram abertas. No exemplo acima, observe como <em> é aberto e fechado nas tags <strong> de abertura e fechamento, e o <strong> está aberto e fechado nas tags <p>.
Os navegadores não exibem as tags. As tags são usadas para interpretar o conteúdo da página.
O HTML é muito tolerante. Por exemplo, se omitirmos as tags </li> de fechamento, as tags de fechamento serão implícitas.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
Embora seja válido não fechar uma <li>, essa não é uma prática recomendada. O </ul> de fechamento é obrigatório. Se a tag de fechamento da lista não ordenada for omitida, o navegador tentará determinar onde sua lista e os itens dela terminam, mas você talvez não concorde com a decisão.
A especificação de cada elemento indica se a tag de fechamento é obrigatória ou não. "Nenhuma das tags é omissível" na especificação significa que uma tag de abertura e uma de fechamento são obrigatórias. A especificação fornece uma lista de todas as tags de fechamento necessárias.
Se o <em> ou o <strong> do exemplo anterior não tiverem sido fechados, o navegador poderá ou não fechar o elemento para você. Não fechar um <em> simplesmente pode fazer com que o conteúdo seja renderizado de maneira diferente do esperado. Se um </ul> for omitido e a próxima tag for uma tag de fechamento para o contêiner pai da lista, você teve sorte. Por outro lado, se for uma tag <h1> de abertura, o navegador vai presumir que o cabeçalho faz parte da lista, incluindo estilos herdados. Algumas tags de fechamento omitidas causam problemas maiores: não fechar algumas tags, como <script>, <style>, <template>, <textarea> e <title>, interrompe o conteúdo subsequente, conforme mostrado no exemplo a seguir.
Sua empresa não será prejudicada se algum conteúdo ficar em itálico ou ter um título recuado de maneira não intencional. Fazer com que a maior parte do seu conteúdo pareça sem estilo em uma área de texto de 200 x 300 porque você se esqueceu de adicionar um </textarea> ou não apareceu porque esqueceu de fechar um </style>, tornando o site inutilizável.
Em alguns casos, os navegadores incluirão elementos mesmo que as tags não estejam presentes na marcação. Como os elementos podem estar implícitos, um elemento pode existir mesmo quando as tags não existem. O navegador vai adicionar um <body></body> ao redor do conteúdo e um <tbody></tbody> ao redor das linhas da tabela, mesmo que você não faça isso. Sendo assim, embora seja válido omitir tags, não faça isso. Além disso, como já mencionado, verifique se estão aninhados corretamente. Seu futuro como mantenedor de marcação e qualquer outra pessoa que trabalhe em sua base de código agradecerão.
Há dois tipos de elementos: substituídos e não substituído.
Elementos não substituídos
O parágrafo, o cabeçalho e as listas marcadas na seção anterior não são substituídos. Os elementos não substituídos têm tags de abertura e fechamento (às vezes opcionais) que os cercam e podem incluir texto e outras tags como subelementos. As tags de delimitação podem transformar uma frase ou imagem em um hiperlink, transformar uma frase em um cabeçalho, enfatizar palavras e assim por diante.
Elementos substituídos e nulos
Os elementos substituídos são substituídos por objetos, seja um widget de interface gráfica do usuário (IU) no caso da maioria dos controles de formulários ou um arquivo de imagem rasterizado ou escalonável no caso da maioria das imagens. Sendo substituídos por objetos, cada um tem uma aparência padrão. Dependendo do tipo de objeto e do navegador, os estilos aplicáveis são limitados. Por exemplo, a maioria dos navegadores permite um estilo limitado de widgets da interface do usuário e pseudoelementos relacionados. No caso de imagens de varredura, altura, largura, recorte e filtragem são feitos facilmente com CSS, mas não muito mais. Por outro lado, gráficos vetoriais escaláveis que usam uma linguagem de marcação baseada em XML similar a HTML são totalmente escalonáveis (a menos que contenham imagens de varredura). Eles também são totalmente personalizáveis. A capacidade de definir o estilo de um SVG incorporado a partir do CSS vinculado ao arquivo HTML que o incorpora depende de como o SVG está configurado.
Neste exemplo, os dois elementos substituídos <img> e <input> são substituídos por conteúdo não texto: uma imagem e um objeto de interface gráfica do usuário, respectivamente.
<input type="range">
<img src="switch.svg" alt="light switch">
Saída do HTML acima:
Elementos substituídos e nulos costumam ser confundidos. Os elementos nulos são todos elementos que se fecham automaticamente e são representados por uma tag. Isso significa que não existe uma tag de fechamento para um elemento vazio. Outra opção é incluir uma barra no final da tag, porque isso facilita a leitura da marcação por muitas pessoas. Continuando com esse exemplo, fechamos a tag com uma barra:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
A barra no final é "velha escola": é uma forma de indicar que o elemento fecha automaticamente e não vai haver uma tag final ou de fechamento correspondente.
Elementos nulos não podem ter conteúdo de texto ou elementos aninhados. Elementos nulos incluem <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> e <wbr>, entre outros.
A maioria dos elementos substituídos são nulos, mas não todos. Os elementos video, picture, object e iframe foram substituídos, mas não são nulos. Como todos eles podem conter outros elementos ou texto, têm uma tag de fechamento.
A maioria dos elementos vazios é substituída, mas não todos, como em base, link, param e meta. Por que ter um elemento vazio, que não pode ter conteúdo, que não é substituído e, portanto, não renderiza nada na tela? Para fornecer informações sobre o conteúdo A informação é fornecida pelos atributos dos elementos.
Atributos
Você deve ter notado que os exemplos <img> e <input> tinham mais do que apenas o tipo de elemento na tag de abertura. Esses bits extras de pares de nome/valor separados por espaços (embora, às vezes, incluir um valor seja opcional) são chamados de atributos. Os atributos são o que tornam o HTML tão eficiente. Abordaremos centenas de atributos e valores de atributos nesta série, mas discutiremos apenas o que eles são em geral e como incluí-los.
Os atributos fornecem informações sobre o elemento. O atributo, assim como o restante da tag de abertura, não será exibido no conteúdo, mas ajudará a definir como ele aparecerá para usuários com e sem visão (tecnologias assistivas e mecanismos de pesquisa).
Os atributos só aparecem na tag de abertura. A tag de abertura sempre começa com o tipo de elemento. O tipo pode ser seguido por zero ou mais atributos, separados por um ou mais espaços. A maioria dos nomes de atributos é seguida por um sinal de igual que o iguala ao valor do atributo, entre aspas de abertura e fechamento.
Neste exemplo, temos um link fixo com dois atributos. Esses dois atributos converteram o conteúdo "Registration" em um link fixo interno que rola para o atributo id="register" na guia atual do navegador quando o link é clicado, tocado ou ativado com o teclado ou outro dispositivo.
Os atributos definem o comportamento, as vinculações e a funcionalidade dos elementos. Vamos abordar mais atributos na seção Atributos desta série. Por enquanto, alguns atributos são globais, o que significa que eles podem aparecer na tag de abertura de qualquer elemento. Algumas se aplicam apenas a vários elementos, mas não a todos, e outras são específicas do elemento, relevantes apenas a um único elemento.
A maioria dos atributos são pares nome/valor. Os atributos booleanos, cujo valor é verdadeiro, falso ou igual ao nome do atributo, podem ser incluídos apenas como o atributo: o valor não é necessário.
<img src="switch.svg" alt="light switch" ismap />
Essa imagem tem três atributos: src, alt e ismap. O atributo src é usado para informar o local do recurso de imagem SVG. O atributo alt fornece um texto alternativo que descreve o conteúdo da imagem. O atributo ismap é booleano e não requer um valor. Isso é apenas para explicar o que são atributos. Vamos abordar esses atributos com mais detalhes na seção images.
Embora a citação de atributos nem sempre seja obrigatória, às vezes é. Se o valor incluir um espaço ou caracteres especiais, será necessário usar aspas. Por esse motivo, é sempre recomendável citar. Um ou mais espaços entre os atributos se o valor do atributo for citado não são realmente obrigatórios. No entanto, por segurança e para legibilidade, aspas e espaços são recomendados e apreciados.
O HTML não diferencia maiúsculas de minúsculas, mas alguns valores de atributos são. Os valores definidos na especificação são indiferentes a maiúsculas. Strings que não são definidas como palavras-chave geralmente diferenciam maiúsculas de minúsculas, incluindo os valores id e class.
Se o valor de um atributo diferencia maiúsculas de minúsculas em HTML, ele será usado como parte de um seletor de atributo em CSS e JavaScript.
Para facilitar a leitura da marcação, é recomendável, mas não obrigatório, marcar seu HTML usando letras minúsculas para todos os nomes de elementos e atributos nas tags e citar todos os valores de atributos. Se você ouvir o termo "marcação de estilo XHTML", esse e o fechamento automático de elementos vazios com uma barra no final, é o que isso significa.
Aparência dos elementos
A aparência padrão dos elementos semânticos é definida pelas folhas de estilo do user agent. A maioria dos navegadores usa folhas de estilo reais para essa finalidade, enquanto outros as simulam no código. O resultado final é o mesmo. Embora algumas restrições nas folhas de estilo do user agent sejam definidas pela especificação do HTML, os navegadores têm muita latitude, o que significa que existem algumas diferenças entre eles.
O elemento escolhido e as tags usadas precisam ser apropriados para o conteúdo exibido, já que as tags têm significado semântico. A semântica, ou role, de um elemento é importante para tecnologias adaptativas e, em alguns casos, mecanismos de pesquisa. O HTML deve ser usado para estruturar o conteúdo, não para definir a aparência dele. A aparência é o domínio do CSS. Embora muitos elementos que alteram a aparência do conteúdo, como <h1>, <strong> e <em>, tenham um significado semântico, a aparência pode e geralmente muda com os estilos de autor.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
Elemento, atributos e JavaScript
O Modelo de objeto de documento (DOM) é a representação de dados da estrutura e do conteúdo do documento HTML. À medida que o navegador analisa o HTML, ele cria um objeto JavaScript para cada elemento e seção de texto encontrado. Esses objetos são chamados de nós, nós de elemento e nós de texto, respectivamente.
Há uma interface para definir a funcionalidade de cada elemento HTML. A HTML DOM API fornece acesso e controle de cada elemento HTML pelo DOM, fornecendo interfaces para o elemento HTML e todas as classes HTML que herdam dele. A interface HTMLElement representa o elemento HTML e todos os nós descendentes. Todos os outros elementos o implementam por uma interface herdada dele. Cada interface herdada tem um construtor, métodos e propriedades. Com as propriedades HTMLElement herdadas, é possível acessar todos os atributos globais, além dos eventos input, pointer, transition e animation. Com o subtipo do elemento individual, como HTMLAnchorElement e HTMLImageElement, é possível acessar métodos e valores de atributos específicos do elemento.
Teste seu conhecimento
Teste seus conhecimentos sobre HTML
Os elementos HTML são usados para definir o estilo.
Selecione os elementos substituídos.
<img><p><ul><input>Selecione todas as afirmações verdadeiras.