Atributos HTML

Neste artigo, abordaremos os atributos HTML mais comuns e como usá-los.

Os atributos HTML são usados ​​para fornecer informações adicionais sobre os elementos HTML.

Por favor, tenha em mente os seguintes pontos:

  • Qualquer elemento HTML pode conter atributos.
  • Os atributos podem ser utilizados para caracterizar ainda mais os elementos.
  • Uma tag de abertura deve sempre definir atributos.
  • Quando name=”value” é operado, o nome e o valor geralmente são emparelhados em conjunto.
Índice-

Atributo de ID HTML

O atributo ID é usado para atribuir um identificador exclusivo a um elemento HTML.

Esse identificador pode ser usado para direcionar o elemento com CSS ou JavaScript.

Aqui está um exemplo:

<div id="mrexamples">This div has the ID "mrexamples".</div>

Atributo Html href

O atributo href é usado para especificar a URL de um hiperlink.

Os hiperlinks são determinados utilizando a tag <a> .

Operando o atributo href, você pode especificar a URL da página onde o link indica nos atributos HTML :

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<a href="https://mrexamples.com">Open Mr Example</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nosso capítulo Links HTML fornece mais informações sobre links.

Atributo src HTML

O atributo Html src é usado para especificar a URL de um recurso externo, como uma imagem ou arquivo de script.

Para incluir uma imagem em um documento HTML , o <img>elemento deve ser usado primeiro.

O srcelemento é usado para fornecer o caminho completo da imagem que será exibida nos atributos html :

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nos atributos html a URL pode ser especificada na propriedade src de duas formas:

1. URL absoluta – O link leva o visitante a outro site onde existe uma imagem externa disponível para visualização.

Link de exemplo: src=”https://mrexamples.com/images/img_girl.jpg”.

Observação: os direitos autorais podem ser aplicados a fotos externas. Você pode estar infringindo leis de direitos autorais se usá-lo sem autorização. Além disso, você não tem controle sobre as fotos externas; eles podem ser modificados ou retirados a qualquer momento.

2. URL relativo –

Contém um link para uma imagem que está hospedada no próprio site. Os nomes de domínio não estão incluídos neste URL. É relativo à página atual se o URL começar sem uma barra “ / ”.

Exemplo: src=”img_girl.jpg”.

URLs que começam com uma barra são relativos ao seu domínio. Um exemplo seria src=”/images/img_girl.jpg”.

Use URLs relativos quase sempre para obter os melhores resultados. Se você trocar de domínio, eles não vão parar de funcionar.

Atributos de largura e altura

Os elementos largura e altura de uma tag <img> de imagem são usados ​​para indicar as dimensões físicas da imagem, que devem ser selecionadas em pixels ( px ).

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" width="400" height="650">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O Atributo Alt

Se uma imagem não puder ser exibida devido a um link quebrado, conexão de internet lenta ou um erro no atributo src , o atributo alt especifica um texto alternativo.

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Girl with a jacket">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

As an example, let’s try to display an image that doesn’t exist:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_typo.jpg" alt="Girl with a jacket">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Dica: você aprenderá mais sobre imagens em nosso capítulo Imagens HTML .

O atributo de estilo

Estilos, como cor, fonte, tamanho e mais, são adicionados a um elemento com o atributo style.

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Recomendação: você pode aprender mais sobre estilos na página Estilos HTML do nosso guia.

O atributo lang

A propriedade lang dentro do elemento <html> é necessária para indicar o idioma da página da Web. A intenção disso é ajudar navegadores e mecanismos de pesquisa.

Como exemplo, vamos usar o inglês como idioma:

Example

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="en">
<body>
…
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O atributo lang também pode incluir códigos de país. Portanto, o idioma da página HTML é especificado pelos dois primeiros caracteres, enquanto o país é definido pelos dois últimos caracteres.

Aqui está um exemplo usando o inglês como idioma e os Estados Unidos como país:

< !DOCTYPE html >
< html lang =”en-US” >
< body >
…
< /body >
< /html >

Aqui está uma lista de todos os códigos de idioma em HTML.

O atributo do título

O titleatributo define algumas informações extras sobre um elemento no que diz respeito aos atributos HTML .

O valor do atributo title será exibido como uma dica de ferramenta quando você passar o mouse sobre o elemento:

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<p title="I'm a tooltip">This is a paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Recomendação : Use atributos em letras minúsculas e sempre cite os valores dos atributos sempre que possível.

Os nomes dos atributos não precisam estar em letras minúsculas ou exigir aspas de acordo com o padrão HTML. Assim como title e TITLE, o atributo title pode ser escrito em letras maiúsculas ou minúsculas quando se trata de atributos HTML .

Para tipos de documentos mais rígidos, como XHTML , Mr. Example s recomenda atributos em minúsculas e aspas.

Bom:

<!DOCTYPE html>
<html>
<corpo>

< a href ="https://mrexamples.com/html/" > Tutorial Mr Example HTML < /a >

</body>
</html>

Ruim:

<!DOCTYPE html>
<html>
<corpo>

< a href =https://mrexamples.com/html/ > Tutorial Mr Example HTML < /a >

</body>
</html>

Citações às vezes são necessárias. Um espaço impedirá que este exemplo exiba o atributo title corretamente:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p title="About" mr examples>
</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aspas Simples ou Duplas?

Os atributos HTML são geralmente colocados entre aspas duplas, mas aspas simples também podem ser usadas.

Às vezes é necessário usar aspas simples quando o valor do atributo contém aspas duplas quando se trata de atributos HTML :

<!DOCTYPE html>
<html>
<corpo>

< p title ='Elon Musk “mata” doge' >

</body>
</html>

Alternativamente, você pode fazer o oposto:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p title="Elon Musk 'kill' doge">
</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

Os atributos HTML fornecem informações adicionais sobre elementos HTML, permitindo que você controle a aparência, o comportamento e a função de suas páginas da web.

Compreendendo a finalidade e a função de cada atributo HTML, você pode criar páginas da Web bonitas e funcionais, fáceis de navegar e usar.

Por favor, deixe sua valiosa resposta como uma reação a este artigo para melhorar ou manter a qualidade do conteúdo deste site.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.