{"id":5014,"date":"2025-04-09T09:10:50","date_gmt":"2025-04-09T12:10:50","guid":{"rendered":"https:\/\/eliezerladeira.com.br\/blog\/?p=5014"},"modified":"2025-04-09T09:10:50","modified_gmt":"2025-04-09T12:10:50","slug":"%f0%9f%8f%b7%ef%b8%8f-tags-basicas-no-html-guia-completo-para-iniciantes","status":"publish","type":"post","link":"https:\/\/eliezerladeira.com.br\/blog\/%f0%9f%8f%b7%ef%b8%8f-tags-basicas-no-html-guia-completo-para-iniciantes\/","title":{"rendered":"\ud83c\udff7\ufe0f Tags B\u00e1sicas no HTML: Guia Completo para Iniciantes"},"content":{"rendered":"

\u2705 O que \u00e9 HTML?<\/h4>\n

HTML (HyperText Markup Language) \u00e9 a linguagem usada para estruturar o conte\u00fado da web. Ele organiza textos, imagens, links, listas e muito mais. E tudo isso acontece por meio das tags<\/strong>.<\/p>\n

\ud83e\udde9 O que s\u00e3o tags HTML?<\/h4>\n

As tags<\/em> s\u00e3o comandos escritos entre < ><\/code> que dizem ao navegador como exibir o conte\u00fado. A maioria delas aparece em pares: uma tag de abertura<\/strong> e uma de fechamento<\/strong> (com uma barra \/<\/code> antes do nome).<\/p>\n

Exemplo:<\/strong><\/p>\n

\n
<p<\/span><\/span>>Este \u00e9 um par\u00e1grafo.<\/p<\/span><\/span>><\/code><\/div>\n<\/div>\n

\ud83d\udee0\ufe0f Principais tags HTML que voc\u00ea deve conhecer<\/h4>\n

Veja abaixo uma lista das tags mais b\u00e1sicas<\/strong> e fundamentais:<\/p>\n

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Tag<\/th>\nFun\u00e7\u00e3o<\/th>\n<\/tr>\n<\/thead>\n
<html><\/code><\/td>\nIndica o in\u00edcio e fim do documento HTML<\/td>\n<\/tr>\n
<head><\/code><\/td>\nCont\u00e9m informa\u00e7\u00f5es da p\u00e1gina (t\u00edtulo, metadados)<\/td>\n<\/tr>\n
<title><\/code><\/td>\nDefine o t\u00edtulo que aparece na aba do navegador<\/td>\n<\/tr>\n
<body><\/code><\/td>\n\u00c1rea vis\u00edvel da p\u00e1gina<\/td>\n<\/tr>\n
<h1><\/code> at\u00e9 <h6><\/code><\/td>\nT\u00edtulos, do mais importante ao menos<\/td>\n<\/tr>\n
<p><\/code><\/td>\nPar\u00e1grafos de texto<\/td>\n<\/tr>\n
<a href=\"\"><\/code><\/td>\nCria um link clic\u00e1vel<\/td>\n<\/tr>\n
<img src=\"\" alt=\"\"><\/code><\/td>\nAdiciona uma imagem<\/td>\n<\/tr>\n
<ul><\/code>, <ol><\/code>, <li><\/code><\/td>\nListas (n\u00e3o ordenadas e ordenadas)<\/td>\n<\/tr>\n
<strong><\/code><\/td>\nTexto em negrito<\/td>\n<\/tr>\n
<em><\/code><\/td>\nTexto em it\u00e1lico<\/td>\n<\/tr>\n
<br><\/code><\/td>\nQuebra de linha (n\u00e3o precisa de fechamento)<\/td>\n<\/tr>\n
<hr><\/code><\/td>\nLinha horizontal (separadora)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\ud83d\udca1 Exemplo de p\u00e1gina HTML simples<\/h4>\n
\"\"<\/div>\n

\ud83d\udccc Conclus\u00e3o<\/h4>\n

Aprender as tags b\u00e1sicas do HTML \u00e9 como montar os blocos de uma constru\u00e7\u00e3o. Com esse conhecimento inicial, voc\u00ea j\u00e1 pode criar p\u00e1ginas simples, organizar conte\u00fado e explorar o universo do desenvolvimento web.<\/p>\n

Continue praticando, testando e brincando com o c\u00f3digo!<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Aprenda como funcionam as principais tags HTML e comece hoje mesmo a montar suas pr\u00f3prias p\u00e1ginas da web. Simples, direto e com exemplos pr\u00e1ticos!<\/p>\n","protected":false},"author":1,"featured_media":5017,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_layout":"default_layout","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2349],"tags":[2981,2564,2982,79,2983,2980,51,2979,2978],"class_list":["post-5014","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-de-software","tag-como-usar-tags-no-html","tag-desenvolvimento","tag-estrutura-de-pagina-html","tag-html","tag-html-exemplos-simples","tag-html-para-iniciantes","tag-programacao","tag-tag","tag-tags-html-basicas"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/04\/ChatGPT-Image-Apr-9-2025-09_08_34-AM.jpg","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":4191,"url":"https:\/\/eliezerladeira.com.br\/blog\/html-guia-completo-para-iniciantes-e-avancados\/","url_meta":{"origin":5014,"position":0},"title":"HTML: Guia Completo para Iniciantes e Avan\u00e7ados","author":"admin","date":"","format":false,"excerpt":"Descubra tudo sobre HTML neste guia completo! Aprenda a estrutura b\u00e1sica, principais tags e as novidades do HTML5, incluindo elementos sem\u00e2nticos, multim\u00eddia e formul\u00e1rios aprimorados.","rel":"","context":"Em "Desenvolvimento de Software"","block_context":{"text":"Desenvolvimento de Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/desenvolvimento-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-modern-and-visually-engaging-illustration-of-HTML-and-web-development.-The-image-features-a-laptop-screen-displaying-HTML-code-surrounded-by-floati.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":304,"url":"https:\/\/eliezerladeira.com.br\/blog\/guia-pratico-de-html\/","url_meta":{"origin":5014,"position":1},"title":"Guia Pr\u00e1tico de HTML","author":"admin","date":"","format":false,"excerpt":"[ratings] SOBRE O HTML O HTML \u00e9 uma linguagem de marca\u00e7\u00e3o de texto. Mais especificamente, uma linguagem de marca\u00e7\u00e3o de hipertexto. Portanto, antes de come\u00e7ar a falar de HTML, vamos entender o que vem a ser uma linguagem de marca\u00e7\u00e3o. Linguagens de marca\u00e7\u00e3o (markup languages, em ingl\u00eas) s\u00e3o linguagens que\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310,"url":"https:\/\/eliezerladeira.com.br\/blog\/html-basico\/","url_meta":{"origin":5014,"position":2},"title":"HTML B\u00e1sico","author":"admin","date":"","format":false,"excerpt":"[ratings] HTML\u00a0\u00e9 uma abrevia\u00e7\u00e3o de HyperText Markup Language, que em portugu\u00eas significa Linguagem de Marca\u00e7\u00e3o de Hipertexto. Os arquivos HTML s\u00e3o interpretados pelos navegadores (browsers). Portanto, caso voc\u00ea tenha algum arquivo HTML no computador, basta pedir que o seu navegador o abra. O HTML trabalha com o sistema de tags\u2026","rel":"","context":"Em "Inform\u00e1tica"","block_context":{"text":"Inform\u00e1tica","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/informatica\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2783,"url":"https:\/\/eliezerladeira.com.br\/blog\/como-criar-um-widget\/","url_meta":{"origin":5014,"position":3},"title":"Como criar um\u00a0widget","author":"admin","date":"","format":false,"excerpt":"Produza seu pr\u00f3prio widget\u00a0e exporte seu feed RSS para outros sites e blogs. Os widgets\u00a0est\u00e3o no auge de sua popularidade. Com eles \u00e9 poss\u00edvel adicionar not\u00edcias, miniaplicativos, joguinhos e outros trecos digitais a qualquer blog ou site pessoal. Parece complicado de fazer, mas, em termos de programa\u00e7\u00e3o, um widget \u00e9\u2026","rel":"","context":"Em "Programa\u00e7\u00e3o"","block_context":{"text":"Programa\u00e7\u00e3o","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/programacao\/"},"img":{"alt_text":"266_widget2","src":"https:\/\/i0.wp.com\/netsysoft.wordpress.com\/wp-content\/uploads\/2009\/01\/266_widget2.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4778,"url":"https:\/\/eliezerladeira.com.br\/blog\/aplicativos-gratuitos-que-ajudam-na-produtividade\/","url_meta":{"origin":5014,"position":4},"title":"Aplicativos gratuitos que ajudam na produtividade","author":"admin","date":"","format":false,"excerpt":"\u00a0 Quase\u00a0todo mundo que j\u00e1 teve alguma experi\u00eancia com software livre conhece o conjunto de aplicativos de escrit\u00f3rio\u00a0OpenOffice.org: \u00e9 um pacote gratuito com processador de textos, planilha de c\u00e1lculo, editor de apresenta\u00e7\u00f5es, banco de dados e ferramenta de desenho que tem boa parte dos recursos encontrados em seu concorrente comercial\u2026","rel":"","context":"Em "Software"","block_context":{"text":"Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/software\/"},"img":{"alt_text":"Abiword","src":"https:\/\/i0.wp.com\/www.eliezerladeira.com.br\/site_old\/wp-content\/uploads\/2016\/08\/abiword.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4229,"url":"https:\/\/eliezerladeira.com.br\/blog\/o-que-e-indentacao\/","url_meta":{"origin":5014,"position":5},"title":"O que \u00e9 Indenta\u00e7\u00e3o?","author":"admin","date":"","format":false,"excerpt":"Descubra o que \u00e9 indenta\u00e7\u00e3o, sua import\u00e2ncia na programa\u00e7\u00e3o, na escrita acad\u00eamica e na formata\u00e7\u00e3o de documentos. Veja exemplos pr\u00e1ticos e boas pr\u00e1ticas!","rel":"","context":"Em "Desenvolvimento de Software"","block_context":{"text":"Desenvolvimento de Software","link":"https:\/\/eliezerladeira.com.br\/blog\/category\/tecnologia\/desenvolvimento-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/eliezerladeira.com.br\/blog\/wp-content\/uploads\/2025\/03\/A-visually-appealing-digital-illustration-demonstrating-indentation-in-different-contexts.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/5014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/comments?post=5014"}],"version-history":[{"count":4,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/5014\/revisions"}],"predecessor-version":[{"id":5020,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/posts\/5014\/revisions\/5020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/media\/5017"}],"wp:attachment":[{"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/media?parent=5014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/categories?post=5014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eliezerladeira.com.br\/blog\/wp-json\/wp\/v2\/tags?post=5014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}