{"id":44,"date":"2014-10-28T20:31:28","date_gmt":"2014-10-28T23:31:28","guid":{"rendered":"http:\/\/ricardoartur.com.br\/mmr2\/?p=44"},"modified":"2023-04-21T11:53:56","modified_gmt":"2023-04-21T14:53:56","slug":"divs-e-secoes-html","status":"publish","type":"post","link":"https:\/\/ricardoartur.com.br\/web\/2014\/10\/28\/divs-e-secoes-html\/","title":{"rendered":"Divs e Se\u00e7\u00f5es HTML"},"content":{"rendered":"<h1>Modelos de conteu\u0301do<\/h1>\n<p>Dentre todas as categorias de modelos de conteu\u0301do, existem dois tipos de elementos: elementos de <strong>linha<\/strong> e de <strong>bloco<\/strong>.<\/p>\n<p class=\"layoutArea\">Veremos aqui:<\/p>\n<ul>\n<li><a href=\"#linha\">Elementos em linha<\/a><\/li>\n<li><a href=\"#span\">Span<\/a><\/li>\n<li><a href=\"#block\">Elementos em Bloco<\/a><\/li>\n<li><a href=\"#div\">Div<\/a><\/li>\n<li><a href=\"#bloc_line\">Premissas de Bloco e Linha<\/a><\/li>\n<li><a href=\"#alter\">Alternativas do HTML5<\/a><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h1 id=\"linha\">Elementos em linha<\/h1>\n<p>Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos:<\/p>\n<ul>\n<li>&lt;a&gt; Define um link ou a\u0302ncora<\/li>\n<li>&lt;strong&gt; Define um destaque (ne\u0302grito)<\/li>\n<li>&lt;em&gt; Define uma e\u0302nfase (ita\u0301lico)<\/li>\n<li>&lt;img&gt; Define uma imagem<\/li>\n<li>&lt;input&gt; Define um campo de entrada de dados (formula\u0301rio)<\/li>\n<li>&lt;abbr&gt; Define uma abreviac\u0327a\u0303o (sigla)<\/li>\n<li>&lt;span&gt; Define um agrupamento de texto em linha<\/li>\n<\/ul>\n<h1 id=\"span\">Span<\/h1>\n<p class=\"column\">Devemos utilizar a span quando queremos modificar um elemento no meio de uma linha de texto. Aplicar um estilo especi\u0301fico, por exemplo (negrito + cor a um elemento).<\/p>\n<div class=\"column\">O texto segue normal e, de repente, fica <span style=\"color: #ff0000;\">vermelho<\/span>.<\/div>\n<div class=\"column\"><\/div>\n<div class=\"column\"><\/div>\n<div class=\"column\">Abaixo o exemplo em HTML (com CSS embutido).<\/div>\n<div class=\"column\"><\/div>\n<pre class=\"column\">&lt;p&gt; O texto segue normal e, de repente, fica &lt;span style=\u201ccolor:red\u201d&gt;vermelho.&lt;\/span&gt;&lt;\/p&gt;<\/pre>\n<h1 id=\"block\">Elementos em bloco<\/h1>\n<p>Os elementos de blocos sa\u0303o como caixas, que dividem o conteu\u0301do nas sec\u0327o\u0303es do layout.<\/p>\n<ul>\n<li>&lt;h1&gt; Define um ti\u0301tulo ni\u0301vel 1<\/li>\n<li>&lt;p&gt; Define um para\u0301grafo<\/li>\n<li>&lt;ol&gt; Define uma lista ordenada<\/li>\n<li>&lt;ul&gt; Define uma lista na\u0303o ordenada<\/li>\n<li>&lt;li&gt; Define um item de lista<\/li>\n<li>&lt;table&gt; Define uma tabela<\/li>\n<li>&lt;div&gt; Define uma divisa\u0303o ou sec\u0327a\u0303o do documento<\/li>\n<\/ul>\n<h1 id=\"div\">Div<\/h1>\n<p class=\"layoutArea\">Devemos utilizar a div quando queremos dividir e\/ou modificar um grupo de elementos de bloco numa parte do documento.<\/p>\n<p class=\"layoutArea\">Exemplos: Fazer um texto \u201cflutuar\u201d a\u0300 esquerda ou a grupar elementos similares (links)<\/p>\n<p class=\"layoutArea\"><a href=\"http:\/\/ricardoartur.com.br\/mmr2\/files\/2014\/10\/page_container.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-49\" src=\"http:\/\/ricardoartur.com.br\/mmr2\/files\/2014\/10\/page_container.gif\" alt=\"page_container\" width=\"473\" height=\"617\" \/><\/a><\/p>\n<h1 id=\"bloc_line\">Premissas: bloco e linha<\/h1>\n<p>Abaixo segue algumas premissas para relembrar e conhecer:<\/p>\n<ul>\n<li>Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a na\u0303o pode conter o elemento label.<\/li>\n<li>Os elementos de linha nunca podem conter elementos de bloco.<\/li>\n<li>Elementos de bloco sempre podem conter elementos de linha.<\/li>\n<li>Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um para\u0301grafo na\u0303o pode conter um DIV. Mas o contra\u0301rio e\u0301 possi\u0301vel.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h1 id=\"alter\">Alternativas do HTML5<\/h1>\n<p>No lugar das gene\u0301ricas&lt;divs&gt; do HTML4, o HTML5 favorece a web sema\u0302ntica por possuir tags de organizac\u0327a\u0303o dos conteu\u0301dos mais descritivas.<\/p>\n<ul>\n<li>&lt;header&gt; para cabec\u0327alhos da pa\u0301gina<\/li>\n<li>&lt;nav&gt; para links de navegac\u0327a\u0303o (menu)<\/li>\n<li>&lt;article&gt; para artigos, textos e postagens<\/li>\n<li>&lt;section&gt; para sec\u0327o\u0303es do conteu\u0301do<\/li>\n<li>&lt;aside&gt; para textos secunda\u0301rios<\/li>\n<li>&lt;footer&gt; para rodape\u0301s<\/li>\n<\/ul>\n<p><a href=\"http:\/\/ricardoartur.com.br\/mmr2\/files\/2014\/10\/seccionando.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50\" src=\"http:\/\/ricardoartur.com.br\/mmr2\/files\/2014\/10\/seccionando.png\" alt=\"seccionando\" width=\"650\" height=\"527\" srcset=\"https:\/\/ricardoartur.com.br\/web\/files\/2014\/10\/seccionando.png 650w, https:\/\/ricardoartur.com.br\/web\/files\/2014\/10\/seccionando-300x243.png 300w, https:\/\/ricardoartur.com.br\/web\/files\/2014\/10\/seccionando-624x505.png 624w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Modelos de conteu\u0301do Dentre todas as categorias de modelos de conteu\u0301do, existem dois tipos de elementos: elementos de linha e de bloco. Veremos aqui: Elementos em linha Span Elementos em Bloco Div Premissas de Bloco e Linha Alternativas do HTML5<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[14,11,3,13,12],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-html","tag-artigo","tag-div","tag-html-2","tag-secao","tag-span"],"_links":{"self":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":9,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/posts\/44\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ricardoartur.com.br\/web\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}