- Press Esc to move focus away from the code area (Tab inserts a tab character).
-
-
-
- | Objective: |
+ Learning outcomes: |
- To gain basic familiarity with HTML, and practice writing a few HTML elements.
+
+ - The anatomy of an HTML element — element, opening tag, content, closing tag, attributes.
+ - The HTML body and its purpose as a container for the page content.
+ - What void elements (also known as empty elements) are, and how they differ from other elements.
+ - The need for a doctype at the top of HTML documents. Its original intended purpose, and the fact that now it is somewhat of a historical artifact.
+ - Understanding that HTML needs to be correctly nested.
+
|
@@ -726,7 +734,7 @@ In the live output below, you can see that the first paragraph has gone wrong. T
{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }}
> [!NOTE]
-> You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's [character encoding is set to UTF-8](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding).
+> You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's [character encoding is set to UTF-8](/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#specifying_your_documents_character_encoding).
## HTML comments
@@ -750,10 +758,10 @@ You made it to the end of the article! We hope you enjoyed your tour of the basi
At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.
-- As you start to learn more about HTML, consider learning the basics of CSS (Cascading Style Sheets). [CSS](/en-US/docs/Learn/CSS) is the language used to style web pages, such as changing fonts or colors or altering the page layout. HTML and CSS work well together, as you will soon discover.
+- As you start to learn more about HTML, consider learning the basics of CSS (Cascading Style Sheets). [CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) is the language used to style web pages, such as changing fonts or colors or altering the page layout. HTML and CSS work well together, as you will soon discover.
## See also
- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color)
-{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+{{NextMenu("Learn_web_development/Core/Structuring_content/Webpage_metadata", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/template-screenshot.png b/files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/template-screenshot.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/getting_started/template-screenshot.png
rename to files/en-us/learn_web_development/core/structuring_content/basic_html_syntax/template-screenshot.png
diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md
similarity index 87%
rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/index.md
rename to files/en-us/learn_web_development/core/structuring_content/creating_links/index.md
index a62cb22591ee9cd..74f72a64983d6f4 100644
--- a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md
@@ -1,12 +1,14 @@
---
-title: Creating hyperlinks
-slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
-page-type: learn-module-chapter
+title: Creating links
+slug: Learn_web_development/Core/Structuring_content/Creating_links
+page-type: tutorial-chapter
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}
-Hyperlinks are really important — they are what makes the Web _a web_.
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}}
+
+Links (also known as hyperlinks) are really important — they are what makes the Web _a web_.
This article shows the syntax required to make a link, and discusses link best practices.
@@ -15,20 +17,27 @@ This article shows the syntax required to make a link, and discusses link best p
| Prerequisites: |
Basic HTML familiarity, as covered in
- Getting started with HTML. HTML text formatting, as covered in
- HTML text fundamentalsBasic HTML Syntax. Text-level semantics such as headings and paragraphs and lists.
|
- | Objective: |
+ Learning outcomes: |
- To learn how to implement a hyperlink effectively, and link multiple
- files together.
+
+ - Understand why links are the fundamental feature of the web. There is no web without links.
+ - The
href attribute.
+ - Absolute and relative paths, and when to use them.
+ - Path syntax in detail — slashes, single dot, and double dot.
+ - Link states and why they are important —
:hover, :focus, :visited, and :active.
+ - Inline and block-level links.
+ - Understanding the benefits of writing good link text, such as better accessibility for screenreader users, and potential positive SEO effects.
+
|
@@ -60,7 +69,8 @@ A basic link is created by wrapping the text or other content inside an {{htmlel
```
-This gives us the following result:\
+This gives us the following result:
+
I'm creating a link to [the Mozilla homepage](https://www.mozilla.org/en-US/).
### Block level links
@@ -142,7 +152,7 @@ To fully understand link targets, you need to understand URLs and file paths. Th
A URL, or Uniform Resource Locator is a string of text that defines where something is located on the Web. For example, Mozilla's English homepage is located at `https://www.mozilla.org/en-US/`.
-URLs use paths to find files. Paths specify where the file you're interested in is located in the filesystem. Let's look at an example of a directory structure, see the [creating-hyperlinks](https://github.com/mdn/learning-area/tree/main/html/introduction-to-html/creating-hyperlinks) directory.
+URLs use paths to find files. Paths specify where the file you're interested in is located in the filesystem. Let's look at an example of a directory structure, see the `creating-hyperlinks` directory structure shown below:
@@ -150,6 +160,8 @@ The **root** of this directory structure is called `creating-hyperlinks`. When w
There are also two directories inside our root — `pdfs` and `projects`. These each have a single file inside them — a PDF (`project-brief.pdf`) and an `index.html` file, respectively. Note that you can have two `index.html` files in one project, as long as they're in different filesystem locations. The second `index.html` would perhaps be the main landing page for project-related information.
+Let's look at some examples of links between some different files in this directory structure to demonstrate different link types:
+
- **Same directory**: If you wanted to include a hyperlink inside `index.html` (the top level `index.html`) pointing to `contacts.html`, you would specify the filename that you want to link to, because it's in the same directory as the current file. The URL you would use is `contacts.html`:
```html
@@ -206,14 +218,14 @@ You can even use the document fragment reference on its own to link to _another
### Absolute versus relative URLs
-Two terms you'll come across on the Web are **absolute URL** and **relative URL:**
+Two terms you'll come across on the web are **absolute URL** and **relative URL:**
-**absolute URL**: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}.
+**Absolute URL**: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}.
For example, if an `index.html` page is uploaded to a directory called `projects` that sits inside the **root** of a web server, and the website's domain is `https://www.example.com`, the page would be available at `https://www.example.com/projects/index.html` (or even just `https://www.example.com/projects/`, as most web servers just look for a landing page such as `index.html` to load if it isn't specified in the URL.)
An absolute URL will always point to the same location, no matter where it's used.
-**relative URL**: Points to a location that is _relative_ to the file you are linking from, more like what we looked at in the previous section.
+**Relative URL**: Points to a location that is _relative_ to the file you are linking from, more like what we looked at in the previous section.
For example, if we wanted to link from our example file at `https://www.example.com/projects/index.html` to a PDF file in the same directory, the URL would just be the filename — `project-brief.pdf` — no extra information needed. If the PDF was available in a subdirectory inside `projects` called `pdfs`, the relative link would be `pdfs/project-brief.pdf` (the equivalent absolute URL would be `https://www.example.com/projects/pdfs/project-brief.pdf`.)
A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our `index.html` file out of the `projects` directory and into the **root** of the website (the top level, not in any directories), the `pdfs/project-brief.pdf` relative URL link inside it would now point to a file located at `https://www.example.com/pdfs/project-brief.pdf`, not a file located at `https://www.example.com/projects/pdfs/project-brief.pdf`.
@@ -356,7 +368,7 @@ Here's an example that includes a cc, bcc, subject and body:
> The values of each field must be URL-encoded with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces {{Glossary("Percent-encoding", "percent-escaped")}}.
> Also, note the use of the question mark (`?`) to separate the main URL from the field values, and ampersands (&) to separate each field in the `mailto:` URL.
> This is standard URL query notation.
-> Read [The GET method](/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data#the_get_method) to understand what URL query notation is more commonly used for.
+> Read [The GET method](/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data#the_get_method) to understand what URL query notation is more commonly used for.
Here are a few other sample `mailto` URLs:
@@ -368,10 +380,10 @@ Here are a few other sample `mailto` URLs:
## Test your skills!
-You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Links](/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links).
+You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Links](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_Links).
## Summary
-That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — [Advanced text formatting](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) is your next stop.
+That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, you're going to work through a couple of challenges that will test your comprehension of the topics you've covered so far.
-{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Advanced_text_features", "Learn_web_development/Core/Structuring_content/Marking_up_a_letter", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/mdn_logo.svg b/files/en-us/learn_web_development/core/structuring_content/creating_links/mdn_logo.svg
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/mdn_logo.svg
rename to files/en-us/learn_web_development/core/structuring_content/creating_links/mdn_logo.svg
diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/navigation-example.png b/files/en-us/learn_web_development/core/structuring_content/creating_links/navigation-example.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/navigation-example.png
rename to files/en-us/learn_web_development/core/structuring_content/creating_links/navigation-example.png
diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/simple-directory.png b/files/en-us/learn_web_development/core/structuring_content/creating_links/simple-directory.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/simple-directory.png
rename to files/en-us/learn_web_development/core/structuring_content/creating_links/simple-directory.png
diff --git a/files/en-us/learn/html/introduction_to_html/creating_hyperlinks/updated-bbc-website.png b/files/en-us/learn_web_development/core/structuring_content/creating_links/updated-bbc-website.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/creating_hyperlinks/updated-bbc-website.png
rename to files/en-us/learn_web_development/core/structuring_content/creating_links/updated-bbc-website.png
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/badly-formed-html.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/badly-formed-html.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/badly-formed-html.png
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/badly-formed-html.png
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/error-message.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/error-message.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/error-message.png
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/error-message.png
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/html-inspector.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/html-inspector.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/html-inspector.png
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/html-inspector.png
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md b/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md
similarity index 87%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/index.md
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md
index 6021bbe62df525e..57cfa704c759778 100644
--- a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md
@@ -1,10 +1,15 @@
---
title: Debugging HTML
-slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+slug: Learn_web_development/Core/Structuring_content/Debugging_HTML
page-type: learn-module-chapter
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}}
+
+> [!NOTE]
+> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon.
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML.
@@ -13,24 +18,25 @@ Writing HTML is fine, but what if something goes wrong, and you can't work out w
| Prerequisites: |
- HTML familiarity, as covered in, for example, Getting started with HTML,
- HTML text fundamentals, and
- Creating hyperlinks.
+ Basic HTML familiarity, as covered in
+ Basic HTML Syntax. Text-level semantics such as headings and paragraphs and lists. Structural HTML.
|
| Objective: |
- Learn the basics of using debugging tools to find problems in HTML.
+
+ - The concept of permissive code, and what this means for HTML debugging.
+ - Using the [HTML validator](https://validator.w3.org/) to detect markup errors.
+ - Using the DOM inspector in your browser DevTools to dive deeper into your markup.
+
|
@@ -50,7 +56,7 @@ Debugging doesn't have to be scary though — the key to being comfortable with
HTML is not as complicated to understand as Rust. HTML is not compiled into a different form before the browser parses it and shows the result (it is _interpreted_, not _compiled_). And HTML's {{glossary("element")}} syntax is arguably a lot easier to understand than a "real programming language" like Rust, {{glossary("JavaScript")}}, or {{glossary("Python")}}. The way that browsers parse HTML is a lot more **permissive** than how programming languages are run, which is both a good and a bad thing.
-### Permissive code
+## Permissive code
So what do we mean by permissive? Well, generally when you do something wrong in code, there are two main types of error that you'll come across:
@@ -96,7 +102,7 @@ It's time to study the permissive nature of HTML code.
- This section is badly nested: `strong strong emphasized? what is this?`. It is not easy to tell how this has been interpreted because of the previous problem.
- The [`href`](/en-US/docs/Web/HTML/Element/a#href) attribute value is missing a closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
-5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review [Discover browser developer tools](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools).
+5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review [Discover browser developer tools](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools).
6. In the DOM inspector, you can see what the rendered markup looks like: 
7. Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers _should_ give the same result):
@@ -123,7 +129,7 @@ It's time to study the permissive nature of HTML code.
```
-### HTML validation
+## HTML validation
So you can see from the above example that you really want to make sure your HTML is well-formed! But how? In a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex HTML document?
@@ -146,7 +152,7 @@ This should give you a list of errors and other information.
-#### Interpreting the error messages
+### Interpreting the error messages
The error messages are usually helpful, but sometimes they are not so helpful; with a bit of practice you can work out how to interpret these to fix your code. Let's go through the error messages and see what they mean. You'll see that each message comes with a line and column number to help you to locate the error easily.
@@ -171,8 +177,12 @@ You will know when all your errors are fixed when you see the following banner i
+## Using a DOM inspector
+
+TODO
+
## Summary
So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.
-{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/HTML_forms", "Learn_web_development/Core/Styling_basics", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/valid-html-banner.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/valid-html-banner.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/valid-html-banner.png
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/valid-html-banner.png
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/validation-results.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/validation-results.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/validation-results.png
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/validation-results.png
diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/validator.png b/files/en-us/learn_web_development/core/structuring_content/debugging_html/validator.png
similarity index 100%
rename from files/en-us/learn/html/introduction_to_html/debugging_html/validator.png
rename to files/en-us/learn_web_development/core/structuring_content/debugging_html/validator.png
diff --git a/files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md b/files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md
new file mode 100644
index 000000000000000..dcd372d68d94ed6
--- /dev/null
+++ b/files/en-us/learn_web_development/core/structuring_content/emphasis_and_importance/index.md
@@ -0,0 +1,269 @@
+---
+title: Emphasis and importance
+slug: Learn_web_development/Core/Structuring_content/Emphasis_and_importance
+page-type: tutorial-chapter
+---
+
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Headings_and_paragraphs", "Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content")}}
+
+The previous article looked at why semantics are important in HTML, and focused on headings and paragraphs. This article continues on the theme of semantics, looking at HTML elements that apply emphasis and importance to text (parallel to italics and bold text in print media).
+
+
+
+
+ | Prerequisites: |
+
+ Basic HTML familiarity, as covered in
+ Basic HTML Syntax.
+ |
+
+
+ | Learning outcomes: |
+
+
+ - The meaning of emphasis and importance, and the basic elements that apply them in HTML, such as
<em> and <strong>.
+ - Identify presentational markup that should no longer be used at all (e.g.
<big> and <font>); it is deprecated.
+ - Identify presentational markup that has been repurposed to have new semantic meaning (e.g.
<i> and <b>).
+
+ |
+
+
+
+
+## What are emphasis and importance?
+
+In human language, we often emphasize certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.
+
+### Emphasis
+
+When we want to add emphasis in spoken language, we _stress_ certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.
+
+> I am glad you weren't late.
+>
+> I am _glad_ you weren't _late_.
+
+The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one, with both the words "glad" and "late" in italics, sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.
+
+In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below).
+
+```html
+I am glad you weren't late.
+```
+
+### Strong importance
+
+To emphasize important words, we tend to stress them in spoken language and **bold** them in written language. For example:
+
+> This liquid is **highly toxic**.
+>
+> I am counting on you. **Do not** be late!
+
+In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below).
+
+```html
+This liquid is highly toxic.
+
+I am counting on you. Do not be late!
+```
+
+You can nest strong and emphasis inside one another if desired:
+
+```html-nolint
+This liquid is highly toxic — if you drink it, you may die.
+```
+
+{{EmbedLiveSample('Strong importance')}}
+
+## Active learning: Let's be important
+
+In this active learning section, we've provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.
+
+```html hidden
+Live output
+
+
+
+Editable code
+
+ Press Esc to move focus away from the code area (Tab inserts a tab character).
+
+
+
+
+
+
+
+
+```
+
+```css hidden
+html {
+ font-family: sans-serif;
+}
+
+h2 {
+ font-size: 16px;
+}
+
+.a11y-label {
+ margin: 0;
+ text-align: right;
+ font-size: 0.7rem;
+ width: 98%;
+}
+
+body {
+ margin: 10px;
+ background: #f5f9fa;
+}
+```
+
+```js hidden
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
+const output = document.querySelector(".output");
+const code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+ output.innerHTML = textarea.value;
+}
+
+const htmlSolution =
+ "Important notice
\nOn Sunday January 9th 2010, a gang of goths were spotted stealing several garden gnomes from a shopping center in downtown Milwaukee. They were all wearing green jumpsuits and silly hats, and seemed to be having a whale of a time. If anyone has any information about this incident, please contact the police now.
";
+let solutionEntry = htmlSolution;
+
+reset.addEventListener("click", () => {
+ textarea.value = code;
+ userEntry = textarea.value;
+ solutionEntry = htmlSolution;
+ solution.value = "Show solution";
+ updateCode();
+});
+
+solution.addEventListener("click", () => {
+ if (solution.value === "Show solution") {
+ textarea.value = solutionEntry;
+ solution.value = "Hide solution";
+ } else {
+ textarea.value = userEntry;
+ solution.value = "Show solution";
+ }
+ updateCode();
+});
+
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
+
+// Stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+textarea.onkeydown = (e) => {
+ if (e.code === "Tab") {
+ e.preventDefault();
+ insertAtCaret("\t");
+ }
+
+ if (e.code === "Escape") {
+ textarea.blur();
+ }
+};
+
+function insertAtCaret(text) {
+ const scrollPos = textarea.scrollTop;
+ let caretPos = textarea.selectionStart;
+
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
+ textarea.value = front + text + back;
+ caretPos += text.length;
+ textarea.selectionStart = caretPos;
+ textarea.selectionEnd = caretPos;
+ textarea.focus();
+ textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+textarea.onkeyup = () => {
+ // We only want to save the state when the user code is being shown,
+ // not the solution, so that solution is not saved over the user code
+ if (solution.value === "Show solution") {
+ userEntry = textarea.value;
+ } else {
+ solutionEntry = textarea.value;
+ }
+
+ updateCode();
+};
+```
+
+{{ EmbedLiveSample('Active_learning_Lets_be_important', 700, 520, "", "") }}
+
+## Italic, bold, underline…
+
+The elements we've discussed so far have clear-cut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as **presentational elements** and should no longer be used because, as we've seen before, semantics is so important to accessibility, SEO, etc.
+
+HTML5 redefined ``, ``, and `` with new, somewhat confusing, semantic roles.
+
+Here's the best rule you can remember: It's only appropriate to use ``, ``, or `` to convey a meaning traditionally conveyed with bold, italics, or underline when there isn't a more suitable element; and there usually is. Consider whether ``, ``, ``, or `` might be more appropriate.
+
+Always keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.
+
+- {{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought…
+- {{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: keywords, product names, lead sentence…
+- {{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: proper name, misspelling…
+
+> [!NOTE]
+> People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to only underline links. Use the `` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done.
+
+
+
+```html
+
+
+ The Ruby-throated Hummingbird (Archilochus colubris) is the most common
+ hummingbird in Eastern North America.
+
+
+
+
+ The menu was a sea of exotic words like vatrushka,
+ nasi goreng and soupe à l'oignon.
+
+
+
+Someday I'll learn how to spel better.
+
+
+
+ - Semantic HTML
+ -
+ Use the elements based on their semantic meaning, not their
+ appearance.
+
+
+```
+
+{{EmbedLiveSample('Italic, bold, underline…','100%','270')}}
+
+## Summary
+
+We are done looking at emphasis and importance for the moment. Let's move on to looking at how we represent lists in HTML.
+
+{{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Headings_and_paragraphs", "Learn_web_development/Core/Structuring_content/Lists", "Learn_web_development/Core/Structuring_content")}}
diff --git a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/en-us/learn_web_development/core/structuring_content/general_embedding_technologies/index.md
similarity index 87%
rename from files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
rename to files/en-us/learn_web_development/core/structuring_content/general_embedding_technologies/index.md
index d4a55d4bc184555..67cd0125f76ceb5 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/general_embedding_technologies/index.md
@@ -1,12 +1,12 @@
---
-title: From object to iframe — other embedding technologies
-slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+title: From object to iframe — general embedding technologies
+slug: Learn_web_development/Core/Structuring_content/General_embedding_technologies
page-type: learn-module-chapter
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+{{LearnSidebar}}
-By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. `