HTML - Atributos

Vimos algumas tags HTML e seu uso como tags de título <h1>, <h2>, tag de parágrafo <p>e outras tags. Nós os usamos até agora em sua forma mais simples, mas a maioria das tags HTML também pode ter atributos, que são bits extras de informação.

Um atributo é usado para definir as características de um elemento HTML e é colocado dentro da tag de abertura do elemento. Todos os atributos são compostos de duas partes - umname e um value

o nameé a propriedade que você deseja definir. Por exemplo, o parágrafo<p> elemento no exemplo carrega um atributo cujo nome é align, que você pode usar para indicar o alinhamento do parágrafo na página.
o valueé o que você deseja que o valor da propriedade seja definido e sempre colocado entre aspas. O exemplo abaixo mostra três valores possíveis do atributo de alinhamento: left, center e right.

Nomes e valores de atributos não diferenciam maiúsculas de minúsculas. No entanto, o World Wide Web Consortium (W3C) recomenda atributos / valores de atributos em letras minúsculas em sua recomendação HTML 4.

Exemplo

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Isso exibirá o seguinte resultado -

Atributos principais

Os quatro atributos principais que podem ser usados na maioria dos elementos HTML (embora não todos) são -

Id
Title
Class
Style

O Atributo Id

o idO atributo de uma tag HTML pode ser usado para identificar exclusivamente qualquer elemento em uma página HTML. Existem duas razões principais pelas quais você pode querer usar um atributo id em um elemento -

Se um elemento carrega um atributo id como um identificador único, é possível identificar apenas esse elemento e seu conteúdo.
Se você tiver dois elementos com o mesmo nome em uma página da Web (ou folha de estilo), poderá usar o atributo id para distinguir entre os elementos que têm o mesmo nome.

Discutiremos a folha de estilo em um tutorial separado. Por enquanto, vamos usar o atributo id para distinguir entre dois elementos de parágrafo, conforme mostrado abaixo.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

O título Atributo

o titleatributo fornece um título sugerido para o elemento. Eles sintaxe para otitle atributo é semelhante conforme explicado para id atributo -

O comportamento desse atributo dependerá do elemento que o carrega, embora seja freqüentemente exibido como uma dica de ferramenta quando o cursor passa sobre o elemento ou enquanto o elemento está carregando.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Agora tente colocar o cursor sobre "Exemplo de tag de título com título" e você verá que qualquer título usado em seu código está saindo como uma dica de ferramenta do cursor.

O atributo de classe

o classatributo é usado para associar um elemento a uma folha de estilo e especifica a classe do elemento. Você aprenderá mais sobre o uso do atributo class quando aprender a Cascading Style Sheet (CSS). Então, por enquanto, você pode evitá-lo.

O valor do atributo também pode ser uma lista separada por espaços de nomes de classes. Por exemplo -

class = "className1 className2 className3"

O atributo de estilo

O atributo style permite que você especifique regras de Cascading Style Sheet (CSS) dentro do elemento.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Isso produzirá o seguinte resultado -

No momento, não estamos aprendendo CSS, então vamos prosseguir sem nos preocupar muito com CSS. Aqui, você precisa entender o que são atributos HTML e como eles podem ser usados durante a formatação do conteúdo.

Atributos de internacionalização

Existem três atributos de internacionalização, que estão disponíveis para a maioria (embora não todos) dos elementos XHTML.

dir
lang
xml:lang

O Atributo dir

o diratributo permite que você indique ao navegador sobre a direção em que o texto deve fluir. O atributo dir pode assumir um de dois valores, como você pode ver na tabela a seguir -

Valor	Significado
ltr	Da esquerda para a direita (o valor padrão)
rtl	Da direita para a esquerda (para idiomas como hebraico ou árabe, lidos da direita para a esquerda)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Isso produzirá o seguinte resultado -

Quando o atributo dir é usado na tag <html>, ele determina como o texto será apresentado em todo o documento. Quando usado em outra tag, ele controla a direção do texto apenas para o conteúdo dessa tag.

O atributo lang

o langatributo permite que você indique o idioma principal usado em um documento, mas esse atributo foi mantido em HTML apenas para compatibilidade com versões anteriores de HTML. Este atributo foi substituído peloxml:lang atributo em novos documentos XHTML.

Os valores do atributo lang são códigos de idioma de dois caracteres do padrão ISO-639. VerificaHTML Language Codes: ISO 639 para obter uma lista completa de códigos de idioma.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Isso produzirá o seguinte resultado -

O atributo xml: lang

O atributo xml: lang é o substituto do XHTML para o atributo lang . O valor do atributo xml: lang deve ser um código de país ISO-639, conforme mencionado na seção anterior.

Atributos Genéricos

Aqui está uma tabela de alguns outros atributos que são prontamente utilizáveis com muitas das tags HTML.

Atributo	Opções	Função
alinhar	direita, esquerda, centro	Alinha tags horizontalmente
valign	topo, meio, fundo	Alinha tags verticalmente em um elemento HTML.
bgcolor	valores numéricos, hexadecimais, RGB	Coloca uma cor de fundo atrás de um elemento
fundo	URL	Coloca uma imagem de fundo atrás de um elemento
Eu iria	Usuário definido	Nomeia um elemento para uso com folhas de estilo em cascata.
classe	Usuário definido	Classifica um elemento para uso com folhas de estilo em cascata.
largura	Valor numérico	Especifica a largura das tabelas, imagens ou células da tabela.
altura	Valor numérico	Especifica a altura das tabelas, imagens ou células da tabela.
título	Usuário definido	Título "Pop-up" dos elementos.

Veremos exemplos relacionados conforme continuaremos a estudar outras tags HTML. Para obter uma lista completa de tags HTML e atributos relacionados, verifique a referência à lista de tags HTML .