2.1 Introdução às tags

HTML-documentsA marcação é baseada em tags . O que é uma etiqueta ?

As tags foram inventadas nos anos 70 para que as pessoas pudessem adicionar informações de serviço a documentos para programas que processam esses documentos.

Tag- esta é uma palavra-chave (funcional), na maioria das vezes em inglês, que foi enquadrada entre colchetes angulares (mais e menos caracteres) para que os programas não confundam tags e palavras comuns em inglês.

A etiqueta também pode conter várias informações de serviço que podem ser úteis para o programa que processa o documento.

Exemplo de texto com uma tag:

<a href="http://codegym.cc/about">
    Link to something interesting
</a>

Neste exemplo, vemos o texto, a tag "a", bem como as informações do serviço - os atributos da tag. Abaixo você aprenderá mais sobre eles.

2.2 Tipos de tags: abertura, fechamento, tag vazia

As tags são de tipos diferentes. Primeiro, eles são simples e duplos. As mais comuns são tags emparelhadas . E como você provavelmente já adivinhou, eles sempre andam em pares. Eles também são chamados de abertura e fechamento.

A tag de abertura é apenas uma palavra-chave entre colchetes. Exemplo:

<h1>

A tag de fechamento é semelhante à tag de abertura, mas a palavra-chave é precedida por uma barra. Exemplo:

</h1>

A tag de abertura pode conter informações de serviço - atributos, a de fechamento - não . A marca de início é sempre a primeira de um par. A tag de fechamento NÃO pode ir primeiro no texto e depois a tag de abertura. Isso HTML-documentnão será válido.

As tags únicas não possuem uma tag de fechamento. A lista dessas tags é definida por HTML-standard. Exemplos de tais tags:

  • <br>- quebra de linha;
  • <img>- foto.

A propósito, uma tag emparelhada, se não contiver informações internas, pode ser escrita de forma abreviada . Exemplo:

<h1/>

Esta não é uma tag única, mas uma tag de par vazia. É como tags fechadas e abertas ao mesmo tempo. Difere da tag fechada porque a barra está no final (antes do segundo colchete triangular).

2.3 Árvore de tags

E informações mais importantes sobre tags emparelhadas. Pode haver muitos deles em um documento e eles podem ser aninhados. O que isso significa? Isso significa que qualquer texto HTML-documentpode ser enquadrado (envolvido) com tags, mesmo que contenha outras tags. Exemplo:

<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text
</html>

Grosso modo, uma sequência de tags pode ocorrer no texto html:

<h1> <h2> </h2> </h1>

Mas não pode ser:

<h1> <h2> </h1> </h2>

Se a tag inicial <h2>estiver dentro de um <h1>par -tag, sua tag final correspondente </h2>também deverá estar dentro de um <h1>par -tag.

Assim, todas as tags do documento formam uma espécie de árvore de tags . Primeiro vem a tag de nível superior que envolve todo o documento, geralmente chamada <html>, ela tem pares de tags filhas, elas têm as suas próprias e assim por diante.

Na verdade, o programa que processa um documento com tags o vê exatamente assim - como uma árvore de tags com algum texto dentro.

2.4 Atributos

As informações sobre tags não seriam completas se não falássemos sobre atributos. Tags únicas e tags iniciais de tags pareadas podem ter . Esses atributos contêm informações úteis sobre o conteúdo da tag.

Uma tag pode conter vários atributos, e eles têm a seguinte forma geral:

<tag name1="value1" name2="value2">

Cada atributo é especificado como um par de Namee meaning. Pode haver qualquer número de atributos.

«<»Mas um programador experiente fará imediatamente a pergunta: o que fazer se você precisar usar texto contendo caracteres ou «>»aspas como um valor de atributo ?

Nome do símbolo Símbolo entrada HTML
aspas duplas " "
E comercial & &
símbolo menor que < <
Mais símbolo > >
Espaço  
citação única ' '