{"id":625,"date":"2024-04-18T20:20:18","date_gmt":"2024-04-18T23:20:18","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=625"},"modified":"2025-11-05T11:36:36","modified_gmt":"2025-11-05T14:36:36","slug":"introducao-ao-html","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/","title":{"rendered":"Introdu\u00e7\u00e3o ao HTML"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Introdu\u00e7\u00e3o ao HTML<\/strong>: O <strong>HTML (HyperText Markup Language)<\/strong> \u00e9 a linguagem padr\u00e3o e fundamental para a constru\u00e7\u00e3o de qualquer p\u00e1gina web. Ele define o <strong>esqueleto (estrutura)<\/strong> e o <strong>conte\u00fado<\/strong> de um documento, utilizando um sistema de marcadores chamado <em>tags<\/em>.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo de introdu\u00e7\u00e3o ao HTML, vamos desvendar os conceitos mais pr\u00e1ticos e essenciais do HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\">A estrutura m\u00ednima de um documento.<\/li>\n\n\n\n<li class=\"has-medium-font-size\">A diferen\u00e7a crucial entre <strong>Tags, Elementos e Atributos<\/strong>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\">Regras importantes de sintaxe, como a sensibilidade a mai\u00fasculas\/min\u00fasculas e o tratamento de espa\u00e7os em branco.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83e\uddf1 Estrutura B\u00e1sica de um Documento HTML5<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Todo documento HTML v\u00e1lido segue uma estrutura hier\u00e1rquica bem definida, garantindo que o navegador consiga interpretar e renderizar o conte\u00fado corretamente.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Aqui est\u00e1 o <strong>Modelo Can\u00f4nico<\/strong> de um documento HTML5:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Meu Primeiro Documento HTML&lt;\/title>\n  &lt;link rel=\"stylesheet\" href=\"estilos.css\">\n&lt;\/head>\n&lt;body>\n  &lt;h1>Estrutura HTML&lt;\/h1>\n  &lt;p>Ol\u00e1, mundo! Este \u00e9 o conte\u00fado vis\u00edvel da p\u00e1gina.&lt;\/p>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Anatomia da Estrutura<\/h3>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Parte do C\u00f3digo<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><td><strong>Detalhe Importante<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>&lt;!DOCTYPE html&gt;<\/code><\/strong><\/td><td><strong>Declara\u00e7\u00e3o de Tipo de Documento.<\/strong><\/td><td>Informa ao navegador que o documento deve ser renderizado usando o padr\u00e3o <strong>HTML5<\/strong>. Deve ser a primeira linha.<\/td><\/tr><tr><td><strong><code>&lt;html&gt;&lt;\/html&gt;<\/code><\/strong><\/td><td><strong>Elemento Raiz (Root).<\/strong><\/td><td>Envolve todo o conte\u00fado do documento. \u00c9 o elemento &#8220;pai&#8221; de todos os outros.<\/td><\/tr><tr><td><strong><code>&lt;head&gt;&lt;\/head&gt;<\/code><\/strong><\/td><td><strong>Cabe\u00e7alho do Documento.<\/strong><\/td><td>Cont\u00e9m <strong>metadados<\/strong> (informa\u00e7\u00f5es <em>sobre<\/em> a p\u00e1gina, n\u00e3o vis\u00edveis ao usu\u00e1rio), como t\u00edtulo, conjuntos de caracteres, <em>links<\/em> para arquivos CSS e <em>scripts<\/em> JS.<\/td><\/tr><tr><td><strong><code>&lt;meta charset=\"UTF-8\"&gt;<\/code><\/strong><\/td><td><strong>Metadado de Codifica\u00e7\u00e3o.<\/strong><\/td><td><strong>(Sugest\u00e3o de Inclus\u00e3o)<\/strong> Define o conjunto de caracteres, sendo o UTF-8 o padr\u00e3o universal para suportar a maioria dos idiomas (incluindo acentua\u00e7\u00e3o).<\/td><\/tr><tr><td><strong><code>&lt;title&gt;&lt;\/title&gt;<\/code><\/strong><\/td><td><strong>T\u00edtulo da P\u00e1gina.<\/strong><\/td><td>Define o t\u00edtulo que aparece na <strong>aba\/barra de t\u00edtulo<\/strong> do navegador e nos resultados dos mecanismos de busca.<\/td><\/tr><tr><td><strong><code>&lt;body&gt;&lt;\/body&gt;<\/code><\/strong><\/td><td><strong>Corpo do Documento.<\/strong><\/td><td>Cont\u00e9m o <strong>conte\u00fado vis\u00edvel<\/strong> da p\u00e1gina (textos, imagens, links, v\u00eddeos).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83c\udff7\ufe0f Entendendo a Sintaxe: Tags, Elementos e Atributos<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Estes tr\u00eas termos s\u00e3o frequentemente confundidos por iniciantes, mas representam conceitos distintos na sintaxe do HTML:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Tags<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Defini\u00e7\u00e3o:<\/strong> S\u00e3o os <strong>marcadores<\/strong> ou <strong>palavras-chave<\/strong> envoltas por colchetes angulares (<code>&lt;<\/code> e <code>><\/code>).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> Usadas para <strong>criar<\/strong> um elemento.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong> <code>&lt;p><\/code> (tag de abertura) e <code>&lt;\/p><\/code> (tag de fechamento).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2. Elementos<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Defini\u00e7\u00e3o:<\/strong> \u00c9 a <strong>estrutura completa<\/strong>, da tag de abertura at\u00e9 a tag de fechamento, incluindo todo o conte\u00fado interno.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Fun\u00e7\u00e3o:<\/strong> Representa uma <strong>parte estrutural<\/strong> do documento (um par\u00e1grafo, um cabe\u00e7alho, uma imagem, etc.).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong>HTML<code>&lt;p>Este \u00e9 o conte\u00fado do elemento par\u00e1grafo.&lt;\/p><\/code><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\">\ud83d\udca1 <strong>Nota Importante (Elementos Vazios):<\/strong> Alguns elementos, como <code>&lt;br&gt;<\/code> (quebra de linha) e <code>&lt;img&gt;<\/code> (imagem), s\u00e3o chamados de <strong>elementos vazios (ou <em>void elements<\/em>)<\/strong> pois n\u00e3o possuem conte\u00fado e, portanto, n\u00e3o precisam de uma tag de fechamento.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. Atributos<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Defini\u00e7\u00e3o:<\/strong> Fornecem <strong>informa\u00e7\u00f5es adicionais<\/strong> sobre um elemento, influenciando seu comportamento ou apar\u00eancia.<\/li>\n\n\n\n<li class=\"has-medium-font-size\">Estrutura: Sempre inseridos dentro da tag de abertura, compostos por nome e valor separados por um sinal de igual.$$\\text{Atributo} = \\text{nome}=&#8221; \\text{valor} &#8220;$$<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong>HTML<code>&lt;img src=\"minha-imagem.jpg\" alt=\"Uma imagem descritiva\"><\/code>\n<ul class=\"wp-block-list\">\n<li><strong><code>src<\/code> (Source):<\/strong> Define o caminho (origem) para o arquivo da imagem.<\/li>\n\n\n\n<li><strong><code>alt<\/code> (Alternative Text):<\/strong> Fornece um texto alternativo, crucial para acessibilidade e SEO.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83d\udcdc Regras de Ouro da Sintaxe<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Case-Insensitive<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O HTML \u00e9 tecnicamente case-insensitive (n\u00e3o diferencia mai\u00fasculas de min\u00fasculas).<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Exemplo: &lt;body&gt; \u00e9 o mesmo que &lt;BODY&gt;.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\">\u270f\ufe0f <strong>Recomenda\u00e7\u00e3o Pr\u00e1tica:<\/strong> \u00c9 uma <strong>boa pr\u00e1tica de desenvolvimento<\/strong> escrever todas as tags e atributos <strong>em letras min\u00fasculas<\/strong> (<code>snake-case<\/code> ou <code>kebab-case<\/code>). Isso melhora a consist\u00eancia, a legibilidade e se alinha aos padr\u00f5es do XHTML e JavaScript.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>O Tratamento de Espa\u00e7os em Branco (Whitespace Collapsing)<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Uma das regras mais importantes do HTML \u00e9 como o navegador lida com m\u00faltiplas ocorr\u00eancias de espa\u00e7os, tabula\u00e7\u00f5es e quebras de linha.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O navegador implementa o <strong>Whitespace Collapsing<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Ignora M\u00faltiplos Espa\u00e7os e Linhas:<\/strong> M\u00faltiplas linhas em branco e espa\u00e7os extras <strong>entre elementos<\/strong> e <strong>dentro da maioria dos elementos de texto<\/strong> s\u00e3o geralmente ignorados e renderizados como <strong>um \u00fanico espa\u00e7o<\/strong>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Import\u00e2ncia para Legibilidade:<\/strong> Voc\u00ea deve usar espa\u00e7os e quebras de linha livremente no seu c\u00f3digo para torn\u00e1-lo <strong>leg\u00edvel<\/strong> e <strong>indentado<\/strong> \u2014 isso n\u00e3o afetar\u00e1 a apar\u00eancia final da p\u00e1gina.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exce\u00e7\u00f5es:<\/strong> Para preservar m\u00faltiplos espa\u00e7os ou quebras de linha exatamente como digitados, voc\u00ea precisa usar o elemento <code>&lt;pre><\/code> (preformatado) ou o CSS.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\ud83d\udcbb Exemplos Pr\u00e1ticos de Elementos Essenciais<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Dominar as tags mais comuns \u00e9 o primeiro passo para construir qualquer p\u00e1gina:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Elemento<\/strong><\/td><td><strong>C\u00f3digo HTML<\/strong><\/td><td><strong>Prop\u00f3sito<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>T\u00edtulo Principal<\/strong><\/td><td><code>&lt;h1&gt;T\u00edtulo da P\u00e1gina&lt;\/h1&gt;<\/code><\/td><td>O t\u00edtulo mais importante (n\u00edvel 1). Essencial para SEO.<\/td><\/tr><tr><td><strong>Par\u00e1grafo<\/strong><\/td><td><code>&lt;p&gt;Este \u00e9 um bloco de texto.&lt;\/p&gt;<\/code><\/td><td>Define um bloco de par\u00e1grafo de texto.<\/td><\/tr><tr><td><strong>Link<\/strong><\/td><td><code>&lt;a href=\"https:\/\/site.com\"&gt;Visite o Site&lt;\/a&gt;<\/code><\/td><td>Cria um <em>hiperlink<\/em> para outra p\u00e1gina ou recurso.<\/td><\/tr><tr><td><strong>Lista N\u00e3o Ordenada<\/strong><\/td><td><code>&lt;ul&gt;&lt;li&gt;Item 1&lt;\/li&gt;&lt;li&gt;Item 2&lt;\/li&gt;&lt;\/ul&gt;<\/code><\/td><td>Cria uma lista de itens sem ordem espec\u00edfica (com marcadores).<\/td><\/tr><tr><td><strong>Imagem<\/strong><\/td><td><code>&lt;img src=\"caminho.jpg\" alt=\"Descri\u00e7\u00e3o\"&gt;<\/code><\/td><td>Insere uma imagem no documento.<\/td><\/tr><tr><td><strong>Quebra de Linha<\/strong><\/td><td><code>&lt;br&gt;<\/code><\/td><td>Insere uma quebra de linha <em>\u00fanica<\/em> (elemento vazio).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o da Introdu\u00e7\u00e3o ao HTML e Pr\u00f3ximos Passos<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O HTML \u00e9 a base fundamental para a constru\u00e7\u00e3o de p\u00e1ginas web. Ao dominar a <strong>estrutura b\u00e1sica<\/strong>, a distin\u00e7\u00e3o entre <strong>tags, elementos e atributos<\/strong>, e as <strong>regras de formata\u00e7\u00e3o<\/strong>, voc\u00ea estar\u00e1 apto a criar a funda\u00e7\u00e3o de p\u00e1ginas web robustas e eficazes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udca1 Dicas Essenciais para o Sucesso em HTML:<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Pratique Consistentemente:<\/strong> A melhor forma de aprender \u00e9 codificando. Crie p\u00e1ginas simples e experimente todos os elementos e atributos que aprendeu.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Use um Editor Profissional:<\/strong> Editores de c\u00f3digo (como <strong>Visual Studio Code<\/strong> ou <strong>Sublime Text<\/strong>) oferecem <em>autocomplete<\/em> e <em>syntax highlighting<\/em>, o que facilita muito a escrita correta e a detec\u00e7\u00e3o de erros.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Valide seu C\u00f3digo:<\/strong> Use validadores online (como o W3C Validator) para garantir que sua sintaxe HTML esteja perfeita, evitando problemas de renderiza\u00e7\u00e3o em diferentes navegadores.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Lembre-se: Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.png\" alt=\"HTML\" class=\"wp-image-600\"\/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.png\" alt=\"CSS\" class=\"wp-image-702\"\/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.png\" alt=\"Javascript\" class=\"wp-image-804\"\/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.png\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img decoding=\"async\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.png\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Introdu\u00e7\u00e3o ao HTML: O HTML (HyperText Markup Language) \u00e9 a linguagem padr\u00e3o e fundamental para&#8230;<\/p>\n","protected":false},"author":1,"featured_media":600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","wpcat-6-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introdu\u00e7\u00e3o ao HTML - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Introdu\u00e7\u00e3o ao HTML: HTML, ou HyperText Markup Language, \u00e9 a linguagem de marca\u00e7\u00e3o padr\u00e3o para a cria\u00e7\u00e3o de p\u00e1ginas web. Vamos explorar...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introdu\u00e7\u00e3o ao HTML - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Introdu\u00e7\u00e3o ao HTML: HTML, ou HyperText Markup Language, \u00e9 a linguagem de marca\u00e7\u00e3o padr\u00e3o para a cria\u00e7\u00e3o de p\u00e1ginas web. Vamos explorar...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-18T23:20:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-05T14:36:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Introdu\u00e7\u00e3o ao HTML\",\"datePublished\":\"2024-04-18T23:20:18+00:00\",\"dateModified\":\"2025-11-05T14:36:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/\"},\"wordCount\":995,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/\",\"name\":\"Introdu\u00e7\u00e3o ao HTML - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"datePublished\":\"2024-04-18T23:20:18+00:00\",\"dateModified\":\"2025-11-05T14:36:36+00:00\",\"description\":\"Introdu\u00e7\u00e3o ao HTML: HTML, ou HyperText Markup Language, \u00e9 a linguagem de marca\u00e7\u00e3o padr\u00e3o para a cria\u00e7\u00e3o de p\u00e1ginas web. Vamos explorar...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/html.webp\",\"width\":758,\"height\":426,\"caption\":\"HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/introducao-ao-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introdu\u00e7\u00e3o ao HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introdu\u00e7\u00e3o ao HTML - BLOG THIAGO ROSSI","description":"Introdu\u00e7\u00e3o ao HTML: HTML, ou HyperText Markup Language, \u00e9 a linguagem de marca\u00e7\u00e3o padr\u00e3o para a cria\u00e7\u00e3o de p\u00e1ginas web. Vamos explorar...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Introdu\u00e7\u00e3o ao HTML - BLOG THIAGO ROSSI","og_description":"Introdu\u00e7\u00e3o ao HTML: HTML, ou HyperText Markup Language, \u00e9 a linguagem de marca\u00e7\u00e3o padr\u00e3o para a cria\u00e7\u00e3o de p\u00e1ginas web. Vamos explorar...","og_url":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-18T23:20:18+00:00","article_modified_time":"2025-11-05T14:36:36+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Introdu\u00e7\u00e3o ao HTML","datePublished":"2024-04-18T23:20:18+00:00","dateModified":"2025-11-05T14:36:36+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/"},"wordCount":995,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","articleSection":["HTML"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/","url":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/","name":"Introdu\u00e7\u00e3o ao HTML - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","datePublished":"2024-04-18T23:20:18+00:00","dateModified":"2025-11-05T14:36:36+00:00","description":"Introdu\u00e7\u00e3o ao HTML: HTML, ou HyperText Markup Language, \u00e9 a linguagem de marca\u00e7\u00e3o padr\u00e3o para a cria\u00e7\u00e3o de p\u00e1ginas web. Vamos explorar...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp","width":758,"height":426,"caption":"HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/introducao-ao-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Introdu\u00e7\u00e3o ao HTML"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":4,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":4298,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/625\/revisions\/4298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/600"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}