Guia simples de tags basicas HTML💻

Olá turma tudo beleza?😃 nesse post queria passar um guia rapido de tags html para quem esta iniciando, já que no inicio é normal as vezes esquecer qual tag usar em certas ocasiões ou não conhecer elas, segue o guia abaixo:.

  1. <html> </html>
  1. <head> </head>
  1. <title> </title>
  1. </meta>
  1. <body> </body>
  1. <!-- comentario -->

  • usado para criar comentarios em seu codigo (não é exibido na página)

  1. <header> </header>
  1. <footer> </footer>
  1. <main> </main>
  1. <section> </section>
  1. <aside> </aside>
  1. <nav> </nav>
  1. <div> </div>

  • define uma divisão na página (somente fazer o uso desta em último caso!, pois existem tags semânticas para quase todas as ocasiões de uma página web) saiba mais sobre div

  1. <h1> </h1>
  1. <p> </p>
  1. <span> </span>
  1. <pre> </pre>
  1. <b> </b>
  1. <i> </i>
  1. <br> </br>
  1. <hr> </hr>
  1. <a hreaf="exemplo.com">
  1. <article> </article>
  1. <img src="img" alt="alternativa">

  • incluir uma img (alt é para que os leitores do navegador que ajudam deficientes visuais descrevam o que tem naquela imagem) saiba mais sobre img

  1. <video> </video>
  1. <audio> </audio>
  1. <iframe> </iframe>
  1. <ol> </ol>
  1. <ul> </ul>
  1. <li> </li>
  1. <form> </form>
  1. <input type=" ">
  1. <style> </style>
  1. <script> </script>

para todos que estiverem afim de ter um conhecimento mais profundo sobre as tags ou sobre outra linguagem de marcação ou progamacão recomendo o site abaixo:

W3Schools

pedrukkjkhá 2 anos

Muito legal material! Eu não programo em HTML mas terei que aprender um pouco mais pois é algo relativamente fácil de se aprender e que é usado em todo o canto, principalmente no Python com o Markdown (que é onde eu uso o HTML).

GTEXhá 2 anos

Boa tarde LeoniMelo,

Obrigado pelo post informativo!

Acho que para complementar o post seria legal ter um exemplo na prática de como viria um código completo para exemplos para o pessoal do TabNews e o resultado dele, tipo:

<html>
<body>
<img src="img" alt="alternativa">
</body>
</html>

Além disso, seria legal que estivesse em um estilo de links dentro do post para que a pessoa conseguisse facilmente encontrar o que deseja, por exemplo:

[Usuário]Gostaria de saber como faço para criar uma lista ordenada em HTML.

É só clicar no tópico que se refere.

LeoniMelohá 2 anos
obrigado pela sugestão gtex, vou aderir sua ideia :)
devmucahá 2 anos

Muito bacana a iniciativa, aconselho deixar uma anotação na tag de div, que, somente fazer o uso desta em último caso, pois existem tags semânticas para quase todas as ocasiões de uma página web estruturada com HTML. Já cansei de dar rework em algumas páginas com div pra footer e aside, mas é isso ai, ótimo trabalho!

LeoniMelohá 2 anos
obrigado pela sugestão devmuca :)
maximianoleitehá 2 anos

Parabéns pelo seu esforço

DeividBraianhá 2 anos

Você comenta que a tag pre é para códigos. Nesse caso codigos não é mais a tag script? e agora também a tag pyscript, ou algo semelhante

LeoniMelohá 2 anos

pessoal se caso acharem que precisa melhorar algo no post peço que comentem para que eu deixe os proximos mais completos ainda obg :)