A linguagem HTML inclui vários elementos. Estes incluem comumente usados componentes do site 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 com o caractere>. Por exemplo, a tag do parágrafo de abertura seria escrita assim:
Para adicionar um atributo ao seu Tag HTML, você primeiro coloca 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. Por exemplo:
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 um imagem falha ao carregar por algum motivo.
Outro elemento que requer atributos específicos é a tag âncora ou link. Este elemento deve incluir o atributo "href", que significa 'referência de hipertexto ". Essa é uma maneira elegante de dizer" onde este link deve ir. "Assim como o elemento de imagem precisa saber qual imagem carregar, a tag do link deve saber onde ela deve estar para. 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. Porque os padrões da web determinam que você deve manter a estrutura da sua 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 na web navegador. Por exemplo, você pode ter esse pedaço de marcação em seu documento HTML.
Se você quiser que essa divisão tenha uma cor de fundo preta (# 000) e um tamanho de fonte de 1,5em, adicione isso ao seu CSS:
.featured {background-color: # 000; tamanho da fonte: 1,5em;}
O atributo de classe "destaque" atua como um gancho que usamos no CSS para aplicar estilos a essa área. Também poderíamos usar um atributo ID aqui, se quiséssemos. Ambas as classes e IDs são atributos universais, o que significa que podem ser adicionados a qualquer elemento. Eles também podem ser direcionados a estilos CSS específicos para determinar a aparência visual desse elemento.
Sobre Javascript
Finalmente, usar atributos em certos elementos HTML também é algo que você pode usar em Javascript. Se você tiver um script que está procurando um elemento com um atributo de ID específico, esse é mais um uso dessa parte comum da linguagem HTML.