{"id":188,"date":"2022-04-18T20:33:16","date_gmt":"2022-04-18T20:33:16","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=188"},"modified":"2023-02-27T11:07:52","modified_gmt":"2023-02-27T11:07:52","slug":"description-list-html","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/description-list-html\/","title":{"rendered":"Description List HTML"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>HTML Description List<\/strong><\/p>\n\n\n\n<p>There is another type of list, which is called a description list. Now, let&#8217;s have a look at it.<\/p>\n\n\n\n<p>As the name says, this list includes the description of something. It is like we are writing something(some term), and the definition\/description of that thing.<\/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 Description List | Lecture 9 | HTML tutorial for beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/ZCYHBlNHZZo?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, we are going to use some more tags, which are &lt;dl&gt;, &lt;dt&gt;, and &lt;dd&gt;. Let&#8217;s first explain these tags one by one, and then we will see a code for the description list.<\/p>\n\n\n\n<p>The dl tag \u2192 This tag defines a description list.<br>The dt tag \u2192 This tag defines a term in the description list.<br>the dd tag \u2192This tag represents the description of a particular term(simply, we are using it to describe a term).<\/p>\n\n\n\n<p>Have a look at the below example, where we are trying to make use of the description list &#8211;<\/p>\n\n\n\n<p><strong>&lt;!DOCTYPE html&gt;<\/strong><br><strong>&lt;html lang=&#8221;en&#8221;&gt;<\/strong><br><strong>&lt;head&gt;<\/strong><br><strong>&lt;meta charset=&#8221;UTF-8&#8243;&gt;<\/strong><br><strong>&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge&#8221;&gt;<\/strong><br><strong>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/strong><br><strong>&lt;title&gt;Some heading here&#8230;&lt;\/title&gt;<\/strong><br><strong>&lt;\/head&gt;<\/strong><br><strong>&lt;body&gt;<\/strong><br><strong>&lt;h1&gt;Description list&lt;\/h1&gt;<\/strong><br><strong>&lt;dl&gt;<\/strong><br><strong>&lt;dt&gt;HTML&lt;\/dt&gt;<\/strong><br><strong>&lt;dd&gt;HyperText Markup Language, or HTML, is a markup language, with help of which, we can create web pages.&lt;\/dd&gt;<\/strong><br><strong>&lt;br&gt;<\/strong><br><strong>&lt;dt&gt;CSS&lt;\/dt&gt;<\/strong><br><strong>&lt;dd&gt;Cascading Style Sheets, or CSS, is used to describe how the HTML elements are displayed on the webpage &lt;\/dd&gt;<\/strong><br><strong>&lt;br&gt;<\/strong><br><strong>&lt;dt&gt;JavaScript&lt;\/dt&gt;<\/strong><br><strong>&lt;dd&gt;JavaScript is the programming language for the web. with help of this, we can add interactivity to our webpages.&lt;\/dd&gt;<\/strong><br><strong>&lt;\/dl&gt;<\/strong><br><strong>&lt;\/body&gt;<\/strong><br><strong>&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=\"1023\" height=\"308\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/03\/Untitled-6.jpg\" alt=\"Description list HTML\" class=\"wp-image-58\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/03\/Untitled-6.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/03\/Untitled-6-300x90.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/03\/Untitled-6-768x231.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>So, as you can see, it looks like we are writing the definitions of some terms. This was about the different types of lists, and we can use the lists, as and when required.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML Description List There is another type of list, which is called a description list. Now, let&#8217;s have a look at it. As the name says, this list includes the description of something. It is like we are writing something(some term), and the definition\/description of that thing. Here, we are going to use some more [&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":[8,116],"class_list":{"0":"post-188","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-html-tutorial","7":"tag-html","8":"tag-html-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/188","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=188"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"predecessor-version":[{"id":4970,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/188\/revisions\/4970"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}