Atributos HTML
Os atributos HTML fornecem informações adicionais sobre elementos HTML.
Atributos HTML
- Todos os elementos HTML podem ter atributos
- Os atributos fornecem informações adicionais sobre os elementos
- Os atributos são sempre especificados na tag inicial
- Os atributos geralmente vêm em pares nome/valor como: name="value"
O atributo href
A <a>tag define um hiperlink. O
hrefatributo especifica o URL da página para a qual o link vai:
Exemplo
<a href="https://www.w3schools.com">Visit W3Schools</a>
Você aprenderá mais sobre links em nosso capítulo Links HTML .
O atributo src
A <img>tag é usada para incorporar uma imagem em uma página HTML. O srcatributo especifica o caminho para a imagem a ser exibida:
Exemplo
<img src="img_girl.jpg">
Há duas maneiras de especificar o URL no src
atributo:
1. URL absoluto - Links para uma imagem externa hospedada em outro site. Exemplo: src="https://www.w3schools.com/images/img_girl.jpg" .
Notas: Imagens externas podem estar sob direitos autorais. Se você não obtiver permissão para usá-lo, poderá estar violando as leis de direitos autorais. Além disso, você não pode controlar imagens externas; ele pode ser removido ou alterado de repente.
2. URL Relativo - Links para uma imagem que está hospedada no site. Aqui, o URL não inclui o nome de domínio. Se a URL começar sem uma barra, ela será relativa à página atual. Exemplo: src="img_girl.jpg". Se o URL começar com uma barra, será relativo ao domínio. Exemplo: src="/images/img_girl.jpg".
Dica: quase sempre é melhor usar URLs relativos. Eles não vão quebrar se você mudar de domínio.
Atributos de largura e altura
A <img>tag também deve conter os
atributos widthe
height, que especificam a largura e a altura da imagem (em pixels):
Exemplo
<img src="img_girl.jpg" width="500" height="600">
O atributo alt
O altatributo obrigatório para a <img>
tag especifica um texto alternativo para uma imagem, se a imagem por algum motivo não puder ser exibida. Isso pode ser devido a uma conexão lenta, um erro no srcatributo ou se o usuário usar um leitor de tela.
Exemplo
<img src="img_girl.jpg" alt="Girl
with a jacket">
Exemplo
Veja o que acontece se tentarmos exibir uma imagem que não existe:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Você aprenderá mais sobre imagens em nosso capítulo Imagens HTML .
O atributo de estilo
O styleatributo é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e muito mais.
Exemplo
<p style="color:red;">This is a red paragraph.</p>
Você aprenderá mais sobre estilos em nosso capítulo Estilos HTML .
O atributo lang
Você deve sempre incluir o langatributo dentro da <html>tag, para declarar o idioma da página da Web. Isto destina-se a ajudar os motores de busca e navegadores.
O exemplo a seguir especifica o inglês como o idioma:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Os códigos de país também podem ser adicionados ao código de idioma no lang
atributo. Assim, os dois primeiros caracteres definem o idioma da página HTML e os dois últimos caracteres definem o país.
O exemplo a seguir especifica inglês como idioma e Estados Unidos como país:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Você pode ver todos os códigos de idioma em nossa Referência de código de idioma HTML .
O atributo título
O titleatributo define algumas informações extras sobre um elemento.
O valor do atributo title será exibido como uma dica de ferramenta quando você passar o mouse sobre o elemento:
Exemplo
<p title="I'm a tooltip">This is a paragraph.</p>
Sugerimos: Sempre use atributos em minúsculas
O padrão HTML não requer nomes de atributos em letras minúsculas.
O atributo title (e todos os outros atributos) pode ser escrito com letras maiúsculas ou minúsculas como title ou TITLE .
No entanto, o W3C recomenda atributos em minúsculas em HTML e exige atributos em minúsculas para tipos de documentos mais rígidos, como XHTML.
No W3Schools, sempre usamos nomes de atributos em letras minúsculas.
Sugerimos: Sempre cite os valores dos atributos
O padrão HTML não exige aspas em torno dos valores de atributo.
No entanto, o W3C recomenda cotações em HTML e exige cotações para tipos de documentos mais rígidos, como XHTML.
Boa:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Ruim:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Às vezes você tem que usar aspas. Este exemplo não exibirá o atributo title corretamente, pois contém um espaço:
Exemplo
<p
title=About W3Schools>
Na W3Schools sempre usamos aspas em torno dos valores dos atributos.
Citações simples ou duplas?
Aspas duplas em torno de valores de atributo são as mais comuns em HTML, mas aspas simples também podem ser usadas.
Em algumas situações, quando o próprio valor do atributo contém aspas duplas, é 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
hrefatributo de<a>especifica o URL da página para a qual o link vai - O
srcatributo de<img>especifica o caminho para a imagem a ser exibida - Os atributos
widthe fornecem informações de tamanho para imagensheight<img> - O
altatributo of<img>fornece um texto alternativo para uma imagem - O
styleatributo é usado para adicionar estilos a um elemento, como cor, fonte, tamanho e mais - O
langatributo da<html>tag declara o idioma da página da Web - O
titleatributo define algumas informações extras sobre um elemento
Exercícios HTML
Referência de atributo HTML
Uma lista completa de todos os atributos para cada elemento HTML está listada em: HTML Attribute Reference .