Curso de TI HTML Básico 010_Elementos, Atributos

Elementos

Tag de Abertura	Conteúdo do Elemento	Tag de Fechamento
`<h1>`	Este é um título	`</h1>`
`<p>`	Este é um parágrafo	`</p>`
`<a href="https://www.zhaojian.net/" title="Link">`	Este é um link	`</a>`
`<img src="/images/logo.png" alt="Esta é uma imagem">`	Esta é uma imagem
`<br>`	Quebra de linha

1
<!DOCTYPE html>
2
<html lang="en">
3

4
    <head>
5
        <meta charset="UTF-8" />
6
        <title>hello HTML</title>
7
    </head>
8

9
    <body>
10
        <h1>Este é um título</h1>
11
        <p>
12
            Este é um parágrafo<br>
13
            <a href="https://www.zhaojian.net/" title="Link">Este é um link</a>
14
        </p>
15
        <img src="/images/logo.png" alt="Esta é uma imagem" />
16
        <br />
17
    </body>
18

19
</html>

[!Resumo]

Elementos HTML começam com uma tag de abertura e terminam com uma tag de fechamento

O conteúdo de um elemento HTML é o conteúdo entre a tag de abertura e a tag de fechamento

Alguns elementos HTML possuem conteúdo vazio (empty content), esses elementos sem conteúdo e sem tag de fechamento são chamados de tags vazias ou elementos vazios, para implementar funcionalidades específicas mantendo simplicidade e flexibilidade, como: <br>, <hr>, <img>, <meta>, <input>, etc.

A maioria dos elementos HTML pode ter atributos

Elementos HTML são comumente chamados de tags HTML (HTML tag)

Elementos HTML geralmente aparecem em pares, por exemplo <p> e </p>

Elementos HTML podem conter outras tags HTML aninhadas

Elementos HTML não diferenciam maiúsculas de minúsculas, mas é recomendado usar minúsculas

Atributos

Elementos HTML podem ter atributos (Attribute), que fornecem mais informações sobre o elemento ou definem certos comportamentos do elemento. Os atributos são sempre definidos na tag de abertura, geralmente na forma “nome_atributo=valor_atributo”. Por exemplo, o elemento de link (a) pode usar o atributo href para especificar o endereço de destino do link:

Exemplo:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Resultado:

Resultado do exemplo

No código acima, o valor do atributo href do elemento a é "https://www.zhaojian.net", o que significa que quando o link é clicado, o navegador irá para essa URL.

Atributos comuns:

id: Fornece um identificador único para o elemento.
class: Fornece um ou mais nomes de classe para o elemento, diferentes elementos podem ter o mesmo nome de classe.
style: Fornece estilo inline para o elemento.
title: Adiciona conteúdo de título ao elemento de link.
alt: Adiciona conteúdo descritivo ao elemento de imagem.

[!Resumo]

Os atributos sempre aparecem na forma de pares nome=valor, por exemplo: name="value".

Entre o atributo e o nome do elemento (ou o atributo anterior, se houver mais de um atributo) deve haver um espaço para separação.

Os valores dos atributos devem sempre estar entre aspas, aspas duplas são as mais comuns, mas usar aspas simples também não há problema.

Os atributos e valores de atributos não diferenciam maiúsculas de minúsculas, mas é recomendado usar minúsculas.

Elementos

Atributos

Comentários