O que é e para que serve HTML?

Você sabe como são feitos os sites que você navega todos os dias na internet? Não? Então saiba para que serve o HTML e como são feitos os sites.

Todos os sites que você navega na internet são feitos utilizando HTML. O HTML por si só não cria um site muito bonito, na verdade, ele fica cria apenas um monte de blocos aninhados, onde ficam com uma aparência de site dos anos 2000. O que realmente da uma aparência elegante para os sites é o CSS, porém CSS sem HTML também não serve para nada. Por isso é importante aprender tanto HTML quanto CSS.

Veja um exemplo de HTML

<div class="intro-alt-titulo-box">
	<div class="base">
		<div class="base-content">
			<h1 class="intro-alt-titulo">Aprenda desenvolvimento web de forma prática e inteligente</h1>
			<p class="home-titulo-desc">WebDesignDevBR</p>
		</div>
	</div>
</div>

Esse é um exemplo de código HTML, que por sinal é um código real que utilizo no meu site para criar a introdução da página. Essa é a estrutura básica de um código HTML, onde os “blocos” são criados através da tag div, e alguns elementos são criados com tags específicas, como títulos utilizam a tag heading (h1, h2, h3, h4, h5, h6). Parágrafos utilizam o p, textos em negrito utilizam a tag b ou strong, e por aí vai.

Aprender HTML é relativamente simples, você só precisa entender para que são usadas as tags, e quando elas devem ser utilizadas, que você já consegue começar a estruturar sites.

Curiosidade

Apesar de, semanticamente, cada tag ser específica para determinadas coisas, é possível você criar suas próprias tags que o navegador vai reconhecer e renderizar seu site, podendo até mesmo você estilizar suas tags como se fossem tags oficiais. Algo como:

<minhatag class="intro-alt-titulo-box">
	<minhatag class="base" minhapropriedade>
		<minhatag class="base-content" outrapropriedade="nome">
			<titulo class="intro-alt-titulo">Aprenda desenvolvimento web de forma prática e inteligente</titulo>
			<paragrafo class="home-titulo-desc">WebDesignDevBR</paragrafo>
		</minhatag>
	</minhatag>
</minhatag>

Porém não é recomendado você fazer isso, até mesmo porque a acessibilidade do seu site vai ser praticamente nula. Os leitores de tela interpretam as tags para saber do que se trata aquela seção do seu site, e caso você utilize essa abordagem, certamente seu site não será nada acessível e também será penalizado nos mecanismos de buscas. Estou compartilhando isso apenas para fins de curiosidade, mas opte por criar sempre um site semanticamente correto. Um exemplo prático disso é o próprio site do YouTube, se você inspecionar o site, vai notar que há diversas tags próprias, como por exemplo:

<ytd-permission-role-bottom-bar-renderer class="style-scope ytd-app">
	<div class="pom-role-text style-scope ytd-permission-role-bottom-bar-renderer" hidden="">
		<yt-formatted-string class="style-scope ytd-permission-role-bottom-bar-renderer" is-empty="">
			<yt-attributed-string class="style-scope yt-formatted-string">
			</yt-attributed-string>
		</yt-formatted-string>
	</div>
</ytd-permission-role-bottom-bar-renderer>

E porque o YouTube não é penalizado? Acho que a resposta é simples rsrs, pelo simples fato de ser o maior site de vídeos do mundo e também ser do próprio Google… Mas isso não isenta eles da obrigação de seguir os padrões estabelecidos por grandes orgãos, porém quem vai penalizá-los, não é mesmo?

Gostou? Compartilhe clicando nos links abaixo:

Nenhum comentário

Compartilhar
Mais antigos
Mais recentes
user-picture
user-picture
WebDesignDevBR
Não hesite em comentar, sejam dúvidas, elogios ou reclamações!

Parece que ainda ninguém teve dúvidas relacionadas a esta postagem 🤥

Não se preocupe, você pode enviar seu comentário sempre que quiser. Além dos outros usuários poderem ajudar, também faremos o possível para ajudá-lo.

Que tal escrever um comentário agora mesmo?