# kb

id: including-vector-graphics-in-html-learn-web-development-mdn-20260505-2
category: reference
title: Including vector graphics in HTML - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:41.245467+00:00
instance: kb-cron
parent: including-vector-graphics-in-html-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML-2.md

summary:
### [Troubleshooting and cross-browser support](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML#troubleshooting_and_cross-browser_support) For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your `src` attribute and use a [`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead: You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG: Like the `<img>` method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations. If your SVGs aren't showing up at all, it might be because your server isn't set up properly. If that's the problem, this [article will point you in the right direction](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Getting_started#a_word_on_web_servers_for_.svgz_files). ### [How to include SVG code inside your HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML#how_to_include_svg_code_inside_your_html) You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your **SVG inline** , or

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML


id: including-vector-graphics-in-html-learn-web-development-mdn-20260505-3
category: reference
title: Including vector graphics in HTML - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:41.245467+00:00
instance: kb-cron
parent: including-vector-graphics-in-html-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML-3.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 3, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/including_vector_graphics_in_html/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/including_vector_graphics_in_html \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FIncluding_vector_graphics_in_HTML&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fincluding_vector_graphics_in_html%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FIncluding_vector_graphics_in_HTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fincluding_vector_graphics_in_html%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Faff319cd81d10cfda31b13adb3263deafb284b20%0A*+Document+last+modified%3A+2025-11-03T18%3A07%3A59.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: including-vector-graphics-in-html-learn-web-development-mdn-20260505-4
category: reference
title: Including vector graphics in HTML - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:41.245467+00:00
instance: kb-cron
parent: including-vector-graphics-in-html-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML-4.md


id: lists-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists-0.md
category: reference
title: Lists - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists
date_saved: 2026-05-05T05:55:43.726723+00:00
instance: kb-cron
parent: lists-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: lists-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists-1.md
category: reference
title: Lists - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists
date_saved: 2026-05-05T05:55:43.726723+00:00
instance: kb-cron
parent: lists-learn-web-development-mdn-20260505-0
summary:
The instructions you need to follow are: 1. Mark up the main page title using an `<h1>` element, and the three subtitles using `<h2>` elements. 2. There are five lines of text that make sense to be marked up with `<p>` elements. Do this now. 3. Mark up the list of ingredients as an unordered list. 4. Mark up the list of instructions as an ordered list. If you make a mistake, you can clear your work using the _Reset_ button in the MDN Playground. If you get really stuck, you can view the solution below the code output. Click here to show the solution You can find an example of the correct HTML for this example at [text-complete.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/html-text-formatting/text-complete.html) in our GitHub repo. ## [Nesting lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists#nesting_lists) It is perfectly OK to nest one list inside another one. You might want to have some sub-bullets sitting below a top-level bullet. Let's take the second list from our recipe example: Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list and put that list inside


id: lists-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists-2.md
category: reference
title: Lists - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists
date_saved: 2026-05-05T05:55:43.726723+00:00
instance: kb-cron
parent: lists-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/lists/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/lists \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FLists&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Flists%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FLists%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Flists%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F27f34d8b137f9bb2b467f9f9a1c4e1d04e12ed89%0A*+Document+last+modified%3A+2025-08-21T12%3A31%3A52.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. _[Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists)_ 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: challenge-marking-up-a-letter-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Marking up a letter - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:46.661281+00:00
instance: kb-cron
parent: challenge-marking-up-a-letter-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter


id: challenge-marking-up-a-letter-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Marking up a letter - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:46.661281+00:00
instance: kb-cron
parent: challenge-marking-up-a-letter-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter-1.md

summary:
## [Example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter#example) The following live example shows what the letter should look like after being marked up. If you are getting stuck on how to achieve some of this, see the solution below the live example. Click here to show the solution Your finished HTML should look like this: * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) * [ Overview: Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jan 2, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/marking_up_a_letter/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/marking_up_a_letter \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FMarking_up_a_letter&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fmarking_up_a_letter%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FMarking_up_a_letter%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fmarking_up_a_letter%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F39b59de03c08a5de12ce99a217988f6a0756407d%0A*+Document+last+modified%3A+2026-01-02T15%3A19%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter


id: challenge-marking-up-a-letter-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Marking up a letter - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:46.661281+00:00
instance: kb-cron
parent: challenge-marking-up-a-letter-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter


id: challenge-structuring-a-planet-data-table-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Structuring a planet data table - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:49.181310+00:00
instance: kb-cron
parent: challenge-structuring-a-planet-data-table-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table


id: challenge-structuring-a-planet-data-table-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Structuring a planet data table - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:49.181310+00:00
instance: kb-cron
parent: challenge-structuring-a-planet-data-table-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table-1.md

summary:
## [Hints and tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table#hints_and_tips) * The first cell of the header row needs to be blank, and span two columns. * The group row headings (e.g., _Jovian planets_) that sit to the left of the planet name row headings (e.g., _Saturn_) are a little tricky to sort out — you need to make sure each one spans the correct number of rows and columns. * One way of associating headers with their rows/columns is a lot easier than the other way. ## [Example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table#example) The table should look like the following after being marked up correctly. If you get stuck, check out the solution below the live example. Click here to show the solution Your finished HTML should look like this: * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility) * [ Overview: Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jan 8, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/planet_data_table/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/planet_data_table \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FPlanet_data_table&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fplanet_data_table%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FPlanet_data_table%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fplanet_data_table%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fee677b2c4d4a226fe4aedf05b2b156cae8a2bb95%0A*+Document+last+modified%3A+2026-01-08T17%3A39%3A40.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table


id: challenge-structuring-a-planet-data-table-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Structuring a planet data table - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:49.181310+00:00
instance: kb-cron
parent: challenge-structuring-a-planet-data-table-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Planet_data_table


id: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Creepy-crawly splash page - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page
date_saved: 2026-05-05T05:55:51.819812+00:00
instance: kb-cron
parent: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Creepy-crawly splash page - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page
date_saved: 2026-05-05T05:55:51.819812+00:00
instance: kb-cron
parent: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page-1.md

summary:
### [Adding section images](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page#adding_section_images) In the expanded information sections on each type of bug, below each `<h2>`, we'd like you to add an image element that embeds the appropriate image for each section. Give each image some appropriate alternative text for the benefit of screen reader users (and in case the image doesn't load), and constrain each image to dimensions of 250 x 180. In addition, we'd like you to include a caption for each image; think about what container element is needed to semantically associate the two together. Don't just make the caption repeat the alternative text; it should work alongside the alternative text and the image. ### [Add bug emojis or icons to the nav menu and `<h2>`s](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page#add_bug_emojis_or_icons_to_the_nav_menu_and_h2s) For a bit of fun, we'd like you to add icons to the start of each nav list item, and the same icon to the start of each corresponding `<h2>`. You could do this using embedded images, but it's easier to just find appropriate emojis and add them to the HTML text itself. ## [Hints and tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page#hints_and_tips) * You can use the [W3C HTML validator](https://validator.w3.org/) to catch mistakes in your HTML. * You don't need to know any CSS to


id: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Creepy-crawly splash page - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page
date_saved: 2026-05-05T05:55:51.819812+00:00
instance: kb-cron
parent: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 12, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/splash_page/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/splash_page \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FSplash_page&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fsplash_page%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FSplash_page%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fsplash_page%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F0ab262675372b83fc870accf3dc46d6a367c451c%0A*+Document+last+modified%3A+2026-02-12T15%3A14%3A25.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-3
category: reference
title: Challenge: Creepy-crawly splash page - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page
date_saved: 2026-05-05T05:55:51.819812+00:00
instance: kb-cron
parent: challenge-creepy-crawly-splash-page-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Splash_page-3.md


