tutoriais mais recente desenvolvimento web

Atributos HTML


Atributos fornecem informações adicionais sobre os elementos HTML.

Um atributo HTML é um modificador de um tipo de elemento HTML. Um atributo quer modifica a funcionalidade padrão de um tipo de elemento ou fornece funcionalidade para certos tipos de elementos incapazes de funcionar corretamente sem eles. Na sintaxe HTML, um atributo é adicionado a uma marca de início HTML.


Atributos HTML

  • Elementos HTML pode ter attributes
  • Os atributos fornecem additional information sobre um elemento
  • Os atributos são sempre especificados na the start tag
  • Atributos vêm em pares nome / valor como: name="value"

Descrição

atributos HTML geralmente aparecem como pares nome-valor, separadas por =, e são escritos dentro da tag de início de um elemento, após o nome do elemento:

<tag attribute="value">content to be modified by the tag</tag>

Onde nomes de tags do tipo de elemento HTML e atributo é o nome do atributo, definido com o valor fornecido. O valor pode estar entre aspas simples ou duplas, embora valores que consistem em determinados caracteres podem ser deixados sem aspas em HTML (mas não XHTML) .Leaving valores de atributo sem aspas é considerado inseguro.

Embora a maioria dos atributos são fornecidos como nomes e valores emparelhados, alguns afetam o elemento simplesmente pela sua presença na marca de início do elemento (como o atributo ismap para o elemento img).

A maioria dos elementos pode tomar qualquer um dos vários atributos comuns:

O atributo id fornece um identificador exclusivo abrange todo o documento para um element.This pode ser usado como seletor CSS para fornecer propriedades de apresentação, pelos navegadores chamar a atenção para o elemento específico, ou por scripts para alterar o conteúdo ou a apresentação de um elemento. Anexado ao URL da página, o URL visa diretamente o elemento específico dentro do documento, tipicamente uma sub-seção da página. Por exemplo, o ID "Atributos".

O atributo de classe proporciona um modo de classificar elementos semelhantes. Isso pode ser usado para fins semânticos, ou para fins de apresentação. Semanticamente, por exemplo, as classes são utilizados em microformatos. Presentationally, por exemplo, um documento HTML pode usar a classe designação = "notação" para indicar que todos os elementos com este valor de classe são subordinados ao texto principal do documento. Tais elementos podem ser reunidos e apresentados como notas de rodapé em uma página em vez de aparecer no lugar onde elas ocorrem em HTML. Outro uso apresentação seria como um seletor CSS.

Um autor pode utilizar os códigos não-attributal estilo propriedades de apresentação a um elemento particular. É considerado melhor prática para usar id ou classe de um elemento atributos para selecionar o elemento com uma folha de estilo, embora às vezes isso pode ser demasiado pesado para um simples e específico ou aplicação ad hoc de propriedades de estilo.

O atributo title é utilizado para anexar explicação subtextual a um elemento. Na maioria dos navegadores este atributo é apresentado como o que é muitas vezes referida como uma dica.

O elemento de abreviatura, abreviatura, pode ser utilizado para demonstrar estes vários atributos:

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

Este exemplo exibe como HTML; na maioria dos navegadores, apontando o cursor no abreviatura deve exibir o texto do título "Hypertext Markup Language".

A maioria dos elementos também tomar a linguagem-relacionado atributos lang e dir.


O lang Atributo

O idioma do documento pode ser declarada no <html> tag.

A linguagem é declarada no lang atributo.

Declarando uma língua é importante para aplicativos de acessibilidade (screen readers) e motores de busca:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

As duas primeiras letras especificar o idioma (en) . Se houver um dialeto, usar mais duas cartas (US) .


O title Atributo

Parágrafos HTML são definidos com o <p> tag.

Neste exemplo, o <p> elemento tem um atributo título. O valor do atributo é " About w3im " :

Exemplo

