{"id":12,"date":"2024-01-18T20:27:56","date_gmt":"2024-01-18T20:27:56","guid":{"rendered":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?p=12"},"modified":"2024-03-27T14:50:18","modified_gmt":"2024-03-27T14:50:18","slug":"html-text-tags-understanding-blocks-and-inlines","status":"publish","type":"post","link":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/","title":{"rendered":"Text Tags: Blocks, headings and Inlines a quick start \u270d"},"content":{"rendered":"\n<p>In the world of HTML, text is a fundamental component, and understanding the various tags associated with it is crucial. In the body tag of an HTML document, you&#8217;ll often encounter two main categories of elements: block elements and inline elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-elements-vs-inline-elements\">Block Elements vs. Inline Elements<\/h3>\n\n\n\n<p>Before delving into specific tags, it&#8217;s essential to grasp the distinction between block and inline elements.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block Elements:<\/strong> These include tags such as <code>&lt;p&gt;<\/code>, <code>&lt;div&gt;<\/code>, heading elements (<code>&lt;h1&gt;<\/code> to <code>&lt;h6&gt;<\/code>), lists, and list items. When positioned on a page, block elements do not permit other elements to be visualized next to them. They typically create a new &#8220;block&#8221; or section in the layout.<\/li>\n\n\n\n<li><strong>Inline Elements:<\/strong> On the other hand, inline elements, like the <code>&lt;span&gt;<\/code> tag, can sit next to other inline elements. Unlike block elements, inline elements allow content to flow alongside them. Moreover, inline elements can be contained within block elements, but the reverse is not true.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-p-tag-and-inline-elements\">The <code>&lt;p&gt;<\/code> Tag and Inline Elements<\/h3>\n\n\n\n<p>Let&#8217;s explore the <code>&lt;p&gt;<\/code> tag, which defines a paragraph of text and is considered a block element:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;p&gt;Some text&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>The block aspect of the <code>&lt;p&gt;<\/code> tag becomes evident when the tag is placed on its own line. Within a <code>&lt;p&gt;<\/code> tag, you can include inline elements, such as the <code>&lt;span&gt;<\/code> tag:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;p&gt;A part of the text &lt;span&gt;and here another part&lt;\/span&gt;&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"heading-tags-h1-to-h6\">Heading Tags (<code>&lt;h1&gt;<\/code> to <code>&lt;h6&gt;<\/code>)<\/h3>\n\n\n\n<p>HTML provides six heading tags, ranging from <code>&lt;h1&gt;<\/code> (most important) to <code>&lt;h6&gt;<\/code> (least important). Typically, a page features one <code>&lt;h1&gt;<\/code> element, serving as the page title. Subsequent headings, like <code>&lt;h2&gt;<\/code> to <code>&lt;h6&gt;<\/code>, represent varying levels of importance. Browsers render <code>&lt;h1&gt;<\/code> larger by default, gradually decreasing the size as the heading level increases:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;h1&gt;h1&lt;\/h1&gt;\n&lt;h2&gt;h2&lt;\/h2&gt;\n&lt;h3&gt;h3&lt;\/h3&gt;\n&lt;h4&gt;h4&lt;\/h4&gt;\n&lt;h5&gt;h5&lt;\/h5&gt;\n&lt;h6&gt;h6&lt;\/h6&gt;\n&lt;p&gt;Paragraph&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>All heading tags are block elements and cannot contain other block elements. However, they can include inline elements, like <code>&lt;span&gt;<\/code> or <code>&lt;strong&gt;<\/code>.<\/p>\n\n\n\n<p>Understanding the distinction between block and inline elements, as well as the specific attributes of tags like <code>&lt;p&gt;<\/code> and heading tags, is foundational to creating well-structured HTML documents. As you continue your journey in web development, these insights will prove invaluable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the world of HTML, text is a fundamental component, and understanding the various tags associated with it is crucial. In the body tag of&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,22,20],"tags":[],"class_list":["post-12","post","type-post","status-publish","format-standard","hentry","category-code","category-2-html","category-tech"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Text Tags: Blocks, headings and Inlines a quick start \u270d - Zento<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Text Tags: Blocks, headings and Inlines a quick start \u270d - Zento\" \/>\n<meta property=\"og:description\" content=\"In the world of HTML, text is a fundamental component, and understanding the various tags associated with it is crucial. In the body tag of...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/\" \/>\n<meta property=\"og:site_name\" content=\"Zento\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T20:27:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T14:50:18+00:00\" \/>\n<meta name=\"author\" content=\"Jonathan Doe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan Doe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/\",\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/\",\"name\":\"Text Tags: Blocks, headings and Inlines a quick start \u270d - Zento\",\"isPartOf\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website\"},\"datePublished\":\"2024-01-18T20:27:56+00:00\",\"dateModified\":\"2024-03-27T14:50:18+00:00\",\"author\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55\"},\"breadcrumb\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text Tags: Blocks, headings and Inlines a quick start \u270d\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website\",\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/\",\"name\":\"Zento\",\"description\":\"Thoughts, stories and ideas.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55\",\"name\":\"Jonathan Doe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g\",\"caption\":\"Jonathan Doe\"},\"description\":\"Actively writing articles for this website. I really like traveling and photography, follow me on @Twitter i share content there everyday.\",\"sameAs\":[\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\"],\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Text Tags: Blocks, headings and Inlines a quick start \u270d - Zento","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:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/","og_locale":"en_US","og_type":"article","og_title":"Text Tags: Blocks, headings and Inlines a quick start \u270d - Zento","og_description":"In the world of HTML, text is a fundamental component, and understanding the various tags associated with it is crucial. In the body tag of...","og_url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/","og_site_name":"Zento","article_published_time":"2024-01-18T20:27:56+00:00","article_modified_time":"2024-03-27T14:50:18+00:00","author":"Jonathan Doe","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan Doe","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/","url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/","name":"Text Tags: Blocks, headings and Inlines a quick start \u270d - Zento","isPartOf":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website"},"datePublished":"2024-01-18T20:27:56+00:00","dateModified":"2024-03-27T14:50:18+00:00","author":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55"},"breadcrumb":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/html-text-tags-understanding-blocks-and-inlines\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/"},{"@type":"ListItem","position":2,"name":"Text Tags: Blocks, headings and Inlines a quick start \u270d"}]},{"@type":"WebSite","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website","url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/","name":"Zento","description":"Thoughts, stories and ideas.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55","name":"Jonathan Doe","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g","caption":"Jonathan Doe"},"description":"Actively writing articles for this website. I really like traveling and photography, follow me on @Twitter i share content there everyday.","sameAs":["https:\/\/themes.estudiopatagon.com\/wordpress\/zento"],"url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":1,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts\/12\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}