id: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Structuring a page of content - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:54.333394+00:00
instance: kb-cron
parent: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content


id: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Structuring a page of content - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:54.333394+00:00
instance: kb-cron
parent: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content-1.md

summary:
### [Styling the page](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content#styling_the_page) If required, apply the provided CSS to the page by adding another [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link) element just below the existing one provided in the starting HTML (some online code editors will apply the CSS automatically). ## [Hints and tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content#hints_and_tips) * Use the [W3C HTML validator](https://validator.w3.org/) to catch unintended mistakes in your HTML — so that you can fix them. * You don't need to know any CSS to do this challenge; you just need to apply the provided CSS to your HTML. * If you are getting stuck and can't envisage what elements to put where, draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block. This is extremely helpful. ## [Example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content#example) The following screenshot shows an example of what the homepage might look like after being marked up. If you are getting stuck on how to achieve some of this, see the solution below the live example. ![The finished example for the challenge; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content/example-page.png) Click here to show the solution Your finished HTML should look like this: * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links)

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content


id: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Structuring a page of content - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:54.333394+00:00
instance: kb-cron
parent: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 24, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/structuring_a_page_of_content/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/structuring_a_page_of_content \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FStructuring_a_page_of_content&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fstructuring_a_page_of_content%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FStructuring_a_page_of_content%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fstructuring_a_page_of_content%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fe91043ed51d5ae2232912c1ae24bc94ffe254674%0A*+Document+last+modified%3A+2026-04-24T10%3A30%3A31.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. _[Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content)_ 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content


id: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-3
category: reference
title: Challenge: Structuring a page of content - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:54.333394+00:00
instance: kb-cron
parent: challenge-structuring-a-page-of-content-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content-3.md


id: structuring-documents-learn-web-development-mdn-20260505-0
category: reference
title: Structuring documents - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:56.785238+00:00
instance: kb-cron
parent: structuring-documents-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents


id: structuring-documents-learn-web-development-mdn-20260505-1
category: reference
title: Structuring documents - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:56.785238+00:00
instance: kb-cron
parent: structuring-documents-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents-1.md

