{"id":130010,"date":"2022-04-13T17:50:26","date_gmt":"2022-04-13T21:50:26","guid":{"rendered":"https:\/\/brainstation.io\/?post_type=codex-reference&#038;p=130010"},"modified":"2025-02-04T14:56:03","modified_gmt":"2025-02-04T19:56:03","slug":"tags","status":"publish","type":"codex-reference","link":"https:\/\/brainstation.io\/learn\/html\/tags","title":{"rendered":"Tags"},"content":{"rendered":"\n<header class=\"wp-block-bstn-blocks-hero-with-overview bstn-blocks-hero-with-overview\"><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--main\"><svg fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-hero-with-overview__bg-flair--full\"><g opacity=\"0.35\"><path d=\"M-103.887 96.613H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55-136.427v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332-232v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 100.134c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M-244.061 214.487H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55 214.009v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332 118.436v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 218.03c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M534.544 96.613h140.811m138.263 0H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 96.772v21.664-21.664zM813.618-232v350.436V-232zm139.218 0v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M535.357 100.134c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M673.444 214.487H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 118.436v228.739-228.739zm138.9 0v350.436-350.436zm139.218 0v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M813.696 218.03c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm-278.339 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><\/g><\/svg><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__copy-container\"><img decoding=\"async\" class=\"bstn-blocks-hero-with-overview__title-icon\" src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/12102435\/HTML-CSS-Light.svg\" alt=\"\"\/><p class=\"bstn-blocks-hero-with-overview__subtitle\"><meta charset=\"utf-8\">HTML &amp; CSS References<\/p><h1 class=\"bstn-blocks-hero-with-overview__title\">HTML Tags<\/h1><p class=\"bstn-blocks-hero-with-overview__description\">Learn what HTML tags are and how to use them.<\/p><\/div><div class=\"bstn-blocks-hero-with-overview__image-container\"><img decoding=\"async\" class=\"bstn-blocks-hero-with-overview__image\" src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/12115013\/HTML-CSS-Light-Transparent.svg\" alt=\"\"\/><\/div><\/div><\/div><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--offset\"><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__card-container\"><div class=\"bstn-blocks-hero-with-overview__copy-card\"><nav class=\"bstn-blocks-hero-overview\"><h2 class=\"bstn-blocks-hero-overview__title\"><meta charset=\"utf-8\">Tutorial Contents<\/h2><ol class=\"bstn-blocks-hero-overview__list\">\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#what-are-html-tags\">What are HTML Tags<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-paragraph\">HTML Paragraph<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-anchor\">HTML Anchor<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-heading\">HTML Heading<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-image\">HTML Image<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-title\">HTML Title<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-style-tag\">HTML Style Tag<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-list-tags\">HTML List Tags<\/a><\/li>\n<\/ol><\/nav><\/div><\/div><\/div><\/div><\/header>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"what-are-html-tags\"><h2 class=\"bstn-blocks-heading__heading-element\">What are HTML Tags<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">HTML tags represent all the information within an HTML document. HTML tags and elements are very similar and often get confused with one another.&nbsp;<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">An HTML tag is defined as starting with &lt; and ending with >, whereas an HTML element is the combination of the opening tag and its attributes, the content between the tags, and the closing tag.\u00a0<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Div Tags: <code>&lt;div&gt;<\/code><sup>1<\/sup>some content\u2026<code>&lt;\/div&gt;<\/code><sup>2<\/sup><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Starting\/Opening tag<\/li><li>Ending\/Closing tag<\/li><\/ol>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Div Element: <code>&lt;div&gt;some content\u2026&lt;\/div&gt;<\/code><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-paragraph\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML Paragraph<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">The HTML <code>&lt;p&gt;<\/code> tag is used to define a paragraph element. Anything included within the opening and closing tags is treated as a paragraph when our HTML is rendered in the browser. By default, a paragraph element has a display of block and takes up all the available space width-wise.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-anchor\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML Anchor<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">The HTML <code>&lt;a&gt;<\/code> tag is used to define an anchor element. An anchor element is used to link to either an internal or external resource, including web pages. An anchor element has a default display of inline, meaning it will respect the constraints of its content and will not respond to changes in width or height.&nbsp;<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">We use something called \u201cattributes\u201d to provide information to the opening anchor tag that indicates where to find the resource we are linking to. The content within the opening and closing tags will be what is displayed on our web page.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Syntax: <code>&lt;a href=\u201curl\u201d&gt;Text to Display&lt;\/a&gt;&nbsp;<\/code><\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Example: <code>&lt;a href=\u201c<a href=\"http:\/\/www.google.com\">http:\/\/www.google.com<\/a>\u201d&gt;Go To Google&lt;\/a&gt;<\/code>&nbsp;<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">This example would show the text \u201cGo To Google\u201d on our web page, and when clicked would show the website at the url \u201c<a href=\"http:\/\/www.google.com\">http:\/\/www.google.com<\/a>\u201d<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-heading\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML Heading<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">An HTML heading element is used to define the titles or subtitles of a section of content. HTML has 6 different levels of heading. The heading tags we use are <code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, <code>&lt;h3&gt;<\/code>, <code>&lt;h4&gt;<\/code>, <code>&lt;h5&gt;<\/code>, <code>&lt;h6&gt;<\/code>. <code>&lt;h1&gt;<\/code> is the highest importance level, and <code>&lt;h6&gt;<\/code> is the least importance level.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">&nbsp;Search engines use these headings to gain an understanding of the content within. We should always use HTML heading elements to communicate the structure and content of our web page, and not for the styling that they provide.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-image\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML Image<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">An HTML image tag is used to show an image on a web page. An image is an example of a self-closing tag since there is no need to nest content between opening and closing tags, the opening tag has all the information it needs to show the image! We use something called \u201cattributes\u201d to provide information to the image tag that indicates where to find the image to show.&nbsp;<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Syntax: <code>&lt;img src=\u201curl\u201d alt=\u201calternateText\u201d \/&gt;<\/code><\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Example: <code>&lt;img src=\u201c\u201d alt=\u201c\u201d \/&gt;<\/code><\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">We use a <code>src<\/code> attribute to provide a link to the image, and we use an <code>alt<\/code> attribute to&nbsp; provide extra information or context about what can be seen in the image, in case a viewer needs an extra accessibility consideration.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-title\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML Title<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">The HTML title tag is used to define the title of our document. This is a required tag in our HTML and very important for search engines. The title element does a few different things for us:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It defines the tab title in our browser<\/li><li>It\u2019s the suggested title for the web page when added as a bookmark<\/li><li>It\u2019s the displayed title for our web page in search engine results<\/li><\/ul>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-style-tag\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML Style Tag<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">An HTML style tag is used to define internal CSS styling for a document. The content included within the <code>&lt;style&gt;<\/code> tags must be valid CSS for the document. The <code>&lt;style&gt;<\/code> tag is generally included within the head of the HTML document. We can also use a <code>&lt;link&gt;<\/code> tag within the head of the document to link to an external stylesheet, which is generally the preferred method for including CSS styles within a web page.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-list-tags\"><h2 class=\"bstn-blocks-heading__heading-element\">HTML List Tags<\/h2><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">An HTML List tag is used to represent content in a list format, the most popular being either a bulleted or numbered list.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A bulleted list is referred to as an \u201cunordered list\u201d and is represented by using the <code>&lt;ul&gt;<\/code> tag.&nbsp;<\/li><li>A numbered list is referred to as an \u201cordered list\u201d and is represented by using the <code>&lt;ol&gt;<\/code> tag.&nbsp;<\/li><li>A less popular description list is represented by using the <code>&lt;dl&gt;<\/code> tag.<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The <code>&lt;ul&gt;<\/code> and <code>&lt;ol&gt;<\/code> tags are used as container tags to represent the content within. In order to include items within the list, we use a \u201clist item\u201d tag (<code>&lt;li&gt;<\/code>). We can have as many list items as we need, but we should have at least one.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Example Unordered List<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces language-markup\" data-language=\"markup\" aria-readonly=\"true\"><code>&lt;ul>\n  &lt;li>List item 1&lt;\/li>\n  &lt;li>List item 2&lt;\/li>\n&lt;\/ul><\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-10 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The <code>&lt;dl&gt;<\/code> tag has a slightly different structure than the former <code>&lt;ul&gt;<\/code> &amp; <code>&lt;ol&gt;<\/code> tags. Rather than use <code>&lt;li&gt;<\/code> tags, we use groups of <code>&lt;dt&gt;<\/code> and <code>&lt;dd&gt;<\/code> tags. These represent a \u201cdescription term\u201d and \u201cdescription definition\u201d.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Example Description List<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces language-markup\" data-language=\"markup\" aria-readonly=\"true\"><code>&lt;dl>\n\t&lt;dt>Description Term 1&lt;\/dt>\n\t&lt;dd>Description Definition 1&lt;\/dd>\n\t\n\t&lt;dt>Description Term 2&lt;\/dt>\n\t&lt;dd>Description Definition 2&lt;\/dd>\n&lt;\/dl><\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-content-navigation-footer bstn-blocks-content-nav-footer bstn-blocks-content-nav-footer--docs\"><div class=\"bstn-blocks-content-nav-footer__links-container\"><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title bstn-blocks-content-nav-footer__link--desktop\">Previous Tutorial<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"\/learn\/html\/elements\"><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--left\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--left\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><span class=\"bstn-blocks-content-nav-footer__link-text bstn-blocks-content-nav-footer__link--desktop\">HTML Elements<\/span><\/a><\/div><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title\">Next Tutorial<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"\/learn\/html\/attributes\"><span class=\"bstn-blocks-content-nav-footer__link-text\">HTML Attributes<\/span><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--right\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--right\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><\/a><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-container bstn-blocks-container bstn-blocks-container--dark-blue bstn-blocks-container--64 bstn-blocks-container--negative-container bstn-blocks-container--overflow-hidden\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1140 621\" fill=\"none\" class=\"bstn-blocks-container__bg-flair\"><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.026 736.434V203.02\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.364 436.132L-120 436.131l180.364.001zm0-99.873H-120 60.364zm0-99.872H-120 60.364zM128 536.004h-248 248z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M57.518 535.982a2.286 2.286 0 114.572 0 2.286 2.286 0 01-4.572 0zm0-99.836a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002z\" cliprule=\"evenodd\"><\/path><\/g><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M979.195-28.206V397.98m81.185-524.745V397.98\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M1141.45 168.46H964h177.45zm0 98.334H964h177.45zm0 98.333H964h177.45zm66.55-295H964h244z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M1138.66 70.148a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49-.001zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.25zm-81.707 0a2.25 2.25 0 104.5.004 2.25 2.25 0 00-4.5-.005zm81.707 98.299a2.252 2.252 0 002.25 2.251 2.252 2.252 0 000-4.503 2.253 2.253 0 00-2.25 2.252zm-81.707 0a2.25 2.25 0 104.498 0 2.25 2.25 0 00-2.249-2.252 2.25 2.25 0 00-2.249 2.252zm161.917-.001a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm0 98.299a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm81.707 98.299c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm161.917 0a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0z\" cliprule=\"evenodd\"><\/path><\/g><\/svg><div class=\"bstn-blocks-container__wrapper bstn-blocks-container__wrapper--readable-width bstn-blocks-container__wrapper--negative-container\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-11 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h2 has-text-align-left bstn-blocks-heading--divider\"><h3 class=\"bstn-blocks-heading__heading-element\">Learn HTML &amp; CSS Today<\/h3><\/div>\n\n\n\n<p>Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform &#8211; no downloads or complicated setup required.<\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list is-style-kg-list-checklist-alternate\"><li>Free and fun<\/li><li>Designed for beginners<\/li><li>No download or setup required<\/li><\/ul>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-bstn-button-primary\"><a class=\"wp-block-button__link\" href=\"\/learn\/html\">Get Started<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/13110641\/CSS-promo-clip.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>HTML tags represent all the information within an HTML document. HTML tags and elements are very similar and often get confused with one another.&nbsp; An HTML tag is defined as starting with &lt; and ending with >, whereas an HTML element is the combination of the opening tag and its attributes, the content between the [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":129964,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-130010","codex-reference","type-codex-reference","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/130010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference"}],"about":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/types\/codex-reference"}],"version-history":[{"count":10,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/130010\/revisions"}],"predecessor-version":[{"id":133458,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/130010\/revisions\/133458"}],"up":[{"embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129964"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/media?parent=130010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/categories?post=130010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/tags?post=130010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}