Como adicionar um atributo a uma tag HTML

A linguagem HTML inclui vários elementos. Isso inclui componentes de site comumente usados, como parágrafos, cabeçalhos, links e imagens. Existem também vários elementos mais novos que foram introduzidos com o HTML5, incluindo cabeçalho, navegação, rodapé e muito mais. Todos esses elementos HTML são usados ​​para criar a estrutura de um documento e dar-lhe significado. Para adicionar ainda mais significado aos elementos, você pode atribuir atributos a eles. Uma tag de abertura HTML básica começa com o caractere <. Isso é seguido pelo nome da tag e, finalmente, você completa a tag com o caractere>. Por exemplo, a tag de parágrafo de abertura seria escrita assim:

Para adicionar um atributo à sua tag HTML, primeiro coloque um espaço após o nome da tag (neste caso, é o “p”). Em seguida, você adicionaria o nome do atributo que deseja usar seguido por um sinal de igual. Finalmente, o valor do atributo seria colocado entre aspas. Por exemplo:

As tags podem ter vários atributos. Você separaria cada atributo dos outros com um espaço.

Elementos com atributos necessários

Alguns elementos HTML realmente requerem atributos se você quiser que funcionem conforme o esperado. O elemento de imagem e o elemento de link são dois exemplos disso. O elemento de imagem requer o atributo “src”. Esse atributo informa ao navegador qual imagem você deseja usar naquele local. O valor do atributo seria um caminho de arquivo para a imagem.

Você notará que adicionamos outro atributo a este elemento, o “alt” ou atributo de texto alternativo. Este não é tecnicamente um atributo obrigatório para imagens, mas é uma prática recomendada sempre incluir esse conteúdo para acessibilidade. O texto listado no valor do atributo alt é o que será exibido se uma imagem falhar ao carregar por algum motivo. Outro elemento que requer atributos específicos é a âncora ou tag do link. Este elemento deve incluir o atributo “href”, que significa ‘referência de hipertexto “. Essa é uma maneira elegante de dizer” para onde este link deve ir. “Assim como o elemento de imagem precisa saber qual imagem carregar, a tag do link deve saiba onde ele deve ir. Esta é a aparência de uma tag de link:

Esse link agora levaria uma pessoa ao site especificado no valor de um atributo. Nesse caso, é a página principal do Dotdash.

Atributos como ganchos CSS

Outro uso de atributos é quando eles são usados ​​como “ganchos” para estilos CSS. Como os padrões da web ditam que você deve manter a estrutura da página (HTML) separada de seus estilos (CSS), você usa esses ganchos de atributo no CSS para ditar como a página estruturada será exibida no navegador da web. Por exemplo, você pode ter esse pedaço de marcação em seu documento HTML.

Se você quiser que a divisão tenha uma cor de fundo preta (# 000) e um tamanho de fonte de 1,5em, você deve adicionar isso ao seu CSS: .featured {background-color: # 000; tamanho da fonte: 1,5em;}