{"id":102,"date":"2022-04-22T21:09:53","date_gmt":"2022-04-22T21:09:53","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=102"},"modified":"2023-02-27T11:51:57","modified_gmt":"2023-02-27T11:51:57","slug":"html-div-tag","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/html-div-tag\/","title":{"rendered":"HTML Div Tag"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>HTML Div Tag<\/strong><\/p>\n\n\n\n<p>The div tag defines some division in the HTML document. You can think of the div as a container holding some other HTML elements. It is used to group some content so that it can be easily styled. Other than this, it does not have any other special meaning.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"HTML div Tag | Lecture 13 | HTML tutorial for beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/ArbIDhfeGFc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Here is an example for understanding the div tag\u2192<\/p>\n\n\n\n<p><strong>&lt;!DOCTYPE html&gt;<br>&lt;html lang=&#8221;en&#8221;&gt;<br>&lt;head&gt;<br>&lt;meta charset=&#8221;UTF-8&#8243;&gt;<br>&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge&#8221;&gt;<br>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<br>&lt;title&gt;Some heading&#8230;&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>&lt;div&gt;Hello&#8230; I am a div&lt;\/div&gt;<br>&lt;div&gt;Hello&#8230; I am another div&lt;\/div&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/strong><\/p>\n\n\n\n<p>If we try to open the file in the browser, we can find the output to be something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"126\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-Div-tag.jpg\" alt=\"\" class=\"wp-image-103\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-Div-tag.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-Div-tag-300x37.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-Div-tag-768x95.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, there are two containers here. The thing is that the div is a block element. Due to this, it is displayed with a newline before and after, and also it takes up the whole available horizontal space, and the vertical space according to the height of the content. You can explore more about the block-level elements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML Div Tag The div tag defines some division in the HTML document. You can think of the div as a container holding some other HTML elements. It is used to group some content so that it can be easily styled. Other than this, it does not have any other special meaning. Here is an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[120,116],"class_list":{"0":"post-102","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-html-tutorial","7":"tag-html-div-tag","8":"tag-html-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":4976,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/102\/revisions\/4976"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}