summary:
[footer:](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents#footer) 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 [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO) purposes, by providing links for quick access to popular content. A "typical website" could be structured something like this: ![a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents/sample-website.png) **Note:** The image above illustrates the main sections of a document, which you can define with HTML. However, the _appearance_ of the page shown here — including the layout, colors, and fonts — is achieved by applying [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) to the HTML. ## [HTML for structuring content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents#html_for_structuring_content) The 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

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents


id: structuring-documents-learn-web-development-mdn-20260505-2
category: reference
title: Structuring documents - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:56.785238+00:00
instance: kb-cron
parent: structuring-documents-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents-2.md

summary:
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. ### [Non-semantic wrappers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents#non-semantic_wrappers) 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 [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS) or [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript). For cases like these, HTML provides the [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) and [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span) elements. You should use these preferably with a suitable [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/class) attribute, to provide some kind of label for them so they can be easily targeted. [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span) 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: 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. [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) is a block level non-semantic element, which

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents


id: structuring-documents-learn-web-development-mdn-20260505-3
category: reference
title: Structuring documents - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:56.785238+00:00
instance: kb-cron
parent: structuring-documents-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents-3.md

summary:
Try carrying out the above exercise for a website of your own creation. What would you like to make a site about? As a stretch goal, use the HTML knowledge you've gained so far to create a few of the pages on the site. You could use our [basic HTML template](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html) as a starting point. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents#summary) At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll look at how to create hyperlinks, one of the fundamental features of the web. * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) * [ Overview: Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 25, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/structuring_documents/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/structuring_documents \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FStructuring_documents&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fstructuring_documents%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FStructuring_documents%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fstructuring_documents%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F65c873fda639b035b94db77dd0f9373f38549aa0%0A*+Document+last+modified%3A+2025-08-25T08%3A46%3A41.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look


id: structuring-documents-learn-web-development-mdn-20260505-4
category: reference
title: Structuring documents - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:56.785238+00:00
instance: kb-cron
parent: structuring-documents-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents-4.md


id: html-table-accessibility-learn-web-development-mdn-20260505-0
category: reference
title: HTML table accessibility - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:59.430274+00:00
instance: kb-cron
parent: html-table-accessibility-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility


id: html-table-accessibility-learn-web-development-mdn-20260505-1
category: reference
title: HTML table accessibility - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:59.430274+00:00
instance: kb-cron
parent: html-table-accessibility-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility-1.md

summary:
## [Recap: Tables for visually impaired users](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#recap_tables_for_visually_impaired_users) Let's recap briefly on how we use data tables. A table can be a handy tool, for giving us quick access to data and allowing us to look up different values. For example, it takes only a short glance at the table below to find out how many rings were sold in Ghent during August 2016. To understand its information, we make visual associations between the data in this table and its column and/or row headers. Items Sold August 2016 | | Clothes | Accessories | | --- | --- | --- | | Trousers | Skirts | Dresses | Bracelets | Rings | | Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 | | Ghent | 46 | 18 | 50 | 61 | 15 | | Brussels | 51 | 27 | 38 | 69 | 28 | | The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 | | Utrecht | 80 | 12 | 43 | 36 | 19 | But what if you cannot make those visual associations? How then can you read a table like the above?

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility


id: html-table-accessibility-learn-web-development-mdn-20260505-2
category: reference
title: HTML table accessibility - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:59.430274+00:00
instance: kb-cron
parent: html-table-accessibility-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility-2.md

summary:
**Note:** `<tbody>` is always implicitly included in every table if you don't specify it in your code. To check this, open up one of your previous examples that doesn't include `<tbody>` and look at the HTML code in your [browser developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling. ### [Adding structure to a spending record table](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#adding_structure_to_a_spending_record_table) Let's get you to put these new elements into action. 1. First of all, create a new HTML file called `spending-record.html` and put the following HTML inside the `<body>`: 2. Next, create a CSS file called `minimal-table.css` in the same directory as your HTML file and fill it with the following content: 3. Add a `<link>` element into your HTML `<head>` to apply the CSS to the HTML (see [Applying CSS and JavaScript to HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#applying_css_and_javascript_to_html) for help with this). 4. Try putting the obvious headers row inside a `<thead>` element, the "SUM" row inside a `<tfoot>` element, and the rest of the content inside a `<tbody>` element. 5. Next, add

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility


id: html-table-accessibility-learn-web-development-mdn-20260505-3
category: reference
title: HTML table accessibility - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:59.430274+00:00
instance: kb-cron
parent: html-table-accessibility-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility-3.md

summary:
In this example: * The `<th>` for `"Belgium"` uses `rowspan="2"` to span both `"Antwerp"` and `"Ghent"`. * The city header cells (`"Antwerp"` and `"Ghent"`) use the `headers` attribute to reference `"belgium"` to show they belong to the Belgium group. * Each `<td>` includes a `headers` attribute for country (`belgium`), city (`antwerp` or `ghent`), group (`clothes`), and the specific clothing item (`trousers`, `skirts`, or `dresses`). **Note:** This method creates very precise associations between headers and data cells but it uses **a lot** more markup and does not leave any room for errors. The `scope` approach is usually sufficient for most tables. ## [Playing with scope and headers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility#playing_with_scope_and_headers) For this final exercise, we will get you to try using scope and headers on the sample table we introduced above. 1. First make local copies of [items-sold.html](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/items-sold.html) and [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/advanced/minimal-table.css), in a new directory. 2. Try adding in the appropriate `scope` attributes to make this table more accessible. 3. Making another copy of the starter files in another local directory 4. This time make the table more accessible by creating precise and explicit associations using `id` and `headers` attributes. Click here to show the solution The first finished HTML example should look something like


id: html-table-accessibility-learn-web-development-mdn-20260505-4
category: reference
title: HTML table accessibility - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:59.430274+00:00
instance: kb-cron
parent: html-table-accessibility-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 17, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/table_accessibility \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTable_accessibility&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftable_accessibility%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTable_accessibility%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftable_accessibility%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F754b68246f4e69e404309fee4a1699e047e43994%0A*+Document+last+modified%3A+2025-11-17T16%3A52%3A01.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: html-table-accessibility-learn-web-development-mdn-20260505-5
category: reference
title: HTML table accessibility - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:55:59.430274+00:00
instance: kb-cron
parent: html-table-accessibility-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility-5.md


id: test-your-skills-structuring-content-with-html-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Structuring content with HTML - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:01.928080+00:00
instance: kb-cron
parent: test-your-skills-structuring-content-with-html-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills


id: test-your-skills-structuring-content-with-html-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Structuring content with HTML - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:01.928080+00:00
instance: kb-cron
parent: test-your-skills-structuring-content-with-html-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Aug 21, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F27f34d8b137f9bb2b467f9f9a1c4e1d04e12ed89%0A*+Document+last+modified%3A+2025-08-21T12%3A31%3A52.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills


id: test-your-skills-structuring-content-with-html-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Structuring content with HTML - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:01.928080+00:00
instance: kb-cron
parent: test-your-skills-structuring-content-with-html-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills


id: test-your-skills-advanced-html-text-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Advanced HTML text - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:04.339972+00:00
instance: kb-cron
parent: test-your-skills-advanced-html-text-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text


id: test-your-skills-advanced-html-text-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Advanced HTML text - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:04.339972+00:00
instance: kb-cron
parent: test-your-skills-advanced-html-text-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 3, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FAdvanced_HTML_text&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fadvanced_html_text%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FAdvanced_HTML_text%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fadvanced_html_text%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1cf3cb0fb22bf89c780fefe74c3db7f1b9e8ca09%0A*+Document+last+modified%3A+2026-02-03T08%3A27%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. _[Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text)_ 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text


id: test-your-skills-advanced-html-text-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Advanced HTML text - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:04.339972+00:00
instance: kb-cron
parent: test-your-skills-advanced-html-text-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text


id: test-your-skills-audio-and-video-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Audio and video - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:06.672359+00:00
instance: kb-cron
parent: test-your-skills-audio-and-video-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video


id: test-your-skills-audio-and-video-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Audio and video - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:06.672359+00:00
instance: kb-cron
parent: test-your-skills-audio-and-video-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 3, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FAudio_and_video&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Faudio_and_video%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FAudio_and_video%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Faudio_and_video%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1cf3cb0fb22bf89c780fefe74c3db7f1b9e8ca09%0A*+Document+last+modified%3A+2026-02-03T08%3A27%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video


id: test-your-skills-audio-and-video-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Audio and video - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:06.672359+00:00
instance: kb-cron
parent: test-your-skills-audio-and-video-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Audio_and_video


id: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Forms and buttons - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:09.482390+00:00
instance: kb-cron
parent: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons


id: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Forms and buttons - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:09.482390+00:00
instance: kb-cron
parent: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons-1.md

summary:
The starting point of the task looks like this: Here's the underlying code for this starting point: The updated form should look like this: Click here to show the solution Your finished HTML should look something like this: ## [Forms and buttons 5](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons#forms_and_buttons_5) In this task we want you to structure the provided form features. To complete the task: 1. Separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "Personal details" for the first two, and "Comment information" for the second two). 2. Mark up each text label with an appropriate element so that it is semantically associated with its respective form field. 3. Add a suitable set of structural elements around the label/field pairs to separate them out. The starting point of the task looks like this: Here's the underlying code for this starting point: The updated form should look like this: Click here to show the solution Your finished HTML should look something like this: ## [Forms and buttons 6](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons#forms_and_buttons_6) In this task, we are providing you with a simple support query form, and we want you to add some validation features to it. This task requires

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons


id: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Forms and buttons - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:09.482390+00:00
instance: kb-cron
parent: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons-2.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 8, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FForms_and_buttons&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fforms_and_buttons%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FForms_and_buttons%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fforms_and_buttons%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F3cd2de993df83bd5e738abe0a28bd5702af78c11%0A*+Document+last+modified%3A+2026-04-08T06%3A37%3A12.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons


id: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-3
category: reference
title: Test your skills: Forms and buttons - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:09.482390+00:00
instance: kb-cron
parent: test-your-skills-forms-and-buttons-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons-3.md


id: test-your-skills-html-text-basics-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: HTML text basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:12.383590+00:00
instance: kb-cron
parent: test-your-skills-html-text-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics


id: test-your-skills-html-text-basics-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: HTML text basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:12.383590+00:00
instance: kb-cron
parent: test-your-skills-html-text-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 3, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FHTML_text_basics&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fhtml_text_basics%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FHTML_text_basics%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fhtml_text_basics%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1cf3cb0fb22bf89c780fefe74c3db7f1b9e8ca09%0A*+Document+last+modified%3A+2026-02-03T08%3A27%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. _[Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics)_ 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics


id: test-your-skills-html-text-basics-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: HTML text basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:12.383590+00:00
instance: kb-cron
parent: test-your-skills-html-text-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics


id: test-your-skills-html-images-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: HTML images - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:14.958309+00:00
instance: kb-cron
parent: test-your-skills-html-images-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images


id: test-your-skills-html-images-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: HTML images - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:14.958309+00:00
instance: kb-cron
parent: test-your-skills-html-images-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images-1.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 3, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills/images \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FImages&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fimages%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FImages%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Fimages%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1cf3cb0fb22bf89c780fefe74c3db7f1b9e8ca09%0A*+Document+last+modified%3A+2026-02-03T08%3A27%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images


id: test-your-skills-html-images-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: HTML images - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:14.958309+00:00
instance: kb-cron
parent: test-your-skills-html-images-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images


id: test-your-skills-links-learn-web-development-mdn-20260505-0
category: reference
title: Test your skills: Links - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:17.503779+00:00
instance: kb-cron
parent: test-your-skills-links-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links


id: test-your-skills-links-learn-web-development-mdn-20260505-1
category: reference
title: Test your skills: Links - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:17.503779+00:00
instance: kb-cron
parent: test-your-skills-links-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links-1.md

summary:
The starting point of the task looks like this: Here's the underlying code for this starting point: We've not provided finished content for this task, as it would give away the solution. Click here to show the solution Your finished HTML should look like this: * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) * [ Overview: Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Feb 3, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/test_your_skills/links \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FLinks&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Flinks%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FTest_your_skills%2FLinks%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Ftest_your_skills%2Flinks%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1cf3cb0fb22bf89c780fefe74c3db7f1b9e8ca09%0A*+Document+last+modified%3A+2026-02-03T08%3A27%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links


id: test-your-skills-links-learn-web-development-mdn-20260505-2
category: reference
title: Test your skills: Links - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:17.503779+00:00
instance: kb-cron
parent: test-your-skills-links-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links


id: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
category: reference
title: What's in the head? Web page metadata - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:19.977439+00:00
instance: kb-cron
parent: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata


id: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-1
category: reference
title: What's in the head? Web page metadata - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:19.977439+00:00
instance: kb-cron
parent: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata-1.md

summary:
### [Inspecting an example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#inspecting_an_example) 1. In this exercise, we'd like you to start off by going to our GitHub repo and downloading a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html). To do this, either 1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place. 2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's _Save Page As…_ menu and choose a sensible place to save the file. 2. Now open the file in your browser. You should see something like this: ![A web page with 'title' text in the browser's page tab and 'h1' text as a page heading in the document body.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata/title-example.png) It should now be completely obvious where the `<h1>` content appears and where the `<title>` content appears! 3. You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it. The `<title>` element contents are also used in other ways. For example, if you try bookmarking the page

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata


id: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-2
category: reference
title: What's in the head? Web page metadata - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:19.977439+00:00
instance: kb-cron
parent: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata-2.md

summary:
**Note:** In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in [Google's webmaster tools](https://search.google.com/search-console/about?hl=en) — a way to make your site's search results better in the Google search engine. **Note:** Many `<meta>` features just aren't used anymore. For example, the keyword `<meta>` element (`<meta name="keywords" content="fill, in, your, keywords, here">`) — which is supposed to provide keywords for search engines to determine the relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results. ### [Other types of metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#other_types_of_metadata) As you travel around the web, you'll find other types of metadata, too. Many of the features you'll see on websites are proprietary creations designed to provide certain sites (such as social networking sites) with specific information they can use. For example, [Open Graph Data](https://ogp.me/) is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this: One effect of this is that when you link to MDN Web Docs on Facebook, the link appears along with

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata


id: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-3
category: reference
title: What's in the head? Web page metadata - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:19.977439+00:00
instance: kb-cron
parent: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata-3.md

summary:
### [Your turn: Applying CSS and JavaScript to a page](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#your_turn_applying_css_and_javascript_to_a_page) 1. To start this exercise, grab a copy of our [meta-example.html](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/script.js) and [style.css](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/style.css) files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions. 2. Open the HTML file in both your browser, and your text editor. 3. By following the information given above, add [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link) and [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) elements to your HTML, so that your CSS and JavaScript are applied to your HTML. If done correctly, when you save your HTML and refresh your browser you should be able to see that things have changed: ![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata/js-and-css.png) * The JavaScript has added an empty list to the page. Now when you click anywhere outside the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing


id: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-4
category: reference
title: What's in the head? Web page metadata - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:19.977439+00:00
instance: kb-cron
parent: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 23, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/structuring_content/webpage_metadata/index.md?plain=1 "Folder: en-us/learn_web_development/core/structuring_content/webpage_metadata \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FWebpage_metadata&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fwebpage_metadata%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStructuring_content%2FWebpage_metadata%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstructuring_content%2Fwebpage_metadata%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F0d59135676db5a372b4dd692f0686e6bdfc13b51%0A*+Document+last+modified%3A+2025-11-23T10%3A37%3A13.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. _[Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata)_ 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-5
category: reference
title: What's in the head? Web page metadata - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:19.977439+00:00
instance: kb-cron
parent: what-s-in-the-head-web-page-metadata-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata-5.md


id: css-styling-basics-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics-0.md
category: reference
title: CSS styling basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
date_saved: 2026-05-05T05:56:22.472266+00:00
instance: kb-cron
parent: css-styling-basics-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: css-styling-basics-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics-1.md
category: reference
title: CSS styling basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
date_saved: 2026-05-05T05:56:22.472266+00:00
instance: kb-cron
parent: css-styling-basics-learn-web-development-mdn-20260505-0
summary:
[Fixing blog page styles](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles) Challenge In this challenge we give you a basic blog page example that is partially styled. We need you to fix some problems with the existing CSS and add some styles to finish it off. Along the way we will test your knowledge of selectors, the box model, and conflicts/cascade. [Values and units](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) CSS rules contain [declarations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Syntax/Introduction#css_declarations), which in turn are composed of properties and values. Each property used in CSS has a **value type** that describes what kind of values it is allowed to have. In this lesson, we will take a look at some of the most frequently used value types, what they are, and how they work. [Sizing items in CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing) Understanding how big the different features in your design will be is important. In this lesson we will summarize the various ways elements get a size via CSS and define a few terms about sizing that will help you in the future. [Backgrounds and borders](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders) In this lesson, we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to


id: css-styling-basics-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics-2.md
category: reference
title: CSS styling basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
date_saved: 2026-05-05T05:56:22.472266+00:00
instance: kb-cron
parent: css-styling-basics-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 13, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fcdf7db9ffe08cb952243d7e20b9beee4e9c9451b%0A*+Document+last+modified%3A+2025-11-13T16%3A18%3A51.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: advanced-styling-effects-learn-web-development-mdn-20260505-0
category: reference
title: Advanced styling effects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:24.896768+00:00
instance: kb-cron
parent: advanced-styling-effects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects


id: advanced-styling-effects-learn-web-development-mdn-20260505-1
category: reference
title: Advanced styling effects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:24.896768+00:00
instance: kb-cron
parent: advanced-styling-effects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects-1.md

summary:
You can use any length and color units that would make sense to do so to define these values. ### [Multiple box shadows](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#multiple_box_shadows) You can also specify multiple box shadows in a single `box-shadow` declaration, by separating them with commas: Now we get this result: We've done something fun here by creating a raised box with multiple colored layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources. ### [Other box shadow features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#other_box_shadow_features) Unlike [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-shadow), [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-shadow) has an `inset` keyword available — putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow. Let's have a look and see what we mean. First, we'll go with some different HTML for this example: This gives us the following result: Here we've set up some button styling along with focus/hover/active states. The button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect. When the button is pressed in, the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects


id: advanced-styling-effects-learn-web-development-mdn-20260505-2
category: reference
title: Advanced styling effects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:24.896768+00:00
instance: kb-cron
parent: advanced-styling-effects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects-2.md

summary:
You can find a lot more examples than are available here in our [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) example page (see [source code](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/advanced_box_effects/blend-modes.html)), and on the [`<blend-mode>`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/blend-mode) reference page. **Note:** Blend modes are also very new, and slightly less well supported than filters. There is no support as yet in Edge, and Safari only supports some of the blend mode options. ### [background-blend-mode](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#background-blend-mode) Again, let's look at some examples so we can understand this better. First, [`background-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-blend-mode) — here we'll show a couple of simple [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div)s, so you can compare the original with the blended version: Now some CSS — we are adding to the `<div>` one background image and a green background color: The result we get is this — you can see the original on the left, and the multiply blend mode on the right: ### [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects#mix-blend-mode) Now let's look at [`mix-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mix-blend-mode). Here we'll present the same two `<div>`s, but each one is now sat on top of a simple `<div>` with a purple background, to show how the elements will blend together: Here's the CSS we'll style this with: This gives us the following results: You can see here that the multiply mix blend has blended together not only the two

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects


id: advanced-styling-effects-learn-web-development-mdn-20260505-3
category: reference
title: Advanced styling effects - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:24.896768+00:00
instance: kb-cron
parent: advanced-styling-effects-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects-3.md

summary:
[Challenge: mobile-first](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Mobile-first_challenge) 15. [Test: Layout tests index](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Test_your_skills) 16. Additional tutorials 1. [Multiple-column layout](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout) 2. [Practical positioning examples](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples) 3. [Legacy layout methods](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods) 4. [Supporting older browsers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Supporting_Older_Browsers) 13. [Dynamic scripting with JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) 1. [What is JavaScript?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript) 2. [JavaScript walkthrough](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/A_first_splash) 3. [Troubleshooting](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong) 4. [Variables](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Variables) 5. [Test: Variables](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Variables) 6. [Numbers and operators](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Math) 7. [Test: Math](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Math) 8. [Strings](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Strings) 9. [String methods](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Useful_string_methods) 10. [Test: Strings](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Strings) 11. [Arrays](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Arrays) 12. [Test: Arrays](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Arrays) 13. [Challenge: Story generator](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Silly_story_generator) 14. [Conditionals](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Conditionals) 15. [Test: Conditionals](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Conditionals) 16. [Loops](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Loops) 17. [Test: Loops](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Loops) 18. [Functions](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions) 19. [Build your own function](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Build_your_own_function) 20. [Function return values](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Return_values) 21. [Test: Functions](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions) 22. [Events](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events) 23. [Event bubbling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) 24. [Test: Events](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Events) 25. [Objects](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Object_basics) 26. [Test: Objects](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Object_basics) 27. [DOM scripting](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting) 28. [Challenge: Image gallery](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Image_gallery) 29. [Network requests](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests) 30. [JSON](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/JSON) 31. [Test: JSON](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/JSON) 32. [Challenge: House data UI](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/House_data_UI) 33. [Debugging and error handling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript) 34. [Test: JavaScript tests index](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills) 14. [JavaScript frameworks and libraries](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries) 1. [Introduction](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction) 2. [Framework features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features) 3. [React getting started](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started) 4. [React ToDo app](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning) 5. [React components](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_components) 6. [React events and state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state) 7. [React editing, filtering, conditional UI](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering) 8. [React accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility) 9. [React resources](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources) 15. [Accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility) 1. [What is accessibility?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility) 2. [Accessibility tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/Tooling) 3. [Accessible HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML) 4. [Test: HTML a11y](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/Test_your_skills/HTML) 5. [Accessible CSS and JS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript) 6. [Test: CSS/JS a11y](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/Test_your_skills/CSS_and_JavaScript) 7. [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics)


id: attribute-selectors-learn-web-development-mdn-20260505-0
category: reference
title: Attribute selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:27.645666+00:00
instance: kb-cron
parent: attribute-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors


id: attribute-selectors-learn-web-development-mdn-20260505-1
category: reference
title: Attribute selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:27.645666+00:00
instance: kb-cron
parent: attribute-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors-1.md

summary:
Try editing the above CSS to add a rule that selects only list items with a `class` attribute value that has `b` or `c` at the end of it, and gives them a `2px`-wide, `solid`, `black` `border`. You may have to use a [selector list](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#selector_lists) to solve this one. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors#summary) Now that we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors. * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) * [ Overview: CSS styling basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jun 16, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/attribute_selectors/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/attribute_selectors \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FAttribute_selectors&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fattribute_selectors%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FAttribute_selectors%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fattribute_selectors%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fc9f602a26092661130a031b7148d696a3ac9802e%0A*+Document+last+modified%3A+2025-06-16T11%3A12%3A58.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors


id: attribute-selectors-learn-web-development-mdn-20260505-2
category: reference
title: Attribute selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:27.645666+00:00
instance: kb-cron
parent: attribute-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors


id: backgrounds-and-borders-learn-web-development-mdn-20260505-0
category: reference
title: Backgrounds and borders - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:30.173588+00:00
instance: kb-cron
parent: backgrounds-and-borders-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders


id: backgrounds-and-borders-learn-web-development-mdn-20260505-1
category: reference
title: Backgrounds and borders - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:30.173588+00:00
instance: kb-cron
parent: backgrounds-and-borders-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders-1.md

summary:
Try these values out in the example below. We have set the value to `no-repeat` so you will only see one star. Try out the different values to see what their effects are. ### [Sizing the background image](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#sizing_the_background_image) The _balloons.jpg_ image used in the initial background image example is a large image that was cropped due to being larger than the element it is a background of. In this case, we can use the [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-size) property to size the image to fit inside the background. `background-size` can take two [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length) or [`<percentage>`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/percentage) values to specify the image's size on the horizontal and vertical directions, or the following keywords: * `cover` — the browser will make the image just large enough so that it completely covers the box area while still retaining its [aspect ratio](https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio). In this case, part of the image is likely to end up outside the box. * `contain` — the browser will make the image the right size to fit inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders


id: backgrounds-and-borders-learn-web-development-mdn-20260505-2
category: reference
title: Backgrounds and borders - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:30.173588+00:00
instance: kb-cron
parent: backgrounds-and-borders-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders-2.md

summary:
## [Background attachment](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#background_attachment) Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the [`background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-attachment) property, which can take the following values: * `scroll`: causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls. * `fixed`: causes an element's background to be fixed to the viewport so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen. * `local`: fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it. The [`background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-attachment) property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (also [see the source code](https://github.com/mdn/learning-area/tree/main/css/styling-boxes/backgrounds) here). ## [Using the background shorthand property](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders#using_the_background_shorthand_property) You will often see backgrounds specified using the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background) shorthand property, which lets you set all of the different properties at

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders


id: backgrounds-and-borders-learn-web-development-mdn-20260505-3
category: reference
title: Backgrounds and borders - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:30.173588+00:00
instance: kb-cron
parent: backgrounds-and-borders-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders-3.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Dec 19, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/backgrounds_and_borders \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBackgrounds_and_borders&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbackgrounds_and_borders%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBackgrounds_and_borders%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbackgrounds_and_borders%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2b4a2ad5d9ba084a9eaa2f9204102655e7b575c4%0A*+Document+last+modified%3A+2025-12-19T19%3A59%3A21.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: backgrounds-and-borders-learn-web-development-mdn-20260505-4
category: reference
title: Backgrounds and borders - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:30.173588+00:00
instance: kb-cron
parent: backgrounds-and-borders-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders-4.md


id: basic-css-selectors-learn-web-development-mdn-20260505-0
category: reference
title: Basic CSS selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
date_saved: 2026-05-05T05:56:33.027927+00:00
instance: kb-cron
parent: basic-css-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: basic-css-selectors-learn-web-development-mdn-20260505-1
category: reference
title: Basic CSS selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
date_saved: 2026-05-05T05:56:33.027927+00:00
instance: kb-cron
parent: basic-css-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors-1.md

summary:
### [Targeting classes on particular elements](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#targeting_classes_on_particular_elements) You can create a selector that will target specific elements with the class applied. In this next example, we will highlight a `<span>` with a class of `highlight` differently from an `<h1>` heading with a class of `highlight`. We do this by using the type selector for the element we want to target, with the class appended using a dot, with no white space in between. This approach reduces the scope of a rule. The rule will only apply to that particular element and class combination. You would need to add another selector if you wanted the rule to apply to other elements. ### [Target an element if it has more than one class applied](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors#target_an_element_if_it_has_more_than_one_class_applied) You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site. In the example below, we have a `<div>` that contains a note. The grey border is applied when the box has a class of `notebox`. If it also has a class of `warning` or


id: basic-css-selectors-learn-web-development-mdn-20260505-2
category: reference
title: Basic CSS selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
date_saved: 2026-05-05T05:56:33.027927+00:00
instance: kb-cron
parent: basic-css-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors-2.md

summary:
[CSS classes](https://scrimba.com/the-frontend-developer-career-path-c0j/~01d?via=mdn), Scrimba [_MDN learning partner_](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) An interactive lesson that provides some guidance on CSS classes. * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page) * [ Overview: CSS styling basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Dec 3, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/basic_selectors/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/basic_selectors \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBasic_selectors&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbasic_selectors%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBasic_selectors%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbasic_selectors%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fbb4be34c00686ddc46a1cef3123cdf825e9495ec%0A*+Document+last+modified%3A+2025-12-03T16%3A55%3A43.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML


id: basic-css-selectors-learn-web-development-mdn-20260505-3
category: reference
title: Basic CSS selectors - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors
date_saved: 2026-05-05T05:56:33.027927+00:00
instance: kb-cron
parent: basic-css-selectors-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors-3.md


id: the-box-model-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model-0.md
category: reference
title: The box model - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
date_saved: 2026-05-05T05:56:35.877487+00:00
instance: kb-cron
parent: the-box-model-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: the-box-model-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model-1.md
category: reference
title: The box model - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
date_saved: 2026-05-05T05:56:35.877487+00:00
instance: kb-cron
parent: the-box-model-learn-web-development-mdn-20260505-0
summary:
Some HTML elements, such as `<a>`, `<span>`, `<em>` and `<strong>` use `inline` as their outer display type by default. Block and inline layout is the default way things behave on the web. By default and without any other instruction, the elements inside a box are also laid out in **[normal flow](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction#normal_layout_flow)** and behave as block or inline boxes. ## [Inner and outer display types](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#inner_and_outer_display_types) `block` and `inline` display values are said to be **outer display** types — they affect how the box is laid out in relation to other boxes around it. Boxes also have an **inner display** type, which dictates how elements inside that box are laid out. You can change the inner display type by setting an inner display value, for example `display: flex;`. The element will still use the outer display type `block` but this changes the inner display type to `flex`. Any direct children of this box will become flex items and behave according to the [Flexbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) specification. When you move on to learn about CSS Layout in more detail, you will encounter [`flex`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox), and various other inner values that your boxes can have, for example [`grid`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids). Don't worry too much about the inner and outer


id: the-box-model-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model-2.md
category: reference
title: The box model - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
date_saved: 2026-05-05T05:56:35.877487+00:00
instance: kb-cron
parent: the-box-model-learn-web-development-mdn-20260505-0
summary:
The below diagram shows these layers: ![Diagram of the box model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model/box-model.png) ### [The standard CSS box model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#the_standard_css_box_model) In the standard box model, if you set `width` and `height` property values on a box, these values define the `width` and `height` of the _content box_. Any padding and borders are then added to those dimensions to get the total size taken up by the box (see the image below). If we assume that a box has the following CSS: The _actual_ space taken up by the box will be `410px` wide (350 + 25 + 25 + 5 + 5) and `210px` high (150 + 25 + 25 + 5 + 5). ![Showing the size of the box when the standard box model is being used.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model/standard-box-model.png) **Note:** The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin. ### [The alternative CSS box model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#the_alternative_css_box_model) In the alternative box model, any width is the width of the visible box on the page. The


id: the-box-model-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model-3.md
category: reference
title: The box model - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
date_saved: 2026-05-05T05:56:35.877487+00:00
instance: kb-cron
parent: the-box-model-learn-web-development-mdn-20260505-0
summary:
In the example below, we have two paragraphs. The top paragraph has a `margin-bottom` of 50 pixels, the other has a `margin-top` of 30 pixels. The margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins. You can test this by setting the `margin-top` of paragraph two to `0`. The visible margin between the two paragraphs will not change — it retains the 50 pixels set in the `margin-bottom` of paragraph one. If you set it to `-10px`, you'll see that the overall margin becomes `40px` — it subtracts from the `50px`. A number of rules dictate when margins do and do not collapse. For further information see the detailed page on [mastering margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Margin_collapsing). The main thing to remember is that margin collapsing is a thing that happens if you are creating space with margins and don't get the space you expect. **Note:** [Learn margins via flags](https://scrimba.com/frontend-path-c0j/~01e?via=mdn) [_MDN learning partner_](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba is an interactive lesson providing some useful practice with margins. ### [Borders](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#borders) The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size


id: the-box-model-learn-web-development-mdn-20260505-4
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model-4.md
category: reference
title: The box model - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
date_saved: 2026-05-05T05:56:35.877487+00:00
instance: kb-cron
parent: the-box-model-learn-web-development-mdn-20260505-0
summary:
It does not, however, break onto a new line, and will only become larger than its content if you explicitly add `width` and `height` properties. ### [Playing with inline-block](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model#playing_with_inline-block) In this next example, we have added `display: inline-block` to our `<span>` element. Try changing this to `display: block` or removing the line completely to see the difference in display models: Where this can be useful is when you want to give a link a larger hit area by adding `padding`. `<a>` is an inline element like `<span>`; you can use `display: inline-block` to allow padding to be set on it, making it easier for a user to click the link. You see this fairly frequently in navigation bars. The navigation below is displayed in a row using flexbox and we have added padding to the `<a>` element as we want to be able to change the `background-color` when the `<a>` is hovered. The padding appears to overlap the border on the `<ul>` element. This is because the `<a>` is an inline element. Add `display: inline-block;` to the rule with the `.links-list a` selector, and you will see how it fixes this issue by causing the padding to be respected by


id: the-box-model-learn-web-development-mdn-20260505-5
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model-5.md
category: reference
title: The box model - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
date_saved: 2026-05-05T05:56:35.877487+00:00
instance: kb-cron
parent: the-box-model-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 7, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/box_model/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/box_model \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBox_model&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbox_model%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBox_model%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbox_model%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F85fccefc8066bd49af4ddafc12c77f35265c7e2d%0A*+Document+last+modified%3A+2025-11-07T15%3A58%3A06.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: cascade-layers-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-0.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: cascade-layers-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-1.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
## [Review of the cascade concept](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#review_of_the_cascade_concept) The 'C' in CSS stands for "Cascading". It is the method by which styles cascade together. The user agent runs through several clearly defined steps to determine the values assigned to every property for every element. We will briefly list these steps here and then dig deeper into step 4, **Cascade layers** , which is what you came here to learn: 1. **Relevance:** Find all the declaration blocks with a selector match for each element. 2. **Importance:** Sort rules based on whether they are normal or important. Important styles are those that have the [`!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/important) flag set. 3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin. 4. **Cascade layers:** Within each of the six origin importance buckets, sort by cascade layer. The layer order for normal declarations is from the first layer created to the last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence. 5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity). 6. **Scoping proximity** : When two selectors in the origin layer with precedence have the


id: cascade-layers-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-2.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
The "user-agent" is the browser. The "user" is the site visitor. The "author" is you, the developer. Styles declared directly on an element with the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style) element are author styles. Not including animating and transitioning styles, user-agent normal styles have the lowest precedence; user-agent important styles have the highest. ### [Origin and specificity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#origin_and_specificity) For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins. In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration) and [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are


id: cascade-layers-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-3.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
All three methods create a layer if a layer with that name has not already been initialized. If no layer name is provided in the `@layer` at-rule or `@import` with `layer()`, a new anonymous (unnamed) layer is created. **Note:** The order of precedence of layers is the order in which they are created. Styles not in a layer, or "unlayered styles", cascade together into a final implicit layer. Let's cover the three ways of creating a layer in a little more detail before discussing nested layers. ### [The @layer statement at-rule for named layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_statement_at-rule_for_named_layers) The order of layers is set by the order in which the layers appear in your CSS. Declaring layers using `@layer` followed by the names of one or more layers without assigning any styles is one way to define the [layer order](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers). The [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer) CSS at-rule is used to declare a cascade layer and to define the order of precedence when there are multiple cascade layers. The following at-rule declares three layers, in the order listed: You will often want to have your first line of CSS be this `@layer` declaration (with layer names that make sense for your site, of course) to have full control


id: cascade-layers-learn-web-development-mdn-20260505-4
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-4.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
In the above CSS, we created five layers: `layout`, `<anonymous(01)>`, `theme`, `utilities`, and `<anonymous(02)>` – in that order - with a sixth, implicit layer of unlayered styles contained in the `body` style block. The layer order is the order in which the layers are created, with the implicit layer of unlayered styles always being last. There is no way to change the layer order once created. We assigned some styles to the layer named `layout`. If a named layer doesn't already exist, then specifying the name in an `@layer` at-rule, with or without assigning styles to the layer, creates the layer; this adds the layer to the end of the series of existing layer names. If the named layer already exists, all styles within the named block get appended to styles in the previously existing layer – specifying styles in a block by reusing an existing layer name does not create a new layer. Anonymous layers are created by assigning styles to a layer without naming the layer. Styles can be added to an unnamed layer only at the time of its creation. **Note:** Subsequent use of `@layer` with no layer name creates additional unnamed layers; it does not append


id: cascade-layers-learn-web-development-mdn-20260505-5
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-5.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
Let's look at another example, where we [import `layers1.css` into a named layer](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_block_at-rule_for_named_and_anonymous_layers) using the following statement: This will create a single layer named `example` containing some declarations and five nested layers - `example.layout`, `example.<anonymous(01)>`, `example.theme`, `example.utilities`, and `example.<anonymous(02)>`. To add styles to a named nested layer, use the dot notation: ## [Determining the precedence based on the order of layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers) The order of layers determines their order of precedence. Therefore, the order of layers is very important. In the same way as the cascade sorts by origin and importance, the cascade sorts each CSS declaration by origin layer and importance. ### [Precedence order of regular cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#precedence_order_of_regular_cascade_layers) The above code creates two named layers (C.css styles get appended to the implicit layer of unlayered styles). Let us assume that the three files (`A.css`, `B.css`, and `C.css`) do not contain any additional layers within them. The following list shows where styles declared inside and outside of these files will be sorted from least (1) precedence to highest (10). 1. `firstLayer` normal styles (`A.css`) 2. `secondLayer` normal styles (`B.css`) 3. unlayered normal styles (`C.css`) 4. inline normal styles 5. animating styles 6. unlayered important styles (`C.css`) 7. `secondLayer` important styles (`B.css`)


id: cascade-layers-learn-web-development-mdn-20260505-6
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-6.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
Normal styles declared inside layers receive the lowest priority and are sorted by the order in which the layers were created. Normal styles in the first created layer have the lowest precedence, and normal styles in the layer created last have the highest precedence among the layers. In other words, normal styles declared within `firstLayer` will be overridden by any subsequent stylings on the list if any conflicts exist. Next up are any styles declared outside of layers. The styles in `C.css` were not imported into a layer and will override any conflicting styles from `firstLayer` and `secondLayer`. Styles not declared in a layer always have higher precedence than styles that _are_ declared inside a layer (with the exception of important styles). Inline styles are declared using the [`style` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/style). Normal styles declared in this way will take precedence over normal styles found in the unlayered and layered style sheets (`firstLayer – A.css`, `secondLayer – B.css`, and `C.css`). Animating styles have higher precedence than all normal styles, including inline normal styles. Important styles, that is, property values that include the `!important` flag, take precedence over any styles previously mentioned in our list. They are sorted in reverse order of normal


id: cascade-layers-learn-web-development-mdn-20260505-7
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-7.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
### [Precedence order of nested cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#precedence_order_of_nested_cascade_layers) The cascade precedence order for nested layers is similar to that of regular layers, but contained within the layer. The precedence order is based on the order of nested layer creation. Non-nested styles in a layer have precedence over nested normal styles, with the precedence order reversed for important styles. Specificity weight between nested layers does not matter, though it does matter for conflicting styles within a nested layer. The following creates and adds styles to the `components` layer, `components.narrow` nested layer, and `components.wide` nested layer: Here's a summary of the properties that are used and why each declaration is applied: * `background-color`: Because unlayered normal styles have precedence over layered normal styles, `wheat` color wins. * `border`: Because within a layer non-nested styles have precedence over normal nested styles, `red` color wins. * `color`: With important styles, layered styles take precedence over unlayered styles, with important styles in earlier declared layers having precedence over later declared layers. In this example, the order of nested layer creation is `components.narrow`, then `components.wide`, so important styles in `components.narrow` have precedence over important styles in `components.wide`, meaning `purple` color wins. * `border-radius`: The property has been


id: cascade-layers-learn-web-development-mdn-20260505-8
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers-8.md
category: reference
title: Cascade layers - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
date_saved: 2026-05-05T05:56:38.663261+00:00
instance: kb-cron
parent: cascade-layers-learn-web-development-mdn-20260505-0
summary:
## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#summary) If you understood most of this article, then well done — you're now familiar with the fundamental mechanics of CSS cascade layers. ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jan 30, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/cascade_layers \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FCascade_layers&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fcascade_layers%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FCascade_layers%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fcascade_layers%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fd805adc1604ad27fbee00598dc81bcdfe5635bd3%0A*+Document+last+modified%3A+2026-01-30T06%3A02%3A11.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features)


id: combinators-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators-0.md
category: reference
title: Combinators - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators
date_saved: 2026-05-05T05:56:41.596983+00:00
instance: kb-cron
parent: combinators-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: combinators-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators-1.md
category: reference
title: Combinators - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators
date_saved: 2026-05-05T05:56:41.596983+00:00
instance: kb-cron
parent: combinators-learn-web-development-mdn-20260505-0
summary:
## [Subsequent-sibling combinator](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators#subsequent-sibling_combinator) If you want to select siblings of an element even if they are not directly adjacent, then you can use the **subsequent-sibling combinator** (`~`). To select all `<img>` elements that come _anywhere_ after `<p>` elements, we'd do this: In the example below, we are selecting all `<p>` elements that come after the `<h1>`, and even though there is a `<div>` in the document as well, the `<p>` that comes after it is selected. ## [Combining combinators with selectors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators#combining_combinators_with_selectors) You can combine any of the selectors that we discovered in previous lessons with combinators in order to select part of your document. For example, to select list items with a `class` of `a` which are direct children of a `<ul>`, try the following: Take care, however, when creating big lists of selectors that select very specific parts of your document. It will be hard to reuse the CSS rules since you have made the selector very specific to the location of that element in the markup. It is often better to create a simple class and apply that to the element in question. That said, your knowledge of combinators will be very useful if you need to style


id: combinators-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators-2.md
category: reference
title: Combinators - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators
date_saved: 2026-05-05T05:56:41.596983+00:00
instance: kb-cron
parent: combinators-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 29, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/combinators/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/combinators \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FCombinators&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fcombinators%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FCombinators%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fcombinators%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F57bc2729e3963907c0b54158ae1a31318a2ebbd1%0A*+Document+last+modified%3A+2025-10-29T15%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: debugging-css-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS-0.md
category: reference
title: Debugging CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS
date_saved: 2026-05-05T05:56:44.117204+00:00
instance: kb-cron
parent: debugging-css-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: debugging-css-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS-1.md
category: reference
title: Debugging CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS
date_saved: 2026-05-05T05:56:44.117204+00:00
instance: kb-cron
parent: debugging-css-learn-web-development-mdn-20260505-0
summary:
## [How to access browser DevTools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#how_to_access_browser_devtools) The article [What are browser developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) explains how to access the tools in various browsers and platforms. While you may choose to mostly develop in a particular browser, and therefore will become most familiar with the tools included in that browser, it is worth knowing how to access them in other browsers. This will help if you are seeing different rendering between multiple browsers. In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using [an example file](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above. ## [The DOM versus view source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#the_dom_versus_view_source) Something that can trip up newcomers to DevTools is the difference between what you see when you [view the source](https://firefox-source-docs.mozilla.org/devtools-user/view_source/index.html) of a webpage, or look at the HTML file you put on the server, and what you can see in the [HTML Pane](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#html-pane) of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences. In the rendered DOM the browser


id: debugging-css-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS-2.md
category: reference
title: Debugging CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS
date_saved: 2026-05-05T05:56:44.117204+00:00
instance: kb-cron
parent: debugging-css-learn-web-development-mdn-20260505-0
summary:
What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out. In our example file there are two words that have been wrapped in an `<em>` element. One is displaying as orange and the other hotpink. In the CSS we have applied: Above that in the stylesheet however is a rule with a `.special` selector: As you will recall from the lesson on [handling conflicts](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet. **Inspect the`<em>` with the class of `.special` and DevTools will show you that orange is the color that applies, and also that the `color` property applied to the `<em>` is crossed out. You can now see that the class selector is overriding the element selector.** ![Selecting an em and looking at DevTools to see what is over-riding the color.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS/inspecting5-specificity.png) ## [Debugging problems in CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#debugging_problems_in_css) DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't


id: debugging-css-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS-3.md
category: reference
title: Debugging CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS
date_saved: 2026-05-05T05:56:44.117204+00:00
instance: kb-cron
parent: debugging-css-learn-web-development-mdn-20260505-0
summary:
### [Are the property and value supported by the browser you are testing in?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#are_the_property_and_value_supported_by_the_browser_you_are_testing_in) Browsers ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of [`grid-template-columns`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns). ![Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS/no-support.png) You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. [See the compatibility table for the `grid-template-columns` property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns#browser_compatibility). ### [Is something else overriding your CSS?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS#is_something_else_overriding_your_css) This is where the information you have learned about specificity will come into much use. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what


id: debugging-css-learn-web-development-mdn-20260505-4
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS-4.md
category: reference
title: Debugging CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS
date_saved: 2026-05-05T05:56:44.117204+00:00
instance: kb-cron
parent: debugging-css-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/debugging_css/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/debugging_css \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FDebugging_CSS&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fdebugging_css%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FDebugging_CSS%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fdebugging_css%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2d78abb3e793352e24e976ce0e68c08d817bd7f3%0A*+Document+last+modified%3A+2025-10-30T16%3A59%3A53.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: challenge-fixing-blog-page-styles-learn-web-development-mdn-20260505-0
category: reference
title: Challenge: Fixing blog page styles - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:46.527598+00:00
instance: kb-cron
parent: challenge-fixing-blog-page-styles-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles


id: challenge-fixing-blog-page-styles-learn-web-development-mdn-20260505-1
category: reference
title: Challenge: Fixing blog page styles - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:46.527598+00:00
instance: kb-cron
parent: challenge-fixing-blog-page-styles-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles-1.md

summary:
## [Hints and tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles#hints_and_tips) * Use the [W3C CSS Validator](https://jigsaw.w3.org/css-validator/) to catch unintended mistakes in your CSS — mistakes you might have otherwise missed — so that you can fix them. * You don't need to alter the HTML in any way. ## [Example](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles#example) The finished project should look like this: Click here to show the solution The finished CSS looks like so: * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Cascade) * [ Overview: CSS styling basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 16, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/fixing_blog_styles/index.md?plain=1 "Folder: en-us/learn_web_development/core/styling_basics/fixing_blog_styles \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FFixing_blog_styles&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Ffixing_blog_styles%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FFixing_blog_styles%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fcore%2Fstyling_basics%2Ffixing_blog_styles%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F50a1895c9c499b1b9207f7af945a0fe45de58cca%0A*+Document+last+modified%3A+2025-10-16T22%3A10%3A02.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles


id: challenge-fixing-blog-page-styles-learn-web-development-mdn-20260505-2
category: reference
title: Challenge: Fixing blog page styles - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:56:46.527598+00:00
instance: kb-cron
parent: challenge-fixing-blog-page-styles-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Fixing_blog_styles


id: getting-started-with-css-learn-web-development-mdn-20260505-0
category: reference
title: Getting started with CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
date_saved: 2026-05-05T05:56:49.104833+00:00
instance: kb-cron
parent: getting-started-with-css-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: getting-started-with-css-learn-web-development-mdn-20260505-1
category: reference
title: Getting started with CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
date_saved: 2026-05-05T05:56:49.104833+00:00
instance: kb-cron
parent: getting-started-with-css-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started-1.md

summary:
## [Starting with some HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#starting_with_some_html) Our starting point is an HTML document. You can copy the code from below if you want to work on your own computer. Save the code below as `index.html` in a folder on your machine. This renders like so: **Note:** If you are reading this on a device or an environment where you can't easily create files, then don't worry — click the "Play" button in the live sample above to open it in the MDN Playground. There, you can edit the CSS & HTML code as instructed further down and see the combined results live. ## [Adding CSS to our document](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#adding_css_to_our_document) The very first thing we need to do is to tell the HTML document that we have some CSS rules we want it to use. There are three different ways to apply CSS to an HTML document that you'll commonly come across — external stylesheets, internal stylesheets, and inline styles. Let's look at these now. If you are working through this article using the MDN Playground, you won't be able to follow the steps detailed in this section in the same way as people writing the code on their local computers. This is


id: getting-started-with-css-learn-web-development-mdn-20260505-2
category: reference
title: Getting started with CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
date_saved: 2026-05-05T05:56:49.104833+00:00
instance: kb-cron
parent: getting-started-with-css-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started-2.md

summary:
You can now apply the class of `special` to other elements on your page that you want to have the same look as this list item. Add a class of `special` to the `<span>` inside the paragraph, then reload your page: It should also now be orange and bold. ### [Styling things based on their location in a document](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#styling_things_based_on_their_location_in_a_document) There are times when you will want something to look different based on where it is in the document. There are a number of selectors that can help you here, but for now we will look at just a couple. In our document, there are two `<em>` elements — one inside a paragraph and the other inside a list item. To select only an `<em>` that is nested inside an `<li>` element, you can use a selector called the **descendant combinator** , which takes the form of a space between two other selectors. Add the following rule to your stylesheet: This selector will select any `<em>` element that is a descendant of an `<li>`. So in your example document, you should find that the `<em>` in the third list item is now purple, but the one inside the paragraph is unchanged.


id: getting-started-with-css-learn-web-development-mdn-20260505-3
category: reference
title: Getting started with CSS - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
date_saved: 2026-05-05T05:56:49.104833+00:00
instance: kb-cron
parent: getting-started-with-css-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started-3.md

summary:
### [@rules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#rules) CSS [@rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Syntax/At-rules) (pronounced "at-rules") provide instructions for how CSS should behave. One common @rule that you are likely to encounter is `@media`, which is used to create [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries). Media queries use conditional logic for applying CSS styling. In the example below, the stylesheet defines a default pink background for the `<body>` element. However, a media query follows that sets a blue background on the `<body>` element if the browser viewport is wider than `30em`. ### [Shorthand properties](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#shorthand_properties) Some properties like [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font), [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background), [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding), [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border), and [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin) are called **shorthand properties**. This is because shorthand properties set several values in a single line. For example, this one line of code: is equivalent to these four lines of code: This one line: is equivalent to these five lines: Later in the course, you will encounter many other examples of shorthand properties. For now, try using the declarations above (or others you might know about) in your own code to become more familiar with how they work. ### [CSS Comments](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started#css_comments) As with any coding work, it is best practice to write comments in your CSS. This helps you to remember how the code works as you come back later to


