{"id":99,"date":"2022-04-22T21:04:26","date_gmt":"2022-04-22T21:04:26","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=99"},"modified":"2023-02-27T11:56:00","modified_gmt":"2023-02-27T11:56:00","slug":"html-span-tag","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/html-span-tag\/","title":{"rendered":"HTML span Tag"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>HTML span Tag<\/strong><\/p>\n\n\n\n<p>The span tag can be thought of as an inline container for some part of a document or some text. Using the span tag, we can easily style the content with CSS, or can also be manipulated using JavaScript, using some class or id attributes here. Other than this, the <strong>span tag<\/strong> has no special meaning. It is just a generic inline container, which can be used to contain the elements for styling purposes.<\/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=\"Span Tag in HTML | Lecture 14 | HTML tutorial for beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/0YG35zvN7E8?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>Well, this tag is similar to the div tag (Which we are going to see ahead), with the difference that the div tag is a block element, and the span is an inline element.<\/p>\n\n\n\n<p>Here is the code for using the span 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;span&gt;Hello&#8230; i am a span&lt;\/span&gt;<br>&lt;span&gt;Hello&#8230; I am another span&lt;\/span&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, the output is 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=\"105\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-span-tag.jpg\" alt=\"\" class=\"wp-image-100\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-span-tag.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-span-tag-300x31.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/HTML-span-tag-768x79.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, the content is now side by side. The reason is that the span element is an inline element, which means that it takes up the space it requires and leaves the other space. Unlike this, the block elements add a line break, so that the next content comes to the new line. We are going to see the div tag soon, through which, you will get an idea of the block element. Remember that the span is an inline element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML span Tag The span tag can be thought of as an inline container for some part of a document or some text. Using the span tag, we can easily style the content with CSS, or can also be manipulated using JavaScript, using some class or id attributes here. Other than this, the span tag [&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":[121,116],"class_list":{"0":"post-99","1":"post","2":"type-post","3":"status-publish","4":"format-standard","7":"tag-html-span-tag","8":"tag-html-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/99","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=99"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":4981,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/99\/revisions\/4981"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}