HTML Para iniciantes – Elementos HTML – Aula 4

O HTML consiste em uma série de elementos que você usa para delimitar e marcar o conteúdo do seu site, usar os elementos de forma correta é muito importante, tanto para mostrar seu conteúdo correto para o usuário, e para que os motores de busca consigam ler seu site corretamente.

Abaixo vamos listar os elementos mais importantes do HTML.

<img class="lazy" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="imagens/cupcom.png" alt="Minha primeira imagem">

O primeiro elemento que vamos aprender é o <img>, com ele é possível incorporar imagens em qualquer arquivo HTML.

Observando o exemplo acima podemos notar que possui o elemento scr=”” dentro desse elemento colocamos o caminho da imagem.

Também foi adicionado o atributo alt=”” onde colocamos uma descrição dessa imagem, essa descrição precisa ser detalhando informando tudo que existe na imagem, para que pessoas com deficiência visual possam saber o que existe naquela imagem.

Esse atributo é essencial para melhorar a acessibilidade da sua página.

Os elementos de cabeçalho servem para especificar que certas parte do seu conteúdo são títulos e subtítulos.

Pense em um livro, o capitulo principal sempre possui um título mais forte e dentro desse capitulo existem vários subtitulos.

O HTML é formatado da mesma forma, ele contém 6 níveis de títulos

<h1><h2><h3><h4><h5><h6>

Sendo que o <h1> é o mais forte deles, e o <h6> o mais fraco. Em cada página do seu HTML devemos adicionar apenas um título <h1> de acordo com algumas especificações de SEO.

O elemento de paragrafo é um dos mais usados no HTML, ele é representado pela tag <p>

<p>Meu primeiro paragrafo</p>

O HTML possui um elemento especial para criação de listas, os tipos mais comuns de listas são ordenadas e não ordenadas.

Listas ordenadas: são listas onde os itens possui uma ordem, como uma receita, essa lista é envolvida pelo elemento <ol>

Listas não ordenadas: são listas onde a ordem dos conteúdos não importam, geralmente usada na criação de menus, essa lista é envolvida pelo elemento <ul>

Cada item inserido dentro da lista é envolvido pelo elemento <li> que é o item da lista.

Exemplo de lista ordenada:

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

Exemplo de lista não ordenanda:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Um dos elementos mais importantes do HTML, com ele você consegue ir de um lado para outro na internet, adicionando menus, botões e ancoras em seu site.

O link é representado pelo elemento <a>

Para criar um link você precisa primeiro escolher um texto para seu link:

<a>Meu primeiro link</a>

Em seguida você precisa adicionar o elemento href=”” que fará o direcionamento do seu link.

<a href="">Meu primeiro link</a>

Dentro do href=”” adicione a url que você quer direcionar seu link.

<a href="https://www.cupcom.com.br">Meu primeiro link</a>

O link pode ser uma url como no exemplo acima ou um arquivo html do seu site, como no exemplo abaixo.

<a href="contato.html" class="broken_link">Meu primeiro link</a>