CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>div and span - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"49da85f6-369d-40e5-b442-aafaa25e6696","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Div_and_span","wgTitle":"Div and span","wgCurRevisionId":1234768901,"wgRevisionId":1234768901,"wgArticleId":3212154,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["All articles with dead external links","Articles with dead external links from May 2024","Articles with short description","Short description matches Wikidata","Wikipedia articles needing clarification from June 2023","HTML tags","HTML"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Div_and_span","wgRelevantArticleId":3212154,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[], "wgRestrictionMove":[],"wgRedirectedFrom":"Span_and_div","wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":10000,"wgInternalRedirectTargetUrl":"/wiki/Div_and_span","wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q107293011","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"], "GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.cite.ux-enhancements","ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar", "ext.centralauth.centralautologin","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="div and span - Wikipedia"> <meta property="og:type" content="website"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Div_and_span"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Div_and_span&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Div_and_span"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Div_and_span rootpage-Div_and_span skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Div+and+span" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Div+and+span" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Div+and+span" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Div+and+span" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Examples" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Examples</span> </div> </a> <ul id="toc-Examples-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-History" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>History</span> </div> </a> <ul id="toc-History-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Differences_and_default_behaviour" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Differences_and_default_behaviour"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Differences and default behaviour</span> </div> </a> <ul id="toc-Differences_and_default_behaviour-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Practical_usage" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Practical_usage"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Practical usage</span> </div> </a> <button aria-controls="toc-Practical_usage-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Practical usage subsection</span> </button> <ul id="toc-Practical_usage-sublist" class="vector-toc-list"> <li id="toc-Styling_with_CSS" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Styling_with_CSS"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>Styling with CSS</span> </div> </a> <ul id="toc-Styling_with_CSS-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Semantic_clarity" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Semantic_clarity"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>Semantic clarity</span> </div> </a> <ul id="toc-Semantic_clarity-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Access_from_code" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Access_from_code"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span> <span>Access from code</span> </div> </a> <ul id="toc-Access_from_code-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Overuse" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Overuse"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Overuse</span> </div> </a> <ul id="toc-Overuse-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-External_links" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#External_links"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>External links</span> </div> </a> <ul id="toc-External_links-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">div and span</h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 4 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-4" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">4 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D9%82%D8%B3%D9%85_%D9%88%D9%81%D8%AA%D8%B1%D8%A9" title="قسم وفترة – Arabic" lang="ar" hreflang="ar" data-title="قسم وفترة" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/Div%EC%99%80_span" title="Div와 span – Korean" lang="ko" hreflang="ko" data-title="Div와 span" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/Div_and_span" title="Div and span – Simple English" lang="en-simple" hreflang="en-simple" data-title="Div and span" data-language-autonym="Simple English" data-language-local-name="Simple English" class="interlanguage-link-target"><span>Simple English</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/Div_and_span" title="Div and span – Ukrainian" lang="uk" hreflang="uk" data-title="Div and span" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target"><span>Українська</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q107293011#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Div_and_span" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Div_and_span" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Div_and_span"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Div_and_span&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Div_and_span&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Div_and_span"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Div_and_span&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Div_and_span&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Div_and_span" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Div_and_span" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Div_and_span&oldid=1234768901" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Div_and_span&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Div_and_span&id=1234768901&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDiv_and_span"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDiv_and_span"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Div_and_span&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Div_and_span&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q107293011" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><span class="mw-redirectedfrom">(Redirected from <a href="/w/index.php?title=Span_and_div&redirect=no" class="mw-redirect" title="Span and div">Span and div</a>)</span></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">HTML elements used to define parts of a document</div> <style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1246091330">.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}</style><table class="sidebar nomobile nowraplinks"><tbody><tr><th class="sidebar-title"><a href="/wiki/HTML" title="HTML">HTML</a></th></tr><tr><td class="sidebar-content hlist"> <ul><li><a href="/wiki/Dynamic_HTML" title="Dynamic HTML">Dynamic HTML</a></li> <li><a href="/wiki/HTML5" title="HTML5">HTML5</a> <ul><li><a href="/wiki/Article_element" title="Article element">article</a></li> <li><a href="/wiki/HTML_audio" title="HTML audio">audio</a></li> <li><a href="/wiki/Canvas_element" title="Canvas element">canvas</a></li> <li><a href="/wiki/HTML_video" title="HTML video">video</a></li></ul></li> <li><a href="/wiki/XHTML" title="XHTML">XHTML</a> <ul><li><a href="/wiki/XHTML_Basic" title="XHTML Basic">Basic</a></li> <li><a href="/wiki/XHTML_Mobile_Profile" title="XHTML Mobile Profile">Mobile Profile</a></li></ul></li> <li><a href="/wiki/HTML_element" title="HTML element">HTML element</a> <ul><li><a href="/wiki/Meta_element" title="Meta element">meta</a></li> <li><a class="mw-selflink selflink">div and span</a></li> <li><a href="/wiki/Blink_element" title="Blink element">blink</a></li> <li><a href="/wiki/Marquee_element" title="Marquee element">marquee</a></li></ul></li> <li><a href="/wiki/HTML_attribute" title="HTML attribute">HTML attribute</a> <ul><li><a href="/wiki/Alt_attribute" title="Alt attribute">alt attribute</a></li></ul></li> <li><a href="/wiki/Frame_(World_Wide_Web)" title="Frame (World Wide Web)">HTML frame</a></li> <li><a href="/wiki/HTML_editor" title="HTML editor">HTML editor</a></li> <li><a href="/wiki/Character_encodings_in_HTML" title="Character encodings in HTML">Character encodings</a> <ul><li><a href="/wiki/List_of_XML_and_HTML_character_entity_references" title="List of XML and HTML character entity references">named characters</a></li> <li><a href="/wiki/Unicode_and_HTML" title="Unicode and HTML">Unicode</a></li></ul></li> <li><a href="/wiki/Language_code" title="Language code">Language code</a></li> <li><a href="/wiki/Document_Object_Model" title="Document Object Model">Document Object Model</a></li> <li><a href="/wiki/Browser_Object_Model" title="Browser Object Model">Browser Object Model</a></li> <li><a href="/wiki/Style_sheet_(web_development)" title="Style sheet (web development)">Style sheets</a> <ul><li><a href="/wiki/CSS" title="CSS">CSS</a></li></ul></li> <li><a href="/wiki/Font_family_(HTML)" title="Font family (HTML)">Font family</a></li> <li><a href="/wiki/Web_colors" title="Web colors">Web colors</a></li> <li><a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> <ul><li><a href="/wiki/WebCL" title="WebCL">WebCL</a></li> <li><a href="/wiki/HTMX" class="mw-redirect" title="HTMX">HTMX</a></li></ul></li> <li><a href="/wiki/Web3D" title="Web3D">Web3D</a> <ul><li><a href="/wiki/WebGL" title="WebGL">WebGL</a></li> <li><a href="/wiki/WebGPU" title="WebGPU">WebGPU</a></li> <li><a href="/wiki/WebXR" title="WebXR">WebXR</a></li></ul></li> <li><a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a> <ul><li><a href="/wiki/W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Validator</a></li></ul></li> <li><a href="/wiki/WHATWG" title="WHATWG">WHATWG</a></li> <li><a href="/wiki/Quirks_mode" title="Quirks mode">Quirks mode</a></li> <li><a href="/wiki/Web_storage" title="Web storage">Web storage</a></li> <li><a href="/wiki/Browser_engine" title="Browser engine">Rendering engine</a></li></ul></td> </tr><tr><th class="sidebar-heading"> Comparisons</th></tr><tr><td class="sidebar-content hlist"> <ul><li><a href="/wiki/Comparison_of_document_markup_languages" title="Comparison of document markup languages">Document markup languages</a></li> <li><a href="/wiki/Comparison_of_browser_engines" title="Comparison of browser engines">Comparison of browser engines</a></li></ul></td> </tr><tr><td class="sidebar-navbar" style="border-top:1px solid #aaa;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:HTML" title="Template:HTML"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:HTML" title="Template talk:HTML"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:HTML" title="Special:EditPage/Template:HTML"><abbr title="Edit this template">e</abbr></a></li></ul></div></td></tr></tbody></table> <p>In <a href="/wiki/HTML" title="HTML">HTML</a>, the standard <a href="/wiki/Markup_language" title="Markup language">markup language</a> for documents designed to be displayed in a <a href="/wiki/Web_browser" title="Web browser">web browser</a>, <code class="nowrap" style=""><div></code> and <code class="nowrap" style=""><span></code> <a href="/wiki/HTML_element" title="HTML element">tags</a> are elements used to define parts of a <a href="/wiki/Web_document" class="mw-redirect" title="Web document">document</a>, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <code class="nowrap" style=""><p></code> (paragraph), <code class="nowrap" style=""><em></code> (emphasis), and so on, accurately represent the <a href="/wiki/Semantic_Web" title="Semantic Web">semantics</a> of the content, the additional use of <code class="nowrap" style=""><span></code> and <code class="nowrap" style=""><div></code> tags leads to better <a href="/wiki/Web_accessibility" title="Web accessibility">accessibility</a> for readers and easier <a href="/wiki/Maintainability" title="Maintainability">maintainability</a> for authors. Where no existing HTML element is applicable, <code class="nowrap" style=""><span></code> and <code class="nowrap" style=""><div></code> can valuably represent parts of a document so that <a href="/wiki/HTML_attribute" title="HTML attribute">HTML attributes</a> such as <code>class</code>, <code>id</code>, <code>lang</code>, or <code>dir</code> can be applied.<sup id="cite_ref-HTML5-div_1-0" class="reference"><a href="#cite_note-HTML5-div-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-HTML5-span_2-0" class="reference"><a href="#cite_note-HTML5-span-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p><p><code class="nowrap" style=""><span></code> represents an <a href="/wiki/HTML_element#Inline_elements" title="HTML element">inline</a> portion of a document, for example words within a sentence. <code class="nowrap" style=""><div></code> represents a <a href="/wiki/HTML_element#Block_elements" title="HTML element">block-level</a> portion of a document such as a few paragraphs, or an image with its caption. <code class="nowrap" style=""><div></code> stands for division. The elements allow semantic attributes (e.g. <code>lang="en-US"</code>), <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">CSS</a> styling (e.g., color and typography), or <a href="/wiki/Client-side_scripting" class="mw-redirect" title="Client-side scripting">client-side scripting</a> (e.g., animation, hiding, and augmentation) to be applied.<sup id="cite_ref-HTML5-div_1-1" class="reference"><a href="#cite_note-HTML5-div-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-HTML5-span_2-1" class="reference"><a href="#cite_note-HTML5-span-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p><p><code class="nowrap" style=""><div></code> defines a 'division' of the document, a block-level item that is more distinct from elements above and below it than a span of inline material.<sup id="cite_ref-:0_3-0" class="reference"><a href="#cite_note-:0-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Examples">Examples</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=1" title="Edit section: Examples"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>For example, to make a certain part of text inside a paragraph red, <code class="nowrap" style=""><span></code> can be used as follows: <sup class="noprint Inline-Template" style="margin-left:0.1em; white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Please_clarify" title="Wikipedia:Please clarify"><span title="The text near this tag may need clarification or removal of jargon. (June 2023)">clarification needed</span></a> (also include a <code class="nowrap" style=""><div></code> example)</i>]</sup> </p> <table class="wikitable"> <tbody><tr> <th style="width:33.3%;">HTML <a href="/wiki/Syntax_(programming)" class="mw-redirect" title="Syntax (programming)">syntax</a><br /><span style="font-weight: normal; font-size: 98%">(web code used to add formatting to text)</span> </th> <th style="width:33.3%;">Rendered output<br /><span style="font-weight: normal; font-size: 98%">(as seen by visitors of the webpage)</span> </th></tr> <tr style="vertical-align:top;"> <td><div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span>I am <span class="p"><</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: red;"</span><span class="p">></span>red<span class="p"></</span><span class="nt">span</span><span class="p">></span> and I am <span class="p"><</span><span class="nt">span</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: blue;"</span><span class="p">></span>blue<span class="p"></</span><span class="nt">span</span><span class="p">></span>! </pre></div> </td> <td><br />I am <span style="color: red;">red</span> and I am <span style="color: blue;">blue</span>! </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="History">History</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=2" title="Edit section: History"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <code class="nowrap" style=""><span></code> element was introduced to <a href="/wiki/HTML#Version_history_of_the_standard" title="HTML">HTML</a> in the internationalization working group's second draft <a rel="nofollow" class="external text" href="http://tools.ietf.org/html/draft-ietf-html-i18n-01">html-i18n</a> in 1995. However, it was not until HTML 4.01 that it became part of the HTML language, appearing in the HTML 4 W3C Working Draft in 1997.<sup id="cite_ref-:1_4-0" class="reference"><a href="#cite_note-:1-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> </p><p><code class="nowrap" style=""><span></code> was introduced to mark up any inline span of text, because 'a generic container is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate.' It still serves that general purpose, although a much richer range of semantic elements have been defined since then, and there are also many more attributes that may need to be applied. </p> <div class="mw-heading mw-heading2"><h2 id="Differences_and_default_behaviour">Differences and default behaviour</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=3" title="Edit section: Differences and default behaviour"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There are multiple differences between <code class="nowrap" style=""><div></code> and <code class="nowrap" style=""><span></code>. The most notable difference is how the elements are displayed. In standard HTML, a <code class="nowrap" style=""><div></code> is a <a href="/wiki/Block-level_element" class="mw-redirect" title="Block-level element">block-level element</a> whereas a <code class="nowrap" style=""><span></code> is an <a href="/wiki/Inline_element" class="mw-redirect" title="Inline element">inline element</a>. The <code class="nowrap" style=""><div></code> block visually isolates a section of a document on the page, and may contain other block-level components. The <code class="nowrap" style=""><span></code> element contains a piece of information inline with the surrounding content, and may only contain other inline-level components. In practice, the default display of the elements can be changed by the use of <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a> (CSS), although the permitted contents of each element may not be changed. For example, regardless of CSS, a <code class="nowrap" style=""><span></code> element may not contain block-level children.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Practical_usage">Practical usage</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=4" title="Edit section: Practical usage"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><code class="nowrap" style=""><span></code> and <code class="nowrap" style=""><div></code> elements are used purely to imply a logical grouping of enclosed elements. </p><p>There are three main reasons to use <code class="nowrap" style=""><span></code> and <code class="nowrap" style=""><div></code> tags with <code>class</code> or <code>id</code> <a href="/wiki/HTML_attribute" title="HTML attribute">attributes</a>: </p> <div class="mw-heading mw-heading3"><h3 id="Styling_with_CSS">Styling with CSS</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=5" title="Edit section: Styling with CSS"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a> and <a href="/wiki/Separation_of_content_and_presentation" title="Separation of content and presentation">Separation of content and presentation</a></div> <p>It is common for <code class="nowrap" style=""><span></code> and <code class="nowrap" style=""><div></code> elements to carry <code>class</code> or <code>id</code> attributes in conjunction with CSS to apply layout, typographic, color, and other presentation attributes to parts of the content. CSS does not just apply to visual styling: when spoken out loud by a <a href="/wiki/Voice_browser" title="Voice browser">voice browser</a>, CSS styling can affect speech-rate, stress, richness and even position within a <a href="/wiki/Stereophonic" class="mw-redirect" title="Stereophonic">stereophonic</a> image. </p><p>For these reasons, and in support of a more semantic web, attributes attached to elements within HTML should describe their semantic purpose, rather than merely their intended display properties in one particular medium. For example, the HTML in <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" style="" dir="ltr"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"red-bold"</span><span class="p">></span>password too short<span class="p"></</span><span class="nt">span</span><span class="p">></span></code> is semantically weak, whereas <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" style="" dir="ltr"><span class="p"><</span><span class="nt">em</span> <span class="na">class</span><span class="o">=</span><span class="s">"warning"</span><span class="p">></span>password too short<span class="p"></</span><span class="nt">em</span><span class="p">></span></code> uses an <code class="nowrap" style=""><<a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/tag_em.asp">em</a>></code> element to signify emphasis (appearing as text in italics), and introduces a more appropriate class name. By the correct use of CSS, such 'warnings' may be rendered in a red, bold font on a screen, but when printed out they may be omitted, as by then it is too late to do anything about them. Perhaps when spoken they should be given extra stress, and a small reduction in speech-rate. The second example is semantically richer markup, rather than merely presentational. </p> <div class="mw-heading mw-heading3"><h3 id="Semantic_clarity">Semantic clarity</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=6" title="Edit section: Semantic clarity"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This kind of grouping and labelling of parts of the page content might be introduced purely to make the page more semantically meaningful in general terms. It is impossible to say how the <a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a> will develop in years and decades to come. <a href="/wiki/Web_page" title="Web page">Web pages</a> designed today may still be in use when information systems that we cannot yet imagine are trawling, processing, and classifying the web. Even today's search engines such as <a href="/wiki/Google" title="Google">Google</a> and others use proprietary information processing algorithms of considerable complexity. </p><p>For some years, the <a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C) has been running a major <a href="/wiki/Semantic_Web" title="Semantic Web">Semantic Web</a> project designed to make the whole web increasingly useful and meaningful to today's and the future's information systems. </p><p>The <a href="/wiki/Microformats" class="mw-redirect" title="Microformats">microformats</a> movement is an attempt to build an idea of semantic <code>class</code>es. For example, microformats-aware software might automatically find an element like <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" style="" dir="ltr"><span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"tel"</span><span class="p">></span>123-456-7890<span class="p"></</span><span class="nt">span</span><span class="p">></span></code> and allow for automatic dialing of the telephone number. </p> <div class="mw-heading mw-heading3"><h3 id="Access_from_code">Access from code</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=7" title="Edit section: Access from code"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Once the HTML or XHTML markup is delivered to a page-visitor's client browser, there is a chance that client-side code will need to navigate the internal structure (or <a href="/wiki/Document_Object_Model" title="Document Object Model">Document Object Model</a>) of the web page. The most common reason for this is that the page is delivered with <a href="/wiki/Client-side_JavaScript" class="mw-redirect" title="Client-side JavaScript">client-side JavaScript</a> that will produce on-going dynamic behaviour after the page is rendered. For example, if rolling the mouse over a 'Buy now' link is meant to make the price, elsewhere on the page, become emphasized, JavaScript code can do this, but JavaScript needs to identify the price element, wherever it is in the markup. The following markup would suffice: <code class="mw-highlight mw-highlight-lang-html mw-content-ltr" style="" dir="ltr"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"price"</span><span class="p">></span>$45.99<span class="p"></</span><span class="nt">div</span><span class="p">></span></code>. Another example is the <a href="/wiki/Ajax_(programming)" title="Ajax (programming)">Ajax</a> programming technique, where, for example, clicking a hypertext link may cause JavaScript code to retrieve the text for a new price quotation to display in place of the current one within the page, without re-loading the whole page. When the new text arrives back from the server, the JavaScript must identify the exact region on the page to replace with the new information. </p><p>Automatic testing tools also may need to navigate web page markup using <code class="nowrap" style=""><span></code> and <code class="nowrap" style=""><div></code> elements' <code>class</code> or <code>id</code> attributes. In <a href="/wiki/Dynamic_Web_page" class="mw-redirect" title="Dynamic Web page">dynamically generated HTML</a>, this may include the use of page testing tools such as <a href="/wiki/HttpUnit" title="HttpUnit">HttpUnit</a>, a member of the <a href="/wiki/XUnit" title="XUnit">xUnit</a> family, and load or stress testing tools such as <a href="/wiki/Apache_JMeter" title="Apache JMeter">Apache JMeter</a> when applied to <a href="/wiki/Form_(web)" class="mw-redirect" title="Form (web)">form-driven</a> web sites. </p> <div class="mw-heading mw-heading2"><h2 id="Overuse">Overuse</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=8" title="Edit section: Overuse"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The judicious use of <code class="nowrap" style=""><div></code> and <code class="nowrap" style=""><span></code> is a vital part of HTML and XHTML markup. However, they are sometimes overused. </p><p>Various <a href="/wiki/HTML_element" title="HTML element">list</a> structures available in HTML may be preferable to a home-made mixture of <code class="nowrap" style=""><div></code> and <code class="nowrap" style=""><span></code> elements.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> </p><p>For example, this: </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"menu"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span>Main page<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span>Contents<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span>Help<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> </pre></div> <p>which produces </p> <ul class="menu"> <li>Main page</li> <li>Contents</li> <li>Help</li> </ul> <p>... is usually preferable instead of this: </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"menu"</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Main page<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Contents<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Help<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </pre></div> <p>which produces </p> <div class="menu"> <pre> <span>Main page</span> <span>Contents</span> <span>Help</span> </pre> </div> <p>Other examples of the semantic use of HTML rather than <code class="nowrap" style=""><div></code> and <code class="nowrap" style=""><span></code> elements include the use of <code class="nowrap" style=""><fieldset></code> elements to divide up a web form, the use of <code class="nowrap" style=""><<a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/tag_legend.asp">legend</a>></code> elements to identify such divisions and the use of <code class="nowrap" style=""><<a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/tag_label.asp">label</a>></code> to identify form <code class="nowrap" style=""><<a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/tag_input.asp">input</a>></code> elements rather than <code class="nowrap" style=""><div></code>, <code class="nowrap" style=""><span></code> or <code class="nowrap" style=""><table></code> elements used for such purposes.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> </p><p><a href="/wiki/HTML5" title="HTML5">HTML5</a> introduced several new elements; a few examples include the <code class="nowrap" style=""><header></code>, <code class="nowrap" style=""><footer></code>, <code class="nowrap" style=""><nav></code> and <code class="nowrap" style=""><figure></code> elements. The use of semantically appropriate elements provides better structure to HTML documents than <code class="nowrap" style=""><span></code> or <code class="nowrap" style=""><div></code>.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=9" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/HTML" title="HTML">HTML</a> and <a href="/wiki/HTML5" title="HTML5">HTML5</a></li> <li><a href="/wiki/HTML_element" title="HTML element">HTML element</a></li> <li><a href="/wiki/HTML_attribute" title="HTML attribute">HTML attribute</a></li> <li><a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a> and <a href="/wiki/Help:Cascading_Style_Sheets" title="Help:Cascading Style Sheets">Help:Cascading Style Sheets</a></li> <li><a href="/wiki/CDATA" title="CDATA">CDATA</a></li> <li><a href="/wiki/ContextObjects_in_Spans" class="mw-redirect" title="ContextObjects in Spans">ContextObjects in Spans</a> (COinS)</li> <li><a href="/wiki/JavaScript" title="JavaScript">JavaScript</a></li> <li><a href="/wiki/Semantic_Web" title="Semantic Web">Semantic Web</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=10" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-HTML5-div-1"><span class="mw-cite-backlink">^ <a href="#cite_ref-HTML5-div_1-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-HTML5-div_1-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html5/grouping-content.html#the-div-element">"HTML5: A vocabulary and associated APIs for HTML and XHTML"</a>. W3C. 4.4 Grouping content<span class="reference-accessdate">. Retrieved <span class="nowrap">16 September</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML5%3A+A+vocabulary+and+associated+APIs+for+HTML+and+XHTML&rft.pages=4.4+Grouping+content&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml5%2Fgrouping-content.html%23the-div-element&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> <li id="cite_note-HTML5-span-2"><span class="mw-cite-backlink">^ <a href="#cite_ref-HTML5-span_2-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-HTML5-span_2-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20150801133040/http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">"HTML5: A vocabulary and associated APIs for HTML and XHTML"</a>. W3C. 4.5 Text-level semantics. Archived from <a rel="nofollow" class="external text" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">the original</a> on 1 August 2015<span class="reference-accessdate">. Retrieved <span class="nowrap">16 September</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML5%3A+A+vocabulary+and+associated+APIs+for+HTML+and+XHTML&rft.pages=4.5+Text-level+semantics&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml5%2Ftext-level-semantics.html%23the-span-element&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> <li id="cite_note-:0-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-:0_3-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/tag_div.asp">"HTML <div> Tag"</a>. <i>W3Schools</i><span class="reference-accessdate">. Retrieved <span class="nowrap">22 March</span> 2018</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3Schools&rft.atitle=HTML+%3Cdiv%3E+Tag&rft_id=https%3A%2F%2Fwww.w3schools.com%2Ftags%2Ftag_div.asp&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> <li id="cite_note-:1-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-:1_4-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/community/webed/wiki/HTML/Elements/span">"HTML/Elements/span - Web Education Community Group"</a>. 2013-06-13<span class="reference-accessdate">. Retrieved <span class="nowrap">2013-11-14</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML%2FElements%2Fspan+-+Web+Education+Community+Group&rft.date=2013-06-13&rft_id=http%3A%2F%2Fwww.w3.org%2Fcommunity%2Fwebed%2Fwiki%2FHTML%2FElements%2Fspan&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span><sup class="noprint Inline-Template"><span style="white-space: nowrap;">[<i><a href="/wiki/Wikipedia:Link_rot" title="Wikipedia:Link rot"><span title=" Dead link tagged May 2024">dead link</span></a></i><span style="visibility:hidden; color:transparent; padding-left:2px">‍</span>]</span></sup></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html51/semantics.html#semantics">"HTML 5.1: 4. The elements of HTML"</a>. <i>W3C</i><span class="reference-accessdate">. Retrieved <span class="nowrap">3 August</span> 2017</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3C&rft.atitle=HTML+5.1%3A+4.+The+elements+of+HTML&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml51%2Fsemantics.html%23semantics&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFHarold2008" class="citation book cs1">Harold, Elliotte Rusty (2008). <i>Refactoring HTML</i>. Addison Wesley. p. 184. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-321-50363-3" title="Special:BookSources/978-0-321-50363-3"><bdi>978-0-321-50363-3</bdi></a>. <q>There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, <code>div</code>s, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use <code class="nowrap" style=""><ul></code>, <code class="nowrap" style=""><ol></code>, or <code class="nowrap" style=""><dl></code> instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]</q></cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Refactoring+HTML&rft.pages=184&rft.pub=Addison+Wesley&rft.date=2008&rft.isbn=978-0-321-50363-3&rft.aulast=Harold&rft.aufirst=Elliotte+Rusty&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> <li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFRaggettArnaud_Le_HorsIan_Jacobs1999" class="citation web cs1"><a href="/wiki/Dave_Raggett" title="Dave Raggett">Raggett, Dave</a>; Arnaud Le Hors; Ian Jacobs (1999). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.10">"Adding structure to forms: the FIELDSET and LEGEND elements"</a>. <i>HTML 4.01 Specification</i>. <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a><span class="reference-accessdate">. Retrieved <span class="nowrap">12 July</span> 2010</span>. <q>The <code>FIELDSET</code> element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.</q></cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=HTML+4.01+Specification&rft.atitle=Adding+structure+to+forms%3A+the+FIELDSET+and+LEGEND+elements&rft.date=1999&rft.aulast=Raggett&rft.aufirst=Dave&rft.au=Arnaud+Le+Hors&rft.au=Ian+Jacobs&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2F1999%2FREC-html401-19991224%2Finteract%2Fforms.html%23h-17.10&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFvan_Kesteren2010" class="citation web cs1">van Kesteren, Anne (2010). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/html5-diff/#language">"HTML5 differences from HTML4"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">30 June</span> 2010</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML5+differences+from+HTML4&rft.pub=W3C&rft.date=2010&rft.aulast=van+Kesteren&rft.aufirst=Anne&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml5-diff%2F%23language&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADiv+and+span" class="Z3988"></span></span> </li> </ol></div></div> <div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Div_and_span&action=edit&section=11" title="Edit section: External links"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.4">Grouping elements: the DIV and SPAN elements</a></li> <li><a rel="nofollow" class="external text" href="https://quicklightweb.com/how-to-create-a-diagonal-or-slanted-div-using-css.php">Create a Diagonal or Slanted Div using CSS </a></li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Div_and_span&oldid=1234768901">https://en.wikipedia.org/w/index.php?title=Div_and_span&oldid=1234768901</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:HTML_tags" title="Category:HTML tags">HTML tags</a></li><li><a href="/wiki/Category:HTML" title="Category:HTML">HTML</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:All_articles_with_dead_external_links" title="Category:All articles with dead external links">All articles with dead external links</a></li><li><a href="/wiki/Category:Articles_with_dead_external_links_from_May_2024" title="Category:Articles with dead external links from May 2024">Articles with dead external links from May 2024</a></li><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_matches_Wikidata" title="Category:Short description matches Wikidata">Short description matches Wikidata</a></li><li><a href="/wiki/Category:Wikipedia_articles_needing_clarification_from_June_2023" title="Category:Wikipedia articles needing clarification from June 2023">Wikipedia articles needing clarification from June 2023</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 16 July 2024, at 01:50<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Div_and_span&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-pzjbs","wgBackendResponseTime":137,"wgPageParseReport":{"limitreport":{"cputime":"0.428","walltime":"0.824","ppvisitednodes":{"value":4353,"limit":1000000},"postexpandincludesize":{"value":29714,"limit":2097152},"templateargumentsize":{"value":2581,"limit":2097152},"expansiondepth":{"value":17,"limit":100},"expensivefunctioncount":{"value":12,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":42796,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 771.164 1 -total"," 30.07% 231.874 4 Template:Code"," 21.75% 167.752 1 Template:Reflist"," 16.31% 125.783 7 Template:Cite_web"," 13.05% 100.604 1 Template:HTML"," 12.60% 97.136 1 Template:Sidebar"," 10.07% 77.629 1 Template:Short_description"," 6.26% 48.312 2 Template:Pagetype"," 5.73% 44.219 1 Template:Clarify"," 4.90% 37.787 1 Template:Fix-span"]},"scribunto":{"limitreport-timeusage":{"value":"0.253","limit":"10.000"},"limitreport-memusage":{"value":5965385,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-f69cdc8f6-szrlp","timestamp":"20241122142245","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Div and span","url":"https:\/\/en.wikipedia.org\/wiki\/Div_and_span","sameAs":"http:\/\/www.wikidata.org\/entity\/Q107293011","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q107293011","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2005-11-21T13:37:05Z","dateModified":"2024-07-16T01:50:57Z","headline":"HTML elements used to define parts of a document"}</script> </body> </html>