mirror of
https://github.com/django-components/django-components.git
synced 2025-08-30 10:47:20 +00:00
2101 lines
No EOL
180 KiB
HTML
2101 lines
No EOL
180 KiB
HTML
{% load component_tags %}
|
||
{# Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
|
||
Page lightly modified and partially extracted as a component #}
|
||
|
||
<!DOCTYPE html>
|
||
<!-- saved from url=(0103)https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure -->
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/favicon144.png">
|
||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/favicon114.png">
|
||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/favicon72.png">
|
||
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/favicon57.png">
|
||
<meta name="theme-color" content="#ffffff">
|
||
<link rel="manifest" href="https://developer.mozilla.org/manifest.json">
|
||
<script>Array.prototype.flat && Array.prototype.includes || document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.flat%2Ces6"><\/script>')</script>
|
||
{% component_css_dependencies %}
|
||
<title>Document and website structure - Learn web development | MDN</title>
|
||
<link rel="preload" as="font" type="font/woff2" crossorigin=""
|
||
href="https://developer.mozilla.org/static/media/ZillaSlab-Bold.subset.0beac26b.woff2">
|
||
<link rel="alternate" title="Document and website structure"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="en">
|
||
<link rel="alternate" title="Document and website structure"
|
||
href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="zh-TW">
|
||
<link rel="alternate" title="文档与网站架构"
|
||
href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="zh">
|
||
<link rel="alternate" title="Структура документа и веб-сайта"
|
||
href="https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="ru">
|
||
<link rel="alternate" title="Estrutura do documento e do website"
|
||
href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="pt">
|
||
<link rel="alternate" title="Estrutura de documento e sites"
|
||
href="https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="pt-BR">
|
||
<link rel="alternate" title="De structuur van je document en je website"
|
||
href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="nl">
|
||
<link rel="alternate" title="Document and website structure"
|
||
href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="ko">
|
||
<link rel="alternate" title="ドキュメントと Web サイトの構造"
|
||
href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="ja">
|
||
<link rel="alternate" title="Document and website structure"
|
||
href="https://developer.mozilla.org/id/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="id">
|
||
<link rel="alternate" title="Structure de Site Web et de document"
|
||
href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="fr">
|
||
<link rel="alternate" title="Estructura web y documentación"
|
||
href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="es">
|
||
<link rel="alternate" title="Struktur in die Webseite bringen"
|
||
href="https://developer.mozilla.org/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="de">
|
||
<link rel="alternate" title="Document i estructura del lloc web"
|
||
href="https://developer.mozilla.org/ca/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure"
|
||
hreflang="ca">
|
||
<meta name="description"
|
||
content="At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">
|
||
<style media="print">.breadcrumbs-locale-container, .document-toc-container, .on-github, .page-footer, .page-header-main, nav.sidebar, ul.prev-next {
|
||
display: none !important
|
||
}
|
||
|
||
.article, .article pre {
|
||
padding: 2px
|
||
}
|
||
|
||
.article pre {
|
||
border-left-width: 2px
|
||
}</style>
|
||
{% component_js_dependencies %}
|
||
</head>
|
||
<body>
|
||
<div id="root">
|
||
<ul id="nav-access" class="a11y-nav">
|
||
<li><a id="skip-main"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#content">Skip
|
||
to main content</a></li>
|
||
<li><a id="skip-search"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#main-q">Skip
|
||
to search</a></li>
|
||
</ul>
|
||
<div class="page-wrapper document-page">
|
||
<header class="page-header"><a href="https://developer.mozilla.org/en-US/" class="logo"
|
||
aria-label="MDN Web Docs">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.74 135" role="img">
|
||
<g id="Layer_2" data-name="Layer 2">
|
||
<path class="cls-1"
|
||
d="M7.14,8.35V119.41H118.19V8.35Zm103.71,56c-.48.92-1,1.79-1.46,2.71a3.44,3.44,0,0,1-3.54,2,2.4,2.4,0,0,0-1.55.5c-1.37.9-2.76,1.79-4.18,2.63a7.33,7.33,0,0,1-6.35.34,29.71,29.71,0,0,0-10.63-2,11.7,11.7,0,0,0-9.46,4.31,14.84,14.84,0,0,0-2.13,4.29c-1.24,3.07-2.3,21.38-2.3,26.05,0,0-17.62-3.42-34.15-20.34l4.31-11.32H25.91l9.76-10.35H18.87l9.77-10.34H12.69L30.45,34A40.9,40.9,0,0,1,50.22,23.17c7.1-1.22,8.93-.53,13.31.77l2.43.73.85.25,3.1.95a12.56,12.56,0,0,0,6.21.09,11.37,11.37,0,0,1,8.25,1,8.24,8.24,0,0,1,4.1,6.22,7.29,7.29,0,0,0,3.61,5.49,59.45,59.45,0,0,0,9.32,4.11c2.27.86,4.54,1.84,6.79,2.72a6.81,6.81,0,0,1,2.86,2.06,4.81,4.81,0,0,1,1.1,2.73c.14,2,.37,4,.47,6h0A15.24,15.24,0,0,1,110.85,64.32Z"></path>
|
||
<path class="cls-1"
|
||
d="M320.12,39.62a5.42,5.42,0,0,0-4.53,2.13,7.36,7.36,0,0,0-1.7,4.43v2.36a6.28,6.28,0,0,0,1.7,4.46,5.63,5.63,0,0,0,4.3,1.82,5.12,5.12,0,0,0,4.57-2.27A9.7,9.7,0,0,0,326,47a8.11,8.11,0,0,0-1.67-5.52A5.36,5.36,0,0,0,320.12,39.62Z"></path>
|
||
<path class="cls-1"
|
||
d="M387.38,39.53a5.52,5.52,0,0,0-4.7,2.15,8.8,8.8,0,0,0-1.63,5.49,9.23,9.23,0,0,0,1.58,5.45,5.38,5.38,0,0,0,4.7,2.25,5.61,5.61,0,0,0,4.74-2.2,8.91,8.91,0,0,0,1.68-5.59A8.24,8.24,0,0,0,392,41.56,5.76,5.76,0,0,0,387.38,39.53Z"></path>
|
||
<path class="cls-1"
|
||
d="M299.47,41.35a4.34,4.34,0,0,0-4-1.92,4.55,4.55,0,0,0-3.89,1.73A8.37,8.37,0,0,0,290,45.33h10.48A6.3,6.3,0,0,0,299.47,41.35Z"></path>
|
||
<path class="cls-1"
|
||
d="M357.74,30.75H352V54.06h5.72q5.47,0,8.35-3T369,42.41q0-5.43-2.88-8.55T357.74,30.75Z"></path>
|
||
<path class="cls-1"
|
||
d="M121.55,8.35v70.8h323V8.35ZM163.76,30.8h-4V54h3.68v3.73H152.19V54h3.31V36.79h-.19l-9.63,19.12h-2.12l-10-19.4h-.19V54h3.45v3.73H125.67V54h3.68V30.8h-4V27.07H133l11.66,22.56h.19l11.18-22.56h7.7Zm29.12,22.67q-4.11,4.28-11.38,4.28H167.44V54.06h3.73V30.75h-3.73V27.07h13.83q7.59,0,11.66,4.29a15.4,15.4,0,0,1,4,11A15.33,15.33,0,0,1,192.88,53.47ZM231.77,30.8h-3.68v27h-2.6L208.08,35h-.19V54h4.67v3.73H200.34V54h3.49V30.8h-4V27.07h7.08l16.9,22.09H224V30.8h-4.58V27.07h12.32Zm43.8,27h-3.31l-7.83-23.18h-.19l-7.55,23.18h-3.35L244.56,30.8h-2.65V27.07H253V30.8h-3.87L255,50.71h.23l6.61-19.91H259V27.07h11V30.8h-2.78l6.61,20.1h.23l5.43-20.1h-4.15V27.07h11V30.8h-2.54Zm26.71-1.51a9.66,9.66,0,0,1-6.42,2,10.2,10.2,0,0,1-7.41-2.74c-1.89-1.82-2.83-4.47-2.83-7.93a12.37,12.37,0,0,1,2.64-8.12,9,9,0,0,1,7.32-3.21,8.62,8.62,0,0,1,6.75,2.69,9.65,9.65,0,0,1,2.45,6.52,13.67,13.67,0,0,1-.28,2.69H290q.29,6.71,6.18,6.7a5.2,5.2,0,0,0,3.71-1.18,5.82,5.82,0,0,0,1.67-2.83l3.45.71A7.21,7.21,0,0,1,302.28,56.24Zm25.77-1.63c-1.51,2.4-3.92,3.61-7.22,3.61s-5.84-1.29-7.22-3.87c0,.25-.1.82-.21,1.7s-.19,1.44-.22,1.7H309c.16-1,.31-2,.47-3.07a21.42,21.42,0,0,0,.24-3.16v-23h-3.4V25.27h7.55V40.9a9.76,9.76,0,0,1,2.67-3.28,7.33,7.33,0,0,1,4.74-1.4A8.48,8.48,0,0,1,327.77,39q2.55,2.74,2.55,7.74A14.6,14.6,0,0,1,328.05,54.61Zm41.39-1.14q-4.11,4.28-11.37,4.28H344V54.06h3.73V30.75H344V27.07h13.83q7.59,0,11.66,4.29a15.41,15.41,0,0,1,4.06,11A15.34,15.34,0,0,1,369.44,53.47Zm25.65,1.68a10.53,10.53,0,0,1-7.9,3.07,10,10,0,0,1-7.63-3,10.93,10.93,0,0,1-2.8-7.83,12.13,12.13,0,0,1,2.69-7.93q2.69-3.3,8-3.3t8,3.28a12,12,0,0,1,2.64,7.76A10.86,10.86,0,0,1,395.09,55.15Zm22.61.57c-1.4,1.66-3.63,2.5-6.68,2.5a9.58,9.58,0,0,1-7.15-2.76q-2.72-2.76-2.71-7.91a12.25,12.25,0,0,1,2.69-8,9.17,9.17,0,0,1,7.5-3.28,15,15,0,0,1,3.82.48,10.37,10.37,0,0,1,3.5,1.65l.85,5.47-3.35.38-.76-3.54a8.07,8.07,0,0,0-4.11-1,4.9,4.9,0,0,0-4.39,2.15,9.93,9.93,0,0,0-1.41,5.55A8.9,8.9,0,0,0,407,52.84a5.23,5.23,0,0,0,4.44,2c2.92,0,4.67-1.7,5.23-5.1l3.5.71A10.34,10.34,0,0,1,417.7,55.72Zm20.48.75a11.68,11.68,0,0,1-6.63,1.75,15.52,15.52,0,0,1-8.26-2.08L424,51l3.26.33-.1,2.74a7,7,0,0,0,2.06.66,12.63,12.63,0,0,0,2.19.19,8.68,8.68,0,0,0,3.66-.75,2.5,2.5,0,0,0,1.63-2.36,2.25,2.25,0,0,0-1.32-2.2,12.65,12.65,0,0,0-3.28-1c-1.31-.22-2.61-.49-3.9-.82a7.5,7.5,0,0,1-3.25-1.7,4.67,4.67,0,0,1-1.33-3.66c0-2.36.88-4,2.62-4.91a12,12,0,0,1,5.6-1.37,15,15,0,0,1,4.08.55,16.65,16.65,0,0,1,3.47,1.39l.47,5.1-3.3.37-.48-3.3a9.5,9.5,0,0,0-4.06-.9,5.62,5.62,0,0,0-2.87.66A2.33,2.33,0,0,0,428,42.27a2.13,2.13,0,0,0,1.3,2.07,11.91,11.91,0,0,0,3.21.92,36.69,36.69,0,0,1,3.82.83,7.46,7.46,0,0,1,3.21,1.74,4.9,4.9,0,0,1,1.3,3.73A5.56,5.56,0,0,1,438.18,56.47Z"></path>
|
||
<path class="cls-1"
|
||
d="M181.17,30.75h-5.71V54.06h5.71q5.47,0,8.36-3t2.88-8.61q0-5.43-2.88-8.55T181.17,30.75Z"></path>
|
||
<path class="cls-1"
|
||
d="M121.63,119.32V81.74H236.54v37.58ZM153.22,109h-2v-6.85a4.8,4.8,0,0,0-1.58-4,5.57,5.57,0,0,0-3.55-1.26,5,5,0,0,0-4.92,3.26,4.19,4.19,0,0,0-1.88-2.46,5.82,5.82,0,0,0-3-.8,4.89,4.89,0,0,0-4.56,2.56V97.24h-6.28v3.26h2V109h-2v3.23h9.11V109H131.7v-5.25a4.4,4.4,0,0,1,.69-2.56,2.47,2.47,0,0,1,2.21-1q2.57,0,2.56,3.63v8.41h6.29V109h-2v-5.25a4.47,4.47,0,0,1,.67-2.56,2.42,2.42,0,0,1,2.19-1q2.63,0,2.63,3.63v8.41h6.28Zm9.88-12.07q-4,0-6,2.36a8.41,8.41,0,0,0-2,5.66,7.25,7.25,0,0,0,2.17,5.62,8,8,0,0,0,5.65,2,8.54,8.54,0,0,0,5.94-2.11,7.27,7.27,0,0,0,2.34-5.67,8.21,8.21,0,0,0-2-5.51Q167.13,96.94,163.1,96.94ZM163,109.28a3,3,0,0,1-2.63-1.33,5.68,5.68,0,0,1-.9-3.26,5,5,0,0,1,1-3.28,3.23,3.23,0,0,1,2.61-1.18,3.5,3.5,0,0,1,2.59,1.08,4.56,4.56,0,0,1,1.07,3.31,5.21,5.21,0,0,1-1,3.41A3.33,3.33,0,0,1,163,109.28Zm25-2.3-3.39-.29-.7,2.32H179l8.32-9.54L187,97.24H173.81l-.53,5.25,3.16.34.67-2.36h4.65L173.51,110l.44,2.26h13.13Zm7.62-9.74h-4.46v5.39h4.46Zm0,9.61h-4.46v5.39h4.46Zm13.54-17.49h-4.23l-6.48,22.88h4.22Zm8.68,0h-4.23l-6.45,22.88h4.19Zm15,22.51-.07-2.26a1.22,1.22,0,0,1-.56.1c-.69,0-1-.39-1-1.16v-6.49a4.39,4.39,0,0,0-1.8-3.84,7,7,0,0,0-4.16-1.28,14.55,14.55,0,0,0-3.16.3,24.14,24.14,0,0,0-3.29,1.06l-.56,3.46,3.39.4.5-1.69a2.78,2.78,0,0,1,1.08-.37,11.3,11.3,0,0,1,1.25-.07c1.19,0,1.89.37,2.09,1.1a8.55,8.55,0,0,1,.3,2.26v.5a8.91,8.91,0,0,0-1.18-.11c-.41,0-.81,0-1.21,0a12.64,12.64,0,0,0-4.81.88,3.53,3.53,0,0,0-2.18,3.64,3.66,3.66,0,0,0,1.48,3.33,5.63,5.63,0,0,0,3.11,1,4.67,4.67,0,0,0,3-.91,6.78,6.78,0,0,0,1.8-2,3,3,0,0,0,3.33,3A5.54,5.54,0,0,0,232.85,111.87Zm-9.25-2.32a1.69,1.69,0,0,1-1.36-.52,1.81,1.81,0,0,1-.43-1.21,1.67,1.67,0,0,1,.86-1.68,4.63,4.63,0,0,1,2-.42,7.69,7.69,0,0,1,1.07.07l1.06.13a3.58,3.58,0,0,1-1.08,2.74A3.24,3.24,0,0,1,223.6,109.55Z"></path>
|
||
</g>
|
||
</svg>
|
||
</a>
|
||
<button type="button" class="ghost main-menu-toggle" aria-haspopup="true" aria-label="Show Menu"></button>
|
||
<div class="page-header-main ">
|
||
<nav class="main-nav" aria-label="Main menu">
|
||
<ul class="main-menu">
|
||
<li class="top-level-entry-container">
|
||
<button id="technologies-button" type="button" class="top-level-entry" aria-haspopup="menu"
|
||
aria-expanded="false">Technologies
|
||
</button>
|
||
<ul class="technologies " role="menu" aria-labelledby="technologies-button">
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web" role="menuitem">Technologies
|
||
Overview</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"
|
||
role="menuitem">HTML</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"
|
||
role="menuitem">CSS</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
|
||
role="menuitem">JavaScript</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics"
|
||
role="menuitem">Graphics</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP"
|
||
role="menuitem">HTTP</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/API"
|
||
role="menuitem">APIs</a></li>
|
||
<li role="none"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions"
|
||
role="menuitem">Browser Extensions</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/MathML"
|
||
role="menuitem">MathML</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="top-level-entry-container">
|
||
<button id="references-guides-button" type="button" class="top-level-entry"
|
||
aria-haspopup="menu" aria-expanded="false">References & Guides
|
||
</button>
|
||
<ul class="references-guides " role="menu" aria-labelledby="references-guides-button">
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Learn"
|
||
role="menuitem">Learn web development</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/Tutorials"
|
||
role="menuitem">Tutorials</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/Reference"
|
||
role="menuitem">References</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide"
|
||
role="menuitem">Developer Guides</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility"
|
||
role="menuitem">Accessibility</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Games"
|
||
role="menuitem">Game development</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/Web" role="menuitem">...more
|
||
docs</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="top-level-entry-container">
|
||
<button id="feedback-button" type="button" class="top-level-entry" aria-haspopup="menu"
|
||
aria-expanded="false">Feedback
|
||
</button>
|
||
<ul class="feedback " role="menu" aria-labelledby="feedback-button">
|
||
<li role="none"><a
|
||
href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Feedback"
|
||
role="menuitem">Send Feedback</a></li>
|
||
<li role="none"><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute"
|
||
role="menuitem">Contribute to MDN</a></li>
|
||
<li role="none"><a target="_blank" rel="noopener noreferrer"
|
||
href="https://github.com/mdn/content/issues/new" role="menuitem">Report
|
||
a content issue 🌐</a></li>
|
||
<li role="none"><a target="_blank" rel="noopener noreferrer"
|
||
href="https://github.com/mdn/yari/issues/new" role="menuitem">Report
|
||
a platform issue 🌐</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div class="header-search">
|
||
<form action="https://developer.mozilla.org/en-US/search" class="search-form" role="search"><label
|
||
for="main-q" class="visually-hidden">Search MDN</label><input type="search" name="q"
|
||
id="main-q"
|
||
class="search-input-field"
|
||
placeholder="Search MDN"
|
||
pattern="(.|\s)*\S(.|\s)*"
|
||
required=""><input
|
||
type="submit" class="ghost search-button" aria-label="Search" value=""></form>
|
||
</div>
|
||
<div class="auth-container"><a
|
||
href="https://developer.mozilla.org/en-US/users/account/signup-landing?next=%2Fen-US%2Fdocs%2FLearn%2FHTML%2FIntroduction_to_HTML%2FDocument_and_website_structure"
|
||
rel="nofollow" class="signin-link">Sign in</a></div>
|
||
</div>
|
||
</header>
|
||
<div class="titlebar-container"><h1 class="title">Document and website structure</h1></div>
|
||
{% component 'breadcrumb_component' items=5 %}{% endcomponent %}
|
||
<div class="locale-container">
|
||
<form class="language-menu"><label for="select_language" class="visually-hidden">Select your preferred
|
||
language</label> <select id="select_language" name="language">
|
||
<option value="en-US">English (US)</option>
|
||
<option value="/ca/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Català
|
||
</option>
|
||
<option value="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Deutsch
|
||
</option>
|
||
<option value="/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Español
|
||
</option>
|
||
<option value="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Français
|
||
</option>
|
||
<option value="/id/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Bahasa
|
||
Indonesia
|
||
</option>
|
||
<option value="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">日本語</option>
|
||
<option value="/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">한국어</option>
|
||
<option value="/nl/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Nederlands
|
||
</option>
|
||
<option value="/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Português
|
||
(do Brasil)
|
||
</option>
|
||
<option value="/pt-PT/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Português
|
||
(Europeu)
|
||
</option>
|
||
<option value="/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Русский
|
||
</option>
|
||
<option value="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">中文 (简体)
|
||
</option>
|
||
<option value="/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">正體中文
|
||
(繁體)
|
||
</option>
|
||
</select>
|
||
<button type="submit" class="button minimal">Change language</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="page-content-container">
|
||
<aside class="document-toc-container">
|
||
<section class="document-toc">
|
||
<header><h2>Table of contents</h2>
|
||
<button type="button" class="ghost toc-trigger-mobile" aria-controls="toc-entries"
|
||
aria-expanded="false">Table of contents
|
||
</button>
|
||
</header>
|
||
<ul id="toc-entries">
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#basic_sections_of_a_document">Basic
|
||
sections of a document</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#html_for_structuring_content">HTML
|
||
for structuring content</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#html_layout_elements_in_more_detail">HTML
|
||
layout elements in more detail</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#planning_a_simple_website">Planning
|
||
a simple website</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#test_your_skills!">Test
|
||
your skills!</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#summary">Summary</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#see_also">See
|
||
also</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#in_this_module">In
|
||
this module</a></li>
|
||
</ul>
|
||
</section>
|
||
</aside>
|
||
<main id="content" class="main-content" role="main">
|
||
<article class="article" lang="en-US">
|
||
<div>
|
||
<div></div>
|
||
|
||
<div>
|
||
<ul class="prev-next">
|
||
<li><a class="button minimal"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">
|
||
Previous </a></li>
|
||
<li><a class="button minimal"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">
|
||
Overview: Introduction to HTML</a></li>
|
||
<li><a class="button minimal"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">
|
||
Next </a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p class="summary">In addition to defining individual parts of your page (such as "a paragraph"
|
||
or "an image"), <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a>
|
||
also boasts a number of block level elements used to define areas of your website (such as
|
||
"the header", "the navigation menu", "the main content column"). This article looks into how
|
||
to plan a basic website structure, and write the HTML to represent this structure.</p>
|
||
|
||
<table class="learn-box standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Prerequisites:</th>
|
||
<td>Basic HTML familiarity, as covered in <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting
|
||
started with HTML</a>. HTML text formatting, as covered in <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML
|
||
text fundamentals</a>. How hyperlinks work, as covered in <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating
|
||
hyperlinks</a>.
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Objective:</th>
|
||
<td>Learn how to structure your document using semantic tags, and how to work out the
|
||
structure of a simple website.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h2 id="basic_sections_of_a_document"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#basic_sections_of_a_document"
|
||
title="Permalink to Basic sections of a document">Basic sections of a document</a></h2>
|
||
<div><p>Webpages can and will look pretty different from one another, but they all tend to share
|
||
similar standard components, unless the page is displaying a fullscreen video or game, is part
|
||
of some kind of art project, or is just badly structured:</p>
|
||
|
||
<dl>
|
||
<dt>header:</dt>
|
||
<dd>Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This
|
||
usually stays the same from one webpage to another.
|
||
</dd>
|
||
<dt>navigation bar:</dt>
|
||
<dd>Links to the site's main sections; usually represented by menu buttons, links, or tabs.
|
||
Like the header, this content usually remains consistent from one webpage to another —
|
||
having inconsistent navigation on your website will just lead to confused, frustrated
|
||
users. Many web designers consider the navigation bar to be part of the header rather
|
||
than an individual component, but that's not a requirement; in fact, some also argue
|
||
that having the two separate is better for <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">accessibility</a>,
|
||
as screen readers can read the two features better if they are separate.
|
||
</dd>
|
||
<dt>main content:</dt>
|
||
<dd>A big area in the center that contains most of the unique content of a given webpage,
|
||
for example, the video you want to watch, or the main story you're reading, or the map
|
||
you want to view, or the news headlines, etc. This is the one part of the website that
|
||
definitely will vary from page to page!
|
||
</dd>
|
||
<dt>sidebar:</dt>
|
||
<dd>Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is
|
||
contained in the main content (for example on a news article page, the sidebar might
|
||
contain the author's bio, or links to related articles) but there are also cases where
|
||
you'll find some recurring elements like a secondary navigation system.
|
||
</dd>
|
||
<dt>footer:</dt>
|
||
<dd>A strip across the bottom of the page that generally contains fine print, copyright
|
||
notices, or contact info. It's a place to put common information (like the header) but
|
||
usually, that information is not critical or secondary to the website itself. The footer
|
||
is also sometimes used for <a
|
||
href="https://developer.mozilla.org/en-US/docs/Glossary/SEO">SEO</a> purposes,
|
||
by providing links for quick access to popular content.
|
||
</dd>
|
||
</dl>
|
||
|
||
<p>A "typical website" could be structured something like this:</p>
|
||
|
||
<p>
|
||
<img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer."
|
||
src="./Document and website structure - Learn web development _ MDN_files/sample-website.png"
|
||
style="display: block; margin: 0 auto;" width="1298" height="855" loading="lazy"></p>
|
||
</div>
|
||
<h2 id="html_for_structuring_content"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#html_for_structuring_content"
|
||
title="Permalink to HTML for structuring content">HTML for structuring content</a></h2>
|
||
<div><p>The simple example shown above isn't pretty, but it is perfectly fine for illustrating
|
||
a typical website layout example. Some websites have more columns, some are a lot more
|
||
complex, but you get the idea. With the right CSS, you could use pretty much any elements to
|
||
wrap around the different sections and get it looking how you wanted, but as discussed before,
|
||
we need to respect semantics and <strong>use the right element for the right job</strong>.</p>
|
||
|
||
<p>This is because visuals don't tell the whole story. We use color and font size to draw
|
||
sighted users' attention to the most useful parts of the content, like the navigation menu
|
||
and related links, but what about visually impaired people for example, who might not find
|
||
concepts like "pink" and "large font" very useful?</p>
|
||
|
||
<div class="note notecard">
|
||
<p><strong>Note</strong>: <a
|
||
href="http://www.color-blindness.com/2006/04/28/colorblind-population/"
|
||
class="external" rel=" noopener">Roughy 8% of men and 0.5% of women</a> are
|
||
colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every
|
||
200 women. Blind and visually impaired people represent roughly 4-5% of the world
|
||
population (in 2012 there were <a href="https://en.wikipedia.org/wiki/Visual_impairment"
|
||
class="external" rel=" noopener">285 million such
|
||
people in the world</a>, while the total population was <a
|
||
href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg"
|
||
class="external" rel=" noopener">around 7 billion</a>).</p>
|
||
</div>
|
||
|
||
<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em>
|
||
— you can use elements that represent the sections of content described above unambiguously,
|
||
and assistive technologies like screenreaders can recognize those elements and help with
|
||
tasks like "find the main navigation", or "find the main content." As we mentioned earlier
|
||
in the course, there are a number of <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure">consequences
|
||
of not using the right element structure and semantics for the right job</a>.</p>
|
||
|
||
<p>To implement such semantic mark up, HTML provides dedicated tags that you can use to
|
||
represent such sections, for example:</p>
|
||
|
||
<ul>
|
||
<li><strong>header: </strong><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"><code><header></code></a>.
|
||
</li>
|
||
<li><strong>navigation bar: </strong><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"><code><nav></code></a>.
|
||
</li>
|
||
<li><strong>main content: </strong><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"><code><main></code></a>,
|
||
with various content subsections represented by <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"><code><article></code></a>,
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"><code><section></code></a>,
|
||
and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code><div></code></a>
|
||
elements.
|
||
</li>
|
||
<li><strong>sidebar: </strong><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"><code><aside></code></a>;
|
||
often placed inside <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"><code><main></code></a>.
|
||
</li>
|
||
<li><strong>footer: </strong><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer"><code><footer></code></a>.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<h3 id="active_learning_exploring_the_code_for_our_example"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#active_learning_exploring_the_code_for_our_example"
|
||
title="Permalink to Active learning: exploring the code for our example">Active learning:
|
||
exploring the code for our example</a></h3>
|
||
<div><p>Our example seen above is represented by the following code (you can also <a
|
||
href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html"
|
||
class="external" rel=" noopener">find the example in our GitHub repository</a>). We'd like
|
||
you to look at the example above, and then look over the listing below to see what parts make up
|
||
what section of the visual.</p>
|
||
|
||
<pre class="brush: html notranslate"><code><span class="token doctype"><span
|
||
class="token punctuation"><!</span><span
|
||
class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span
|
||
class="token attr-name">charset</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span
|
||
class="token punctuation">></span></span>My page title<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>title</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One<span
|
||
class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span
|
||
class="token attr-value"><span class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span
|
||
class="token attr-name">type</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span
|
||
class="token attr-name">rel</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span
|
||
class="token punctuation">"</span></span> <span class="token attr-name">href</span><span
|
||
class="token attr-value"><span class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token comment"><!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--></span>
|
||
<span class="token comment"><!--[if lt IE 9]>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
|
||
<![endif]--></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token comment"><!-- Here is our main header that is used across all the pages of our website --></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span
|
||
class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>h1</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Our team<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Projects<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token comment"><!-- A Search form is another common non-linear way to navigate through a website. --></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span
|
||
class="token attr-name">type</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span
|
||
class="token punctuation">"</span></span> <span class="token attr-name">name</span><span
|
||
class="token attr-value"><span class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>q<span class="token punctuation">"</span></span> <span
|
||
class="token attr-name">placeholder</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search query<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span
|
||
class="token attr-name">type</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span
|
||
class="token punctuation">"</span></span> <span class="token attr-name">value</span><span
|
||
class="token attr-value"><span class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>Go!<span class="token punctuation">"</span></span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token comment"><!-- Here is our page's main content --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token comment"><!-- It contains an article --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span
|
||
class="token punctuation">></span></span>Article heading<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>h2</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span
|
||
class="token punctuation">></span></span>Subsection<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>h3</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span
|
||
class="token punctuation">></span></span>Another subsection<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>h3</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token comment"><!-- the aside content can also be nested within the main content --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span
|
||
class="token punctuation">></span></span>Related<span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>h2</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh I do like to be beside the seaside<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh I do like to be beside the sea<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Although in the North of England<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>It never stops raining<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>#<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh well...<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token comment"><!-- And here is our main footer that is used across all the pages of our website --></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>©Copyright 2050 by nobody. All rights reversed.<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span
|
||
class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span
|
||
class="token punctuation">></span></span></code></pre>
|
||
|
||
<p>Take some time to look over the code and understand it — the comments inside the code should
|
||
also help you to understand it. We aren't asking you to do much else in this article,
|
||
because the key to understanding document layout is writing a sound HTML structure, and then
|
||
laying it out with CSS. We'll wait for this until you start to study CSS layout as part of
|
||
the CSS topic.</p></div>
|
||
<h2 id="html_layout_elements_in_more_detail"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#html_layout_elements_in_more_detail"
|
||
title="Permalink to HTML layout elements in more detail">HTML layout elements in more
|
||
detail</a></h2>
|
||
<div><p>It's good to understand the overall meaning of all the HTML sectioning elements in detail —
|
||
this is something you'll work on gradually as you start to get more experience with web
|
||
development. You can find a lot of detail by reading our <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML element
|
||
reference</a>. For now, these are the main definitions that you should try to understand:
|
||
</p>
|
||
|
||
<ul>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"><code><main></code></a>
|
||
is for content <em>unique to this page.</em> Use <code><main></code> only
|
||
<em>once</em> per page, and put it directly inside <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body"><code><body></code></a>.
|
||
Ideally this shouldn't be nested within other elements.
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"><code><article></code></a>
|
||
encloses a block of related content that makes sense on its own without the rest of the
|
||
page (e.g., a single blog post).
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"><code><section></code></a>
|
||
is similar to <code><article></code>, but it is more for grouping together a
|
||
single part of the page that constitutes one single piece of functionality (e.g., a mini
|
||
map, or a set of article headlines and summaries), or a theme. It's considered best
|
||
practice to begin each section with a <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">heading</a>;
|
||
also note that you can break <code><article></code>s up into different <code><section></code>s,
|
||
or <code><section></code>s up into different <code><article></code>s,
|
||
depending on the context.
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside"><code><aside></code></a>
|
||
contains content that is not directly related to the main content but can provide
|
||
additional information indirectly related to it (glossary entries, author biography,
|
||
related links, etc.).
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header"><code><header></code></a>
|
||
represents a group of introductory content. If it is a child of <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body"><code><body></code></a>
|
||
it defines the global header of a webpage, but if it's a child of an <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article"><code><article></code></a>
|
||
or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section"><code><section></code></a>
|
||
it defines a specific header for that section (try not to confuse this with <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_a_title">titles
|
||
and headings</a>).
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav"><code><nav></code></a>
|
||
contains the main navigation functionality for the page. Secondary links, etc., would
|
||
not go in the navigation.
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer"><code><footer></code></a>
|
||
represents a group of end content for a page.
|
||
</li>
|
||
</ul>
|
||
|
||
<p>Each of the aforementioned elements can be clicked on to read the corresponding article in
|
||
the "HTML element reference" section, providing more detail about each one.</p></div>
|
||
<h3 id="non-semantic_wrappers"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#non-semantic_wrappers"
|
||
title="Permalink to Non-semantic wrappers">Non-semantic wrappers</a></h3>
|
||
<div><p>Sometimes you'll come across a situation where you can't find an ideal semantic element to
|
||
group some items together or wrap some content. Sometimes you might want to just group a set of
|
||
elements together to affect them all as a single entity with some <a
|
||
href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> or <a
|
||
href="https://developer.mozilla.org/en-US/docs/Glossary/JavaScript">JavaScript</a>. For
|
||
cases like these, HTML provides the <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code><div></code></a>
|
||
and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"><code><span></code></a>
|
||
elements. You should use these preferably with a suitable <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a>
|
||
attribute, to provide some kind of label for them so they can be easily targeted.</p>
|
||
|
||
<p>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span"><code><span></code></a>
|
||
is an inline non-semantic element, which you should only use if you can't think of a better
|
||
semantic text element to wrap your content, or don't want to add any specific meaning. For
|
||
example:</p>
|
||
|
||
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
|
||
him as he staggered through the door <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span
|
||
class="token attr-name">class</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>editor-note<span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span>[Editor's note: At this point in the
|
||
play, the lights should be down low]<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span
|
||
class="token punctuation">></span></span>.<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span></code></pre>
|
||
|
||
<p>In this case, the editor's note is supposed to merely provide extra direction for the
|
||
director of the play; it is not supposed to have extra semantic meaning. For sighted users,
|
||
CSS would perhaps be used to distance the note slightly from the main text.</p>
|
||
|
||
<p>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code><div></code></a>
|
||
is a block level non-semantic element, which you should only use if you can't think of a
|
||
better semantic block element to use, or don't want to add any specific meaning. For
|
||
example, imagine a shopping cart widget that you could choose to pull up at any point during
|
||
your time on an e-commerce site:</p>
|
||
|
||
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>div</span> <span
|
||
class="token attr-name">class</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shopping-cart<span
|
||
class="token punctuation">"</span></span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span
|
||
class="token punctuation">></span></span>Shopping cart<span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>h2</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>a</span> <span
|
||
class="token attr-name">href</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span><span
|
||
class="token punctuation">"</span></span><span class="token punctuation">></span></span><span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Silver earrings<span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span
|
||
class="token tag"><span class="token tag"><span
|
||
class="token punctuation"></</span>a</span><span
|
||
class="token punctuation">></span></span>: $99.95.<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span
|
||
class="token attr-name">src</span><span class="token attr-value"><span
|
||
class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../products/3333-0985/thumb.png<span
|
||
class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span
|
||
class="token attr-value"><span class="token punctuation attr-equals">=</span><span
|
||
class="token punctuation">"</span>Silver earrings<span class="token punctuation">"</span></span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Total cost: $237.89<span class="token tag"><span
|
||
class="token tag"><span class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span
|
||
class="token punctuation">></span></span></code></pre>
|
||
|
||
<p>This isn't really an <code><aside></code>, as it doesn't necessarily relate to the main
|
||
content of the page (you want it viewable from anywhere). It doesn't even particularly
|
||
warrant using a <code><section></code>, as it isn't part of the main content of
|
||
the page. So a <code><div></code> is fine in this case. We've included a heading as a
|
||
signpost to aid screenreader users in finding it.</p>
|
||
|
||
<div class="warning notecard">
|
||
<p><strong>Warning</strong>: Divs are so convenient to use that it's easy to use them too
|
||
much. As they carry no semantic value, they just clutter your HTML code. Take care to
|
||
use them only when there is no better semantic solution and try to reduce their usage to
|
||
the minimum otherwise you'll have a hard time updating and maintaining your documents.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<h3 id="line_breaks_and_horizontal_rules"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#line_breaks_and_horizontal_rules"
|
||
title="Permalink to Line breaks and horizontal rules">Line breaks and horizontal rules</a>
|
||
</h3>
|
||
<div><p>Two elements that you'll use occasionally and will want to know about are <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br"><code><br></code></a>
|
||
and
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr"><code><hr></code></a>:
|
||
</p>
|
||
|
||
<p><code><br></code> creates a line break in a paragraph; it is the only way to force a
|
||
rigid structure in a situation where you want a series of fixed short lines, such as in a
|
||
postal address or a poem. For example:</p>
|
||
|
||
<div id="line-break-live-sample">
|
||
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>There once was a man named O'Dell<span
|
||
class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span
|
||
class="token punctuation">></span></span>
|
||
Who loved to write HTML<span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
|
||
But his structure was bad, his semantics were sad<span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
|
||
and his markup didn't read very well.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span></code></pre>
|
||
</div>
|
||
|
||
<p>Without the <code><br></code> elements, the paragraph would just be rendered in one
|
||
long line (as we said earlier in the course, <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html">HTML
|
||
ignores most whitespace</a>); with <code><br></code> elements in the code, the
|
||
markup renders like this:</p>
|
||
|
||
<p>
|
||
<iframe class="hide-codepen-jsfiddle" id="frame_line-break-live-sample" width="100%"
|
||
height="125px"
|
||
src="./Document and website structure - Learn web development _ MDN_files/line-break-live-sample.html"
|
||
loading="lazy"></iframe>
|
||
</p>
|
||
|
||
<p><code><hr></code> elements create a horizontal rule in the document that denotes a
|
||
thematic change in the text (such as a change in topic or scene). Visually it just looks
|
||
like a horizontal line. As an example:</p>
|
||
|
||
<div id="horizantal-rule-live-sample">
|
||
<pre class="brush: html notranslate"><code><span class="token tag"><span class="token tag"><span
|
||
class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.<span
|
||
class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span
|
||
class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span
|
||
class="token punctuation">></span></span>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.<span
|
||
class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span
|
||
class="token punctuation">></span></span></code></pre>
|
||
</div>
|
||
|
||
<p>Would render like this:</p>
|
||
|
||
<p>
|
||
<iframe class="hide-codepen-jsfiddle" id="frame_horizantal-rule-live-sample" width="100%"
|
||
height="185px"
|
||
src="./Document and website structure - Learn web development _ MDN_files/horizantal-rule-live-sample.html"
|
||
loading="lazy"></iframe>
|
||
</p>
|
||
</div>
|
||
<h2 id="planning_a_simple_website"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#planning_a_simple_website"
|
||
title="Permalink to Planning a simple website">Planning a simple website</a></h2>
|
||
<div><p>Once you've planned out the structure of a simple webpage, the next logical step is to try
|
||
to work out what content you want to put on a whole website, what pages you need, and how they
|
||
should be arranged and link to one another for the best possible user experience. This is called
|
||
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Information_architecture">Information
|
||
architecture</a>. In a large, complex website, a lot of planning can go into this process,
|
||
but for a simple website of a few pages, this can be fairly simple, and fun!</p>
|
||
|
||
<ol>
|
||
<li>Bear in mind that you'll have a few elements common to most (if not all) pages — such as
|
||
the navigation menu, and the footer content. If your site is for a business, for
|
||
example, it's a good idea to have your contact information available in the footer on
|
||
each page. Note down what you want to have common to every page.<img
|
||
alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy"
|
||
src="./Document and website structure - Learn web development _ MDN_files/common-features.png"
|
||
style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"
|
||
width="700" height="438" loading="lazy"></li>
|
||
<li>Next, draw a rough sketch of what you might want the structure of each page to look like
|
||
(it might look like our simple website above). Note what each block is going to be.<img
|
||
alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer"
|
||
src="./Document and website structure - Learn web development _ MDN_files/site-structure.png"
|
||
style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"
|
||
width="700" height="271" loading="lazy"></li>
|
||
<li>Now, brainstorm all the other (not common to every page) content you want to have on
|
||
your website — write a big list down.<img
|
||
alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info"
|
||
src="./Document and website structure - Learn web development _ MDN_files/feature-list.png"
|
||
style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"
|
||
width="700" height="1244" loading="lazy"></li>
|
||
<li>Next, try to sort all these content items into groups, to give you an idea of what parts
|
||
might live together on different pages. This is very similar to a technique called <a
|
||
href="https://developer.mozilla.org/en-US/docs/Glossary/Card_sorting">Card
|
||
sorting</a>.<img
|
||
alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things"
|
||
src="./Document and website structure - Learn web development _ MDN_files/card-sorting.png"
|
||
style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"
|
||
width="700" height="675" loading="lazy"></li>
|
||
<li>Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw
|
||
lines to show the typical workflow between pages. The homepage will probably be in the
|
||
center, and link to most if not all of the others; most of the pages in a small site
|
||
should be available from the main navigation, although there are exceptions. You might
|
||
also want to include notes about how things might be presented.<img
|
||
alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page"
|
||
src="./Document and website structure - Learn web development _ MDN_files/site-map.png"
|
||
style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"
|
||
width="700" height="1017" loading="lazy"></li>
|
||
</ol>
|
||
</div>
|
||
<h3 id="active_learning_create_your_own_sitemap"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#active_learning_create_your_own_sitemap"
|
||
title="Permalink to Active learning: create your own sitemap">Active learning: create your
|
||
own sitemap</a></h3>
|
||
<div><p>Try carrying out the above exercise for a website of your own creation. What would you like
|
||
to make a site about?</p>
|
||
|
||
<div class="note notecard">
|
||
<p><strong>Note</strong>: Save your work somewhere; you might need it later on.</p>
|
||
</div>
|
||
</div>
|
||
<h2 id="test_your_skills!"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#test_your_skills!"
|
||
title="Permalink to Test your skills!">Test your skills!</a></h2>
|
||
<div><p>You've reached the end of this article, but can you remember the most important information?
|
||
You can find a detailed assessment that tests these skills at the end of the module; see <a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring
|
||
a page of content</a>. We'd advise going through the next article in the series first and
|
||
not just skipping to it though!</p></div>
|
||
<h2 id="summary"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#summary"
|
||
title="Permalink to Summary">Summary</a></h2>
|
||
<div><p>At this point you should have a better idea about how to structure a web page/site. In the
|
||
last article of this module, we'll study how to debug HTML.</p></div>
|
||
<h2 id="see_also"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#see_also"
|
||
title="Permalink to See also">See also</a></h2>
|
||
<div>
|
||
<ul>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using
|
||
HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the
|
||
HTML5 outline algorithm.
|
||
</li>
|
||
</ul>
|
||
|
||
<p></p>
|
||
<ul class="prev-next">
|
||
<li><a class="button minimal"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">
|
||
Previous </a></li>
|
||
<li><a class="button minimal"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">
|
||
Overview: Introduction to HTML</a></li>
|
||
<li><a class="button minimal"
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">
|
||
Next </a></li>
|
||
</ul>
|
||
<p></p></div>
|
||
<h2 id="in_this_module"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#in_this_module"
|
||
title="Permalink to In this module">In this module</a></h2>
|
||
<div>
|
||
<ul>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting
|
||
started with HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s
|
||
in the head? Metadata in HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML
|
||
text fundamentals</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating
|
||
hyperlinks</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced
|
||
text formatting</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document
|
||
and website structure</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging
|
||
HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking
|
||
up a letter</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring
|
||
a page of content</a></li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
<nav id="sidebar-quicklinks" class="sidebar"><h4>Related Topics</h4>
|
||
<div>
|
||
|
||
<ol>
|
||
<li data-default-state=""><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><strong>Complete
|
||
beginners start here!</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Getting started with the Web</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting
|
||
started with the Web overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing
|
||
basic software</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What
|
||
will your website look like?</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing
|
||
with files</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML
|
||
basics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS
|
||
basics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript
|
||
basics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing
|
||
your website</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How
|
||
the Web works</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li data-default-state="open"><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/HTML"><strong>HTML — Structuring
|
||
the Web</strong></a></li>
|
||
<li class="toggle">
|
||
<details open="">
|
||
<summary>Introduction to HTML</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction
|
||
to HTML overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting
|
||
started with HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's
|
||
in the head? Metadata in HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML
|
||
text fundamentals</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating
|
||
hyperlinks</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced
|
||
text formatting</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document
|
||
and website structure</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging
|
||
HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Assessment:
|
||
Marking up a letter</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Assessment:
|
||
Structuring a page of content</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Multimedia and embedding</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia
|
||
and embedding overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images
|
||
in HTML</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video
|
||
and audio content</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From
|
||
object to iframe — other embedding technologies</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding
|
||
vector graphics to the Web</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive
|
||
images</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Assessment:
|
||
Mozilla splash page</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>HTML tables</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML tables
|
||
overview</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics">HTML
|
||
table basics</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">HTML
|
||
Table advanced features and accessibility</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Assessment:
|
||
Structuring planet data</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li data-default-state=""><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS"><strong>CSS
|
||
— Styling the Web</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>CSS first steps</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">CSS
|
||
first steps overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What
|
||
is CSS?</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting
|
||
started with CSS</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How
|
||
CSS is structured</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How
|
||
CSS works</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using
|
||
your new knowledge</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>CSS building blocks</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks">CSS
|
||
building blocks overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade
|
||
and inheritance</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS
|
||
selectors</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The
|
||
box model</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds
|
||
and borders</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling
|
||
different text directions</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing
|
||
content</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values
|
||
and units</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing
|
||
items in CSS</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images,
|
||
media, and form elements</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling
|
||
tables</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging
|
||
CSS</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing
|
||
your CSS</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Styling text</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Styling
|
||
text overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental
|
||
text and font styling</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling
|
||
lists</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling
|
||
links</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web
|
||
fonts</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Assessment:
|
||
Typesetting a community school homepage</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>CSS layout</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">CSS
|
||
layout overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction
|
||
to CSS layout</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal
|
||
Flow</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a>
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column
|
||
Layout</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive
|
||
design</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's
|
||
guide to media queries</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy
|
||
Layout Methods</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting
|
||
Older Browsers</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental
|
||
Layout Comprehension</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li data-default-state=""><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript"><strong>JavaScript —
|
||
Dynamic client-side scripting</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>JavaScript first steps</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript
|
||
first steps overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What
|
||
is JavaScript?</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A
|
||
first splash into JavaScript</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What
|
||
went wrong? Troubleshooting JavaScript</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing
|
||
the information you need — Variables</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic
|
||
math in JavaScript — Numbers and operators</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling
|
||
text — Strings in JavaScript</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful
|
||
string methods</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment:
|
||
Silly story generator</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>JavaScript building blocks</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript
|
||
building blocks overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making
|
||
decisions in your code — Conditionals</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping
|
||
code</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions
|
||
— Reusable blocks of code</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build
|
||
your own function</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function
|
||
return values</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction
|
||
to events</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Assessment:
|
||
Image gallery</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Introducing JavaScript objects</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">Introducing
|
||
JavaScript objects overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">Object
|
||
basics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented
|
||
JavaScript for beginners</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object
|
||
prototypes</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance
|
||
in JavaScript</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON">Working
|
||
with JSON data</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object
|
||
building practice</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Assessment:
|
||
Adding features to our bouncing balls demo</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Asynchronous JavaScript</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous
|
||
JavaScript overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General
|
||
asynchronous programming concepts</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing
|
||
asynchronous JavaScript</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative
|
||
asynchronous JavaScript: Timeouts and intervals</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful
|
||
asynchronous programming with Promises</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making
|
||
asynchronous programming easier with async and await</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing
|
||
the right approach</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Client-side web APIs</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side
|
||
web APIs</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction
|
||
to web APIs</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating
|
||
documents</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching
|
||
data from the server</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third
|
||
party APIs</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing
|
||
graphics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video
|
||
and audio APIs</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side
|
||
storage</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms"><strong>Web forms — Working
|
||
with user data</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Core forms learning pathway</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">Web forms
|
||
overview</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">Your
|
||
first form</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How
|
||
to structure a web form</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic
|
||
native form controls</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">The
|
||
HTML5 input types</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Other
|
||
form controls</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling
|
||
web forms</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced
|
||
form styling</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI
|
||
pseudo-classes</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Client-side
|
||
form validation</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending
|
||
form data</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Advanced forms articles</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How
|
||
to build custom form controls</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending
|
||
forms through JavaScript</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS
|
||
property compatibility table for form controls</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility"><strong>Accessibility
|
||
— Make the web usable by everyone</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Accessibility guides</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Accessibility
|
||
overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">What
|
||
is accessibility?</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">HTML:
|
||
A good basis for accessibility</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS
|
||
and JavaScript accessibility best practices</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA
|
||
basics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia">Accessible
|
||
multimedia</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile">Mobile
|
||
accessibility</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Accessibility assessment</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Assessment:
|
||
Accessibility troubleshooting</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing"><strong>Tools and
|
||
testing</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Client-side web development tools</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Client-side
|
||
web development tools index</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side
|
||
tooling overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command
|
||
line crash course</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package
|
||
management basics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing
|
||
a complete toolchain</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying
|
||
our app</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Introduction to client-side frameworks</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Client-side
|
||
frameworks overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework
|
||
main features</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>React</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting
|
||
started with React</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning
|
||
our React todo list</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing
|
||
our React app</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React
|
||
interactivity: Events and state</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React
|
||
interactivity: Editing, filtering, conditional rendering</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility
|
||
in React</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React
|
||
resources</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Ember</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting
|
||
started with Ember</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember
|
||
app structure and componentization</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember
|
||
interactivity: Events, classes and state</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember
|
||
Interactivity: Footer functionality, conditional rendering</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing
|
||
in Ember</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember
|
||
resources and troubleshooting</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Vue</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting
|
||
started with Vue</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating
|
||
our first Vue component</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering
|
||
a list of Vue components</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding
|
||
a new todo form: Vue events, methods, and models</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling
|
||
Vue components with CSS</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using
|
||
Vue computed properties</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue
|
||
conditional rendering: editing existing todos</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus
|
||
management with Vue refs</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue
|
||
resources</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Svelte</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting
|
||
started with Svelte</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting
|
||
our Svelte Todo list app</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic
|
||
behavior in Svelte: working with variables and props</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing
|
||
our Svelte app</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced
|
||
Svelte: Reactivity, lifecycle, accessibility</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working
|
||
with Svelte stores</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript
|
||
support in Svelte</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment
|
||
and next steps</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Git and GitHub</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/GitHub">Git
|
||
and GitHub overview</a></li>
|
||
<li><a href="https://guides.github.com/activities/hello-world/">Hello World</a></li>
|
||
<li><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook</a>
|
||
</li>
|
||
<li><a href="https://guides.github.com/activities/forking/">Forking Projects</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">About
|
||
pull requests</a></li>
|
||
<li><a href="https://guides.github.com/features/issues/">Mastering Issues</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Cross browser testing</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross
|
||
browser testing overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction
|
||
to cross browser testing</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies
|
||
for carrying out testing</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling
|
||
common HTML and CSS problems</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling
|
||
common JavaScript problems</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling
|
||
common accessibility problems</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing
|
||
feature detection</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction
|
||
to automated testing</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting
|
||
up your own test automation environment</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li data-default-state=""><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/Server-side"><strong>Server-side
|
||
website programming</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>First steps</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">First
|
||
steps overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction
|
||
to the server-side</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server
|
||
overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side
|
||
web frameworks</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website
|
||
security</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Django web framework (Python)</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django">Django
|
||
web framework (Python) overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction">Introduction</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment">Setting
|
||
up a development environment</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial:
|
||
The Local Library website</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website">Tutorial
|
||
Part 2: Creating a skeleton website</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Models">Tutorial
|
||
Part 3: Using models</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Admin_site">Tutorial
|
||
Part 4: Django admin site</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page">Tutorial
|
||
Part 5: Creating our home page</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views">Tutorial
|
||
Part 6: Generic list and detail views</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Sessions">Tutorial
|
||
Part 7: Sessions framework</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Authentication">Tutorial
|
||
Part 8: User authentication and permissions</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms">Tutorial
|
||
Part 9: Working with forms</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Testing">Tutorial
|
||
Part 10: Testing a Django web application</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Deployment">Tutorial
|
||
Part 11: Deploying Django to production</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/web_application_security">Web
|
||
application security</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/django_assessment_blog">Assessment:
|
||
DIY mini blog</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Express Web Framework (node.js/JavaScript)</summary>
|
||
<ol>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express
|
||
Web Framework (Node.js/JavaScript) overview</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node
|
||
introduction</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting
|
||
up a Node (Express) development environment</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express
|
||
tutorial: The Local Library website</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express
|
||
Tutorial Part 2: Creating a skeleton website</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express
|
||
Tutorial Part 3: Using a database (with Mongoose)</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express
|
||
Tutorial Part 4: Routes and controllers</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express
|
||
Tutorial Part 5: Displaying library data</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express
|
||
Tutorial Part 6: Working with forms</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express
|
||
Tutorial Part 7: Deploying to production</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#"><strong>Further
|
||
resources</strong></a></li>
|
||
<li class="toggle">
|
||
<details>
|
||
<summary>Common questions</summary>
|
||
<ol>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">HTML
|
||
questions</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto">CSS
|
||
questions</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Howto">JavaScript
|
||
questions</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions#Web_mechanics">Web
|
||
mechanics</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions#Tools_and_setup">Tools
|
||
and setup</a></li>
|
||
<li>
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions#Design_and_accessibility">Design
|
||
and accessibility</a></li>
|
||
</ol>
|
||
</details>
|
||
</li>
|
||
</ol>
|
||
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<aside class="metadata">
|
||
<div class="metadata-content-container">
|
||
<div id="on-github" class="on-github"><h4>Found a problem with this page?</h4>
|
||
<ul>
|
||
<li>
|
||
<a href="https://github.com/mdn/content/blob/main/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.html"
|
||
title="Folder: en-us/learn/html/introduction_to_html/document_and_website_structure (Opens in a new tab)"
|
||
target="_blank" rel="noopener noreferrer">Source on <b>GitHub</b></a></li>
|
||
<li>
|
||
<a href="https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn%2FHTML%2FIntroduction_to_HTML%2FDocument_and_website_structure%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn%2Fhtml%2Fintroduction_to_html%2Fdocument_and_website_structure%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn%2FHTML%2FIntroduction_to_HTML%2FDocument_and_website_structure%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn%2Fhtml%2Fintroduction_to_html%2Fdocument_and_website_structure%2Findex.html%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F56454618b1f9ecad9714f68b219aedec1738e463%0A*+Document+last+modified%3A+2021-02-24T15%3A02%3A49.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22Document+and+website+structure%22%3A+%28short+summary+here+please%29&labels=needs+triage&labels=Content%3A+Learn"
|
||
title="This will take you to https://github.com/mdn/content to file a new issue"
|
||
target="_blank" rel="noopener noreferrer">Report a problem with this content on
|
||
<b>GitHub</b></a></li>
|
||
<li>Want to fix the problem yourself? See <a
|
||
href="https://github.com/mdn/content/blob/main/README.md" target="_blank"
|
||
rel="noopener noreferrer">our Contribution guide</a>.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p class="last-modified-date"><b>Last modified:</b>
|
||
<time datetime="2021-02-24T15:02:49.000Z">Feb 24, 2021</time>
|
||
,
|
||
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure/contributors.txt">by
|
||
MDN contributors</a></p>
|
||
</div>
|
||
</aside>
|
||
<footer id="nav-footer" class="page-footer">
|
||
<div class="content-container">
|
||
<div class="page-footer-logo"><a href="https://developer.mozilla.org/en-US/" class="logo"
|
||
aria-label="MDN Web Docs">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.74 135" role="img" fill="#fff">
|
||
<g id="Layer_2" data-name="Layer 2">
|
||
<path class="cls-1"
|
||
d="M7.14,8.35V119.41H118.19V8.35Zm103.71,56c-.48.92-1,1.79-1.46,2.71a3.44,3.44,0,0,1-3.54,2,2.4,2.4,0,0,0-1.55.5c-1.37.9-2.76,1.79-4.18,2.63a7.33,7.33,0,0,1-6.35.34,29.71,29.71,0,0,0-10.63-2,11.7,11.7,0,0,0-9.46,4.31,14.84,14.84,0,0,0-2.13,4.29c-1.24,3.07-2.3,21.38-2.3,26.05,0,0-17.62-3.42-34.15-20.34l4.31-11.32H25.91l9.76-10.35H18.87l9.77-10.34H12.69L30.45,34A40.9,40.9,0,0,1,50.22,23.17c7.1-1.22,8.93-.53,13.31.77l2.43.73.85.25,3.1.95a12.56,12.56,0,0,0,6.21.09,11.37,11.37,0,0,1,8.25,1,8.24,8.24,0,0,1,4.1,6.22,7.29,7.29,0,0,0,3.61,5.49,59.45,59.45,0,0,0,9.32,4.11c2.27.86,4.54,1.84,6.79,2.72a6.81,6.81,0,0,1,2.86,2.06,4.81,4.81,0,0,1,1.1,2.73c.14,2,.37,4,.47,6h0A15.24,15.24,0,0,1,110.85,64.32Z"></path>
|
||
<path class="cls-1"
|
||
d="M320.12,39.62a5.42,5.42,0,0,0-4.53,2.13,7.36,7.36,0,0,0-1.7,4.43v2.36a6.28,6.28,0,0,0,1.7,4.46,5.63,5.63,0,0,0,4.3,1.82,5.12,5.12,0,0,0,4.57-2.27A9.7,9.7,0,0,0,326,47a8.11,8.11,0,0,0-1.67-5.52A5.36,5.36,0,0,0,320.12,39.62Z"></path>
|
||
<path class="cls-1"
|
||
d="M387.38,39.53a5.52,5.52,0,0,0-4.7,2.15,8.8,8.8,0,0,0-1.63,5.49,9.23,9.23,0,0,0,1.58,5.45,5.38,5.38,0,0,0,4.7,2.25,5.61,5.61,0,0,0,4.74-2.2,8.91,8.91,0,0,0,1.68-5.59A8.24,8.24,0,0,0,392,41.56,5.76,5.76,0,0,0,387.38,39.53Z"></path>
|
||
<path class="cls-1"
|
||
d="M299.47,41.35a4.34,4.34,0,0,0-4-1.92,4.55,4.55,0,0,0-3.89,1.73A8.37,8.37,0,0,0,290,45.33h10.48A6.3,6.3,0,0,0,299.47,41.35Z"></path>
|
||
<path class="cls-1"
|
||
d="M357.74,30.75H352V54.06h5.72q5.47,0,8.35-3T369,42.41q0-5.43-2.88-8.55T357.74,30.75Z"></path>
|
||
<path class="cls-1"
|
||
d="M121.55,8.35v70.8h323V8.35ZM163.76,30.8h-4V54h3.68v3.73H152.19V54h3.31V36.79h-.19l-9.63,19.12h-2.12l-10-19.4h-.19V54h3.45v3.73H125.67V54h3.68V30.8h-4V27.07H133l11.66,22.56h.19l11.18-22.56h7.7Zm29.12,22.67q-4.11,4.28-11.38,4.28H167.44V54.06h3.73V30.75h-3.73V27.07h13.83q7.59,0,11.66,4.29a15.4,15.4,0,0,1,4,11A15.33,15.33,0,0,1,192.88,53.47ZM231.77,30.8h-3.68v27h-2.6L208.08,35h-.19V54h4.67v3.73H200.34V54h3.49V30.8h-4V27.07h7.08l16.9,22.09H224V30.8h-4.58V27.07h12.32Zm43.8,27h-3.31l-7.83-23.18h-.19l-7.55,23.18h-3.35L244.56,30.8h-2.65V27.07H253V30.8h-3.87L255,50.71h.23l6.61-19.91H259V27.07h11V30.8h-2.78l6.61,20.1h.23l5.43-20.1h-4.15V27.07h11V30.8h-2.54Zm26.71-1.51a9.66,9.66,0,0,1-6.42,2,10.2,10.2,0,0,1-7.41-2.74c-1.89-1.82-2.83-4.47-2.83-7.93a12.37,12.37,0,0,1,2.64-8.12,9,9,0,0,1,7.32-3.21,8.62,8.62,0,0,1,6.75,2.69,9.65,9.65,0,0,1,2.45,6.52,13.67,13.67,0,0,1-.28,2.69H290q.29,6.71,6.18,6.7a5.2,5.2,0,0,0,3.71-1.18,5.82,5.82,0,0,0,1.67-2.83l3.45.71A7.21,7.21,0,0,1,302.28,56.24Zm25.77-1.63c-1.51,2.4-3.92,3.61-7.22,3.61s-5.84-1.29-7.22-3.87c0,.25-.1.82-.21,1.7s-.19,1.44-.22,1.7H309c.16-1,.31-2,.47-3.07a21.42,21.42,0,0,0,.24-3.16v-23h-3.4V25.27h7.55V40.9a9.76,9.76,0,0,1,2.67-3.28,7.33,7.33,0,0,1,4.74-1.4A8.48,8.48,0,0,1,327.77,39q2.55,2.74,2.55,7.74A14.6,14.6,0,0,1,328.05,54.61Zm41.39-1.14q-4.11,4.28-11.37,4.28H344V54.06h3.73V30.75H344V27.07h13.83q7.59,0,11.66,4.29a15.41,15.41,0,0,1,4.06,11A15.34,15.34,0,0,1,369.44,53.47Zm25.65,1.68a10.53,10.53,0,0,1-7.9,3.07,10,10,0,0,1-7.63-3,10.93,10.93,0,0,1-2.8-7.83,12.13,12.13,0,0,1,2.69-7.93q2.69-3.3,8-3.3t8,3.28a12,12,0,0,1,2.64,7.76A10.86,10.86,0,0,1,395.09,55.15Zm22.61.57c-1.4,1.66-3.63,2.5-6.68,2.5a9.58,9.58,0,0,1-7.15-2.76q-2.72-2.76-2.71-7.91a12.25,12.25,0,0,1,2.69-8,9.17,9.17,0,0,1,7.5-3.28,15,15,0,0,1,3.82.48,10.37,10.37,0,0,1,3.5,1.65l.85,5.47-3.35.38-.76-3.54a8.07,8.07,0,0,0-4.11-1,4.9,4.9,0,0,0-4.39,2.15,9.93,9.93,0,0,0-1.41,5.55A8.9,8.9,0,0,0,407,52.84a5.23,5.23,0,0,0,4.44,2c2.92,0,4.67-1.7,5.23-5.1l3.5.71A10.34,10.34,0,0,1,417.7,55.72Zm20.48.75a11.68,11.68,0,0,1-6.63,1.75,15.52,15.52,0,0,1-8.26-2.08L424,51l3.26.33-.1,2.74a7,7,0,0,0,2.06.66,12.63,12.63,0,0,0,2.19.19,8.68,8.68,0,0,0,3.66-.75,2.5,2.5,0,0,0,1.63-2.36,2.25,2.25,0,0,0-1.32-2.2,12.65,12.65,0,0,0-3.28-1c-1.31-.22-2.61-.49-3.9-.82a7.5,7.5,0,0,1-3.25-1.7,4.67,4.67,0,0,1-1.33-3.66c0-2.36.88-4,2.62-4.91a12,12,0,0,1,5.6-1.37,15,15,0,0,1,4.08.55,16.65,16.65,0,0,1,3.47,1.39l.47,5.1-3.3.37-.48-3.3a9.5,9.5,0,0,0-4.06-.9,5.62,5.62,0,0,0-2.87.66A2.33,2.33,0,0,0,428,42.27a2.13,2.13,0,0,0,1.3,2.07,11.91,11.91,0,0,0,3.21.92,36.69,36.69,0,0,1,3.82.83,7.46,7.46,0,0,1,3.21,1.74,4.9,4.9,0,0,1,1.3,3.73A5.56,5.56,0,0,1,438.18,56.47Z"></path>
|
||
<path class="cls-1"
|
||
d="M181.17,30.75h-5.71V54.06h5.71q5.47,0,8.36-3t2.88-8.61q0-5.43-2.88-8.55T181.17,30.75Z"></path>
|
||
<path class="cls-1"
|
||
d="M121.63,119.32V81.74H236.54v37.58ZM153.22,109h-2v-6.85a4.8,4.8,0,0,0-1.58-4,5.57,5.57,0,0,0-3.55-1.26,5,5,0,0,0-4.92,3.26,4.19,4.19,0,0,0-1.88-2.46,5.82,5.82,0,0,0-3-.8,4.89,4.89,0,0,0-4.56,2.56V97.24h-6.28v3.26h2V109h-2v3.23h9.11V109H131.7v-5.25a4.4,4.4,0,0,1,.69-2.56,2.47,2.47,0,0,1,2.21-1q2.57,0,2.56,3.63v8.41h6.29V109h-2v-5.25a4.47,4.47,0,0,1,.67-2.56,2.42,2.42,0,0,1,2.19-1q2.63,0,2.63,3.63v8.41h6.28Zm9.88-12.07q-4,0-6,2.36a8.41,8.41,0,0,0-2,5.66,7.25,7.25,0,0,0,2.17,5.62,8,8,0,0,0,5.65,2,8.54,8.54,0,0,0,5.94-2.11,7.27,7.27,0,0,0,2.34-5.67,8.21,8.21,0,0,0-2-5.51Q167.13,96.94,163.1,96.94ZM163,109.28a3,3,0,0,1-2.63-1.33,5.68,5.68,0,0,1-.9-3.26,5,5,0,0,1,1-3.28,3.23,3.23,0,0,1,2.61-1.18,3.5,3.5,0,0,1,2.59,1.08,4.56,4.56,0,0,1,1.07,3.31,5.21,5.21,0,0,1-1,3.41A3.33,3.33,0,0,1,163,109.28Zm25-2.3-3.39-.29-.7,2.32H179l8.32-9.54L187,97.24H173.81l-.53,5.25,3.16.34.67-2.36h4.65L173.51,110l.44,2.26h13.13Zm7.62-9.74h-4.46v5.39h4.46Zm0,9.61h-4.46v5.39h4.46Zm13.54-17.49h-4.23l-6.48,22.88h4.22Zm8.68,0h-4.23l-6.45,22.88h4.19Zm15,22.51-.07-2.26a1.22,1.22,0,0,1-.56.1c-.69,0-1-.39-1-1.16v-6.49a4.39,4.39,0,0,0-1.8-3.84,7,7,0,0,0-4.16-1.28,14.55,14.55,0,0,0-3.16.3,24.14,24.14,0,0,0-3.29,1.06l-.56,3.46,3.39.4.5-1.69a2.78,2.78,0,0,1,1.08-.37,11.3,11.3,0,0,1,1.25-.07c1.19,0,1.89.37,2.09,1.1a8.55,8.55,0,0,1,.3,2.26v.5a8.91,8.91,0,0,0-1.18-.11c-.41,0-.81,0-1.21,0a12.64,12.64,0,0,0-4.81.88,3.53,3.53,0,0,0-2.18,3.64,3.66,3.66,0,0,0,1.48,3.33,5.63,5.63,0,0,0,3.11,1,4.67,4.67,0,0,0,3-.91,6.78,6.78,0,0,0,1.8-2,3,3,0,0,0,3.33,3A5.54,5.54,0,0,0,232.85,111.87Zm-9.25-2.32a1.69,1.69,0,0,1-1.36-.52,1.81,1.81,0,0,1-.43-1.21,1.67,1.67,0,0,1,.86-1.68,4.63,4.63,0,0,1,2-.42,7.69,7.69,0,0,1,1.07.07l1.06.13a3.58,3.58,0,0,1-1.08,2.74A3.24,3.24,0,0,1,223.6,109.55Z"></path>
|
||
</g>
|
||
</svg>
|
||
</a></div>
|
||
<ul class="link-list-mdn">
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web">Web Technologies</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Learn">Learn Web Development</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/MDN/Feedback">Feedback</a></li>
|
||
</ul>
|
||
<ul class="link-list-moz">
|
||
<li><a href="https://www.mozilla.org/about/" target="_blank" rel="noopener noreferrer">About</a>
|
||
</li>
|
||
<li><a href="https://shop.spreadshirt.com/mdn-store/" target="_blank" rel="noopener noreferrer">MDN
|
||
Web Docs Store</a></li>
|
||
<li><a href="https://www.mozilla.org/contact/" target="_blank" rel="noopener noreferrer">Contact
|
||
Us</a></li>
|
||
<li>
|
||
<a href="https://www.mozilla.org/firefox/?utm_source=developer.mozilla.org&utm_campaign=footer&utm_medium=referral"
|
||
target="_blank" rel="noopener noreferrer">Firefox</a></li>
|
||
</ul>
|
||
<div class="social social-mdn"><h4>MDN</h4>
|
||
<ul>
|
||
<li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"
|
||
aria-label="Twitter">
|
||
<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
|
||
aria-hidden="true" role="img">
|
||
<path d="M97.5 20.59a42 42 0 01-9.76 10.06c.06.85.06 1.69.06 2.53 0 25.74-19.59 55.4-55.4 55.4a55 55 0 01-29.9-8.74 40.41 40.41 0 004.7.24 39 39 0 0024.18-8.32 19.5 19.5 0 01-18.21-13.5 24.69 24.69 0 003.68.3A20.65 20.65 0 0022 57.9 19.48 19.48 0 016.36 38.79v-.24a19.69 19.69 0 008.8 2.45 19.5 19.5 0 01-6-26 55.33 55.33 0 0040.12 20.35 21.6 21.6 0 01-.48-4.46 19.45 19.45 0 0119.45-19.47 19.4 19.4 0 0114.22 6.15 38.42 38.42 0 0012.36-4.7 19.44 19.44 0 01-8.54 10.73 38.89 38.89 0 0011.21-3z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
</a></li>
|
||
<li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"
|
||
aria-label="Github">
|
||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img">
|
||
<path clip-rule="evenodd"
|
||
d="M50 5.7C24.9 5.7 4.5 26 4.6 51.2c0 19.6 12.5 36.9 31.1 43.1 2.3.4 3.1-1 3.1-2.2s0-3.9-.1-7.7c-12.6 2.7-15.3-6.1-15.3-6.1-2.1-5.3-5-6.7-5-6.7-4.1-2.9.3-2.8.3-2.8 4.6.3 7 4.7 7 4.7 4.1 6.9 10.6 4.9 13.2 3.8.2-2.3 1.2-4.5 2.9-6.1-10.2-1.1-20.8-5-20.8-22.5-.1-4.5 1.6-8.9 4.7-12.2-.5-1.1-2-5.7.4-12 0 0 3.8-1.2 12.5 4.7 7.4-2 15.3-2 22.8 0 8.7-5.9 12.4-4.7 12.4-4.7 2.5 6.3 1 10.9.5 12 3.1 3.3 4.8 7.7 4.7 12.2 0 17.5-10.6 21.4-20.8 22.4 1.6 1.4 3.1 4.2 3.1 8.4 0 6.1-.1 11-.1 12.4 0 1.2.8 2.6 3.1 2.2 23.8-8 36.6-33.8 28.6-57.6C86.8 18.2 69.5 5.7 50 5.7z"
|
||
fill="currentColor" fill-rule="evenodd"></path>
|
||
</svg>
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="social social-moz"><h4>Mozilla</h4>
|
||
<ul>
|
||
<li><a href="https://twitter.com/mozilla" target="_blank" rel="noopener noreferrer"
|
||
aria-label="Twitter">
|
||
<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
|
||
aria-hidden="true" role="img">
|
||
<path d="M97.5 20.59a42 42 0 01-9.76 10.06c.06.85.06 1.69.06 2.53 0 25.74-19.59 55.4-55.4 55.4a55 55 0 01-29.9-8.74 40.41 40.41 0 004.7.24 39 39 0 0024.18-8.32 19.5 19.5 0 01-18.21-13.5 24.69 24.69 0 003.68.3A20.65 20.65 0 0022 57.9 19.48 19.48 0 016.36 38.79v-.24a19.69 19.69 0 008.8 2.45 19.5 19.5 0 01-6-26 55.33 55.33 0 0040.12 20.35 21.6 21.6 0 01-.48-4.46 19.45 19.45 0 0119.45-19.47 19.4 19.4 0 0114.22 6.15 38.42 38.42 0 0012.36-4.7 19.44 19.44 0 01-8.54 10.73 38.89 38.89 0 0011.21-3z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
</a></li>
|
||
<li><a href="https://www.instagram.com/mozillagram/" target="_blank" rel="noopener noreferrer"
|
||
aria-label="Instagram">
|
||
<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
|
||
aria-hidden="true" role="img">
|
||
<path d="M65 50a15 15 0 10-15 15 15 15 0 0015-15zm8.08 0A23.09 23.09 0 1150 26.92 23.05 23.05 0 0173.08 50zm6.33-24A5.39 5.39 0 1174 20.59 5.37 5.37 0 0179.41 26zM50 13.09c-6.57 0-20.63-.53-26.55 1.81a14.38 14.38 0 00-5.15 3.4 14.38 14.38 0 00-3.4 5.15c-2.34 5.92-1.81 20-1.81 26.55s-.53 20.62 1.81 26.54a15.39 15.39 0 008.55 8.55c5.92 2.35 20 1.82 26.55 1.82s20.62.53 26.54-1.82a15.39 15.39 0 008.55-8.55c2.35-5.92 1.82-20 1.82-26.54s.53-20.63-1.82-26.55a15.39 15.39 0 00-8.55-8.55c-5.92-2.34-19.98-1.81-26.54-1.81zM95 50c0 6.21.06 12.36-.3 18.57-.35 7.21-2 13.6-7.26 18.87s-11.66 6.91-18.87 7.26c-6.21.36-12.36.3-18.57.3s-12.36.06-18.57-.3c-7.21-.35-13.6-2-18.87-7.26S5.65 75.78 5.3 68.57C4.94 62.36 5 56.21 5 50s-.06-12.36.3-18.57c.35-7.21 2-13.6 7.26-18.87S24.22 5.65 31.43 5.3C37.64 4.94 43.79 5 50 5s12.36-.06 18.57.3c7.21.35 13.6 2 18.87 7.26s6.91 11.66 7.26 18.87c.36 6.21.3 12.36.3 18.57z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
<p id="license" class="footer-license">© 2005-2021 Mozilla and individual contributors. Content is
|
||
available under <a href="https://developer.mozilla.org/docs/MDN/About#Copyrights_and_licenses">these
|
||
licenses</a>.</p>
|
||
<ul class="footer-legal">
|
||
<li><a href="https://www.mozilla.org/about/legal/terms/mozilla" target="_blank"
|
||
rel="noopener noreferrer">Terms</a></li>
|
||
<li><a href="https://www.mozilla.org/privacy/websites/" target="_blank" rel="noopener noreferrer">Privacy</a>
|
||
</li>
|
||
<li><a href="https://www.mozilla.org/privacy/websites/#cookies" target="_blank"
|
||
rel="noopener noreferrer">Cookies</a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div class="page-overlay hidden"></div>
|
||
</div>
|
||
</body>
|
||
</html> |