{"id":7735,"date":"2025-05-02T12:21:16","date_gmt":"2025-05-02T15:21:16","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=7735"},"modified":"2025-05-08T18:18:02","modified_gmt":"2025-05-08T21:18:02","slug":"tudo-sobre-html-para-front-ends","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/tudo-sobre-html-para-front-ends\/","title":{"rendered":"Tudo sobre HTML para Front-ends"},"content":{"rendered":"\n

Hello meus queridos Front-enders<\/em>. Nesta mat\u00e9ria eu vou compartilhar com voc\u00eas a import\u00e2ncia das boas pr\u00e1ticas em HTML e por que dever\u00edamos prestar mais aten\u00e7\u00e3o a esta linguagem de marca\u00e7\u00e3o de texto<\/strong>.  <\/p>\n\n\n\n

N\u00f3s como desenvolvedores muitas vezes deixamos para tr\u00e1s o aprofundamento dessa linguagem, \u00e0s vezes achamos que s\u00e3o s\u00f3 <div><\/em> com classes e pronto.<\/p>\n\n\n\n

A verdade \u00e9 que o HTML \u00e9 muito importante para as empresas<\/strong> e, principalmente se estamos desenvolvendo uma landing page<\/em>, pois \u00e9 esse HTML<\/strong> que ser\u00e1 mapeado pelo google<\/em> ou qualquer outro motor de busca na internet.

Al\u00e9m de HTML, se voc\u00ea quer construir um site ou uma p\u00e1gina que esteja adequado aos motores de busca, n\u00e3o pode deixar de aprender sobre HTML sem\u00e2ntico<\/a><\/strong>. <\/p>\n\n\n\n

Ent\u00e3o um <div><\/em> n\u00e3o vai dizer nada para o Google, mas um <iframe><\/em>, por exemplo, sim. Ent\u00e3o, o que eu preciso saber para desenvolver uma landing page<\/em> de forma consciente? Vamos ver alguns t\u00f3picos nesta mat\u00e9ria.<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Estrutura B\u00e1sica de HTML<\/h2>\n\n\n\n
\"desenho<\/figure>\n\n\n\n

Vou passar por essa parte rapidinho porque imagino que muitos de voc\u00eas j\u00e1 sabem, mas vou fazer umas anota\u00e7\u00f5es curtinhas sobre.<\/p>\n\n\n\n

<!DOCTYPE html!><\/h3>\n\n\n\n

O Doctype<\/strong> vai falar para o navegador que tipo de documento voc\u00ea est\u00e1 escrevendo. Esta \u00e9 a primeira e mais fundamental tag<\/em> a ser utilizada no nosso HTML<\/strong>.<\/p>\n\n\n\n

<html lang=\u201dpt-br\u201d><\/h3>\n\n\n\n


O documento HTML<\/strong> \u00e9 basicamente uma \u00e1rvore de elementos, onde existe uma hierarquia de pais e filhos. O pai principal dessa grande \u00e1rvore \u00e9 a tag HTML<\/em>.  <\/p>\n\n\n\n

<link rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d href=\u201destilo.css\u201d> <\/h3>\n\n\n\n


Onde vamos linkar <\/em>todos os recursos externos; css, js. <\/p>\n\n\n\n

<head><\/h3>\n\n\n\n

Onde vamos incluir os metatags<\/strong> que mencionarei aqui abaixo:<\/p>\n\n\n\n

O que s\u00e3o Metatags<\/h2>\n\n\n\n
\"imagem<\/figure>\n\n\n\n

\u00c9 aqui onde a gente comunica as “configura\u00e7\u00f5es\u201d para os browsers <\/em>e para os motores de busca. Como assim?<\/p>\n\n\n\n

Isso quer dizer que nos meta tags<\/strong> eu vou indicar a codifica\u00e7\u00e3o do idioma a ser utilizado, o viewport <\/em> \u2014 para identificar o dispositivo desde onde est\u00e1 sendo visualizado o nosso layout<\/em> e poder apresentar o conte\u00fado no melhor formato poss\u00edvel.<\/p>\n\n\n\n

Al\u00e9m disso, vai informar o t\u00edtulo e descri\u00e7\u00e3o, que \u00e9 o mais b\u00e1sico e o mais importante, pois essas palavras-chave ser\u00e3o as que o google ir\u00e1 procurar.<\/strong><\/p>\n\n\n\n

Ent\u00e3o, imagina que voc\u00ea faz um site lindo, maravilhoso com um layout<\/em> impec\u00e1vel, mas os acessos a ele s\u00e3o muito poucos. <\/p>\n\n\n\n

Isso \u00e9 meio triste, sentir que seu trabalho n\u00e3o foi muito \u00fatil. Por isso o primeiro que devemos pensar \u00e9: “como eu posso utilizar essas metatags<\/strong> ao meu favor?”<\/p>\n\n\n\n

Mencionando tamb\u00e9m que \u00e9 nas metatags<\/strong> que vamos colocar o nome do autor do site, ou seja, voc\u00ea!<\/p>\n\n\n\n

Voc\u00ea vai levar o cr\u00e9dito do seu produto se souber utilizar as metatags <\/strong>corretamente.<\/p>\n\n\n\n

Vale mencionar que, \u00e0s vezes, as empresas preferem deixar esse assunto para as equipes de marketing<\/em>. <\/p>\n\n\n\n

Mas, como desenvolvedora, acredito que esse \u00e9 um conhecimento muito valioso e importante para podermos contribuir positivamente ao nosso cliente ou empresa, al\u00e9m de facilitar o trabalho da equipe de marketing.<\/p>\n\n\n\n

Indico tamb\u00e9m ter um pouco de conhecimento sobre Schema.org<\/a><\/strong>, que tamb\u00e9m s\u00e3o metatags<\/strong> e que ajudam a ter um \u00f3timo rankeamento <\/em>nos motores de busca.<\/p>\n\n\n\n

>>Leitura Recomendada:<\/strong>
Mercado <\/a><\/em><\/strong>f<\/em><\/strong><\/a>ront-end<\/a><\/em><\/strong>: a origem e o futuro da \u00e1rea<\/em><\/p>\n\n\n\n

Classifica\u00e7\u00e3o das tags do HTML<\/strong><\/h2>\n\n\n\n
\"imagem<\/figure>\n\n\n\n

Seguramente voc\u00eas j\u00e1 sabem o que \u00e9  HTML5<\/strong>, se n\u00e3o, convido voc\u00eas a lerem um pouco de hist\u00f3ria do HTML<\/strong> aqui. <\/p>\n\n\n\n

Basicamente, a padroniza\u00e7\u00e3o do HTML5<\/strong> facilitou a manipula\u00e7\u00e3o dos elementos. <\/p>\n\n\n\n

Mas como assim? A gente n\u00e3o manipula os elementos com CSS <\/em>e js<\/em>? Sim, s\u00f3 que n\u00e3o.\u00a0Ali\u00e1s, se voc\u00ea estiver aprendendo CSS tamb\u00e9m, vale conferir esse artigo com os principais erros de CSS<\/strong><\/a> que voc\u00ea n\u00e3o pode cometer.<\/p>\n\n\n\n

Tinha alguns componentes, hoje muito utilizados, como o drag and drop, <\/em>que eram extremadamente complexos de manipular com Javascript <\/strong><\/a>por causa de restri\u00e7\u00f5es das vers\u00f5es anteriores do HTML. <\/p>\n\n\n\n

Hoje em dia as modifica\u00e7\u00f5es das caracter\u00edsticas dos elementos s\u00e3o um pouco menos intrusivas e mais transparentes.<\/p>\n\n\n\n

Beleza, j\u00e1 que revisamos o conceito de HTML5<\/strong> devemos lembrar a categoriza\u00e7\u00e3o de elementos de conte\u00fado que tem duas classifica\u00e7\u00f5es b\u00e1sicas: <\/p>\n\n\n\n

  1. Elementos de linha<\/strong>: Identifica os textos como; a, strong, em, img, input, abbr, span.<\/em><\/li>
  2. Elementos de bloco<\/strong>: Blocos de c\u00f3digo como div, section, containers<\/em><\/li><\/ol>\n\n\n\n

    Essas classifica\u00e7\u00f5es tem regras b\u00e1sicas, que \u00e0s vezes passamos por alto e \u00e9 muito importante sempre seguirmos o padr\u00e3o de desenvolvimento. <\/p>\n\n\n\n

    Essas regras s\u00e3o:<\/strong><\/p>\n\n\n\n