viajando no básico do HTML: tags e atributos

O HTML, linguagem de marcação de texto, é o que utilizamos para marcar o conteúdo da web, imagens e textos são um exemplo do que podemos marcar com ele. Hoje vamos conhecer um pouco sobre suas estruturas, começando pelo básico.

  Supondo que temos a seguinte frase: eu sou um desenvolvedor web, queremos marcar ela usando HTML, para isso devemos englobar a nossa frase em uma tag de parágrafo da seguinte forma:

<p>Eu sou um desenvolvedor web</p>

  Repare que a tag de parágrafo é aberta e fechada, com a frase dentro dele. Algumas tags no HTML não tem fechamento, porém a maioria segue esse padrão. Poderíamos jogar essa frase em uma tag de título se ela for um. As tags de título são 6 ao todo e seguem uma hierarquia, sendo a tag <h1> o título de maior nível e a tag <h6> a de menor nível. Só podemos usar uma tag <h1> em cada página, pois ela seria nosso título principal, de destaque, já as demais tags da <h2> até a <h6> podem ser utilizadas mais de uma vez.

  As tags ainda podem receber os chamados atributos, que tem diversas finalidades, um deles é o atributo de classe, que marca aquele conteúdo com um indentificador para podermos estilizar ele mais para frente. A baixo podemos ver nossa tag de parágrafo com uma classe:

<p class="paragrafo-1">Eu sou um desenvolvedor web</p>

  O atributo aqui é o class, dentro das aspas se encontra o nome para identificação, sendo que esse mome poderia ser qualquer coisa, até mesmo "pudim-de-chocolate", porém, devemos ser o mais organizados possível nos nossos códigos. Agora e se quisermos que as palavras "desenvolvedor web" fiquem destacadas em negrito? 

  Bom, temos uma tag para isso e podemos usar aninhamento de elementos para isso. O aninhamento de elementos é quando colocamos um elemento dentro de outro, nesse caso, uma tag dentro de outra, da seguinte forma:

<p class="paragrafo-1">Eu sou um <strong>desenvolvedor web</strong></p>

  A tag strong vai destaquar o texto que estiver dentro dele em negrito. Quando vamos aninhar uma tag dentro de outra devemos prestar atenção, pois podemos acabar fazendo isso errado. Repare que a tag strong abre e fecha ainda dentro da tag de parágrafo, se colocarmos o fechamento da tag strong depois do fechamento da tag de parágrafo podemos correr o risco de acabar com algo diferente do que queremos aparecendo na tela do usuário.

  Por agora podemos concluir nosso aprendizado por aqui, em breve vamos conhecer as chamadas tags vazias, um exemplo desse tipo de tag é a <img>. Se você gostou do conteúdo não deixe de escrever um comentário elogiando, ou se tiver alguma ideia de próximos conteúdos para serem abordados em outros artigos futuros, um abraço e até breve.

link da publicação original no meu blog: https://francileudo-frontend.blogspot.com/2022/08/viajando-no-basico-do-html-tags-e.html