One small page that uses every element of this section. Turn on Show tags and point at any part of
the page: a label tells you which element draws it. Click to jump to that element's details below.
Document metadataWritten for this site
Every element of this section is in the page above. Point at one to find it, click it to read its details.
Tags with a dashed border are not drawn on the page: look for them in the code below.
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Fresh bread every morning in the old town."> <title>Sunrise Bakery</title> <base href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/" target="_blank"> <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='32'%20r='28'%20fill='%23f59e0b'/%3E%3Ccircle%20cx='32'%20cy='32'%20r='14'%20fill='%23fde68a'/%3E%3C/svg%3E"> <style> body { margin: 0; font-family: system-ui, sans-serif; color: #3f2d1d; background: #fffbeb; } .hero { padding: 40px 28px 28px; background: linear-gradient(180deg, #fde68a, #fffbeb); } h1 { margin: 0; font-size: 2.2rem; } .hero p { margin: 6px 0 0; color: #92400e; } ul { margin: 0; padding: 20px 28px 32px; list-style: none; display: grid; gap: 10px; } li { background: #fff; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 16px; line-height: 1.5; } code { color: #b45309; font-weight: 600; } a { color: #b45309; } </style> </head> <body> <div class="hero"> <h1>Sunrise Bakery</h1> <p>This page looks simple, but its head is busy. None of it is drawn on the page:</p> </div> <ul> <li>The <code><title></code> is the name in the browser tab above.</li> <li>The <code><link></code> gives that tab its round yellow icon.</li> <li>The <code><style></code> paints these warm colors.</li> <li>The <code><meta></code> elements give information about the page: its character encoding, how it fits a phone screen, a short description.</li> <li>The <code><base></code> makes short links point to MDN and open in a new tab: try <a href="base">this link</a>.</li> <li>All of them sit inside <code><head></code>, which holds what visitors don't see.</li> </ul> </body></html>
MDN The <head>HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. There can be only one <head> element in an HTML document.
MDN The <title>HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; HTML tags within the element, if any, are also treated as plain text.
MDN The <link>HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
Live previewExample from MDN
<link href="https://developer.mozilla.org/shared-assets/misc/link-element-example.css" rel="stylesheet" /><p>This text will be red as defined in the external stylesheet.</p><p style="color: blue"> The <code>style</code> attribute can override it, though.</p>
Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for rel="preload") Value: Comma-separated list of image candidate strings
<meta name="description" content="The HTML reference describes all elements and attributes of HTML, including global attributes that apply to all elements." />
MDN The <style>HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.
Live previewExample from MDN
<style> p { color: #26b72b; } code { font-weight: bold; }</style><p> This text will be green. Inline styles take precedence over CSS included externally.</p><p style="color: blue"> The <code>style</code> attribute can override it, though.</p>