<p title="About w3ii">
w3ii is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Tente você mesmo "

Quando você move o mouse sobre o elemento, o título será exibido como uma dica.


O href Atributo

Links HTML são definidas com a <a> tag. O endereço do link é especificado no href atributo:

Exemplo

<a href="http://www.w3ii.com">This is a link</a>
Tente você mesmo "

Você vai aprender mais sobre links e o <a> tag posteriormente neste tutorial.


atributos de tamanho

Imagens HTML são definidos com o <img> tag.

O nome do ficheiro da fonte ( src ) , e o tamanho da imagem ( width e height ) são fornecidos como atributos:

Exemplo

<img src="w3ii.jpg" width="104" height="142">
Tente você mesmo "

O tamanho da imagem é especificado em pixels: width = "104" significa 104 de tela pixels de largura.

Você vai aprender mais sobre as imagens e o <img> tag posteriormente neste tutorial.


O alt atributo

O alt atributo especifica um texto alternativo para ser usado, quando um elemento HTML não pode ser exibida.

O valor do atributo pode ser lido por "screen readers" . Desta forma, alguém "listening" para a página da Web, ou seja, uma pessoa cega, pode "hear" o elemento.

Exemplo

<img src="w3ii.jpg" alt="w3ii.com" width="104" height="142">
Tente você mesmo "

Sugerimos: Sempre Use minúsculas Atributos

O padrão HTML5 não requer nomes de atributos em minúsculas.

A title atributo pode ser escrito com letra maiúscula, ou inferior, como Title e / ou TITLE .

W3C recomenda minúsculas em HTML4 e exige minúsculas para tipos de documentos mais rigorosas, como XHTML.

minúsculas é o mais comum. minúsculas é mais fácil de digitar.
No w3ii nós sempre usar minúsculas nomes de atributos.


Sugerimos: Citar Sempre Valores de Atributo

O padrão HTML5 não requer aspas em torno valores de atributos.

O href atributo, demonstrado acima, pode ser escrita como:

Exemplo

<a href=http://www.w3ii.com>
Tente você mesmo "

W3C recommends citações em HTML4 e exige aspas para tipos de documentos mais rigorosas, como XHTML.

Às vezes é necessário o uso de aspas. Esta não serão exibidos corretamente, porque ele contém um espaço:

Exemplo

<p title=About w3ii>
Tente você mesmo "

Usando citações são as mais comuns. citações omitindo pode produzir erros.
No w3ii nós sempre usar aspas em torno de valores de atributos.


Aspas simples ou duplas?

citações estilo duplas são as mais comuns em HTML, mas o estilo único também pode ser usado.

Em algumas situações, quando o próprio valor do atributo contém aspas, é necessário usar aspas simples:

<p title='John "ShotGun" Nelson'>

Ou vice-versa:

<p title="John 'ShotGun' Nelson">

Resumo do capítulo

  • Todos os elementos HTML podem ter atributos
  • O HTML title atributo fornece adicional "tool-tip" informações
  • O HTML href atributo fornece informações de endereço para links
  • As HTML width e height atributos fornecer informações de tamanho para imagens
  • O HTML alt atributo fornece texto para leitores de tela
  • No w3ii nós sempre usar lowercase HTML nomes de atributos
  • No w3ii sempre quote atributos com aspas duplas

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »


Atributos HTML

Abaixo está uma lista alfabética de alguns atributos frequentemente utilizados em HTML:

Atributo Descrição
alt Especifica um texto alternativo para uma imagem
disabled Especifica que um elemento de entrada deve ser desativado
href Especifica a URL (web address) para um link
id Especifica uma identificação única para um elemento
src Especifica a URL (web address) para uma imagem
style Especifica um estilo CSS em linha para um elemento
title Especifica informação extra sobre um elemento (displayed as a tool tip)

Uma lista completa de todos os atributos para cada elemento HTML, está listado na nossa: HTML Tag Referência .