initial commit

1 files changed, 657 insertions, 0 deletions

diff --git a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html
new file mode 100644
index 0000000000..fba39b360c
--- /dev/null
+++ b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -0,0 +1,657 @@
+---
+title: أساسيات النصوص في لغة ترميز النص الفائق
+slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+tags:
+  - العنونة
+  - الفقرات
+  - النصوص
+  - دليل
+  - مبدئين
+  - مقدمة إلى لغة ترميز النص الفائق
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary" dir="rtl">أحد الأهداف الرئيسية للغة ترميز النص الفائق هي هيكلة النصوص وإعطائها هدف ووظيفة (كما تُعرف هذه الوظيفة ب {{glossary("semantics")}}) حتّى يتمكن المتصفح بعرض النصوص بطريقة مناسبة. تشرح هذه المقالة الطريقة التي يُمكن استخدام هذه اللغة لهيكلة صفحة تتكون من نصوص، عن طريق إضافة عناوين وفقرات، ومؤكدات على الكلمات (حروف غامقة ومائلة، على سبيل المثال)، وإنشاء قوائم، وغيرها.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th dir="rtl" scope="row">المتطلبات:</th>
+   <td dir="rtl">معرف بسيطة بلغة ترميز النص الفائقة، كما هو مشروح في <a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">مقالة البدء مع اللغة</a>.</td>
+  </tr>
+  <tr>
+   <th dir="rtl" scope="row">الهدف:</th>
+   <td dir="rtl">تعلم كيفية ترميز صفحة بسيطة مؤلفة من نصوص لإعطائها هيكلية ووظيفة.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="الأساسيات_العناوين_والفقرات">الأساسيات: العناوين والفقرات</h2>
+
+<p dir="rtl">تتألف معظم النصوص المُنظمة من عناوين وفقرات، بغض النظر عما إذا كنت تقرأ قصة، أو جريدة، أو كتاب جامعي، أو مجلة ... إلخ.</p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>
+
+<p dir="rtl">بحيث يجعل المحتوى المنظم القراءة أكثر سهولة ومتعة.</p>
+
+<p dir="rtl">في لغة ترميز النص الفائق، تحاط الفقرات بالعنصر {{htmlelement("p")}}، كالتالي:</p>
+
+<pre class="brush: html">&lt;p&gt;I am a paragraph, oh yes I am.&lt;/p&gt;</pre>
+
+<p dir="rtl">وتحاط العناوين بوسوم العنونة المخصصة:</p>
+
+<pre class="brush: html">&lt;h1&gt;I am the title of the story.&lt;/h1&gt;</pre>
+
+<p dir="rtl">يوجد ست عناوين متدرجة المستويات، وهي {{htmlelement("h1")}}، و {{htmlelement("h2")}}، و {{htmlelement("h3")}}، و {{htmlelement("h4")}}، و {{htmlelement("h5")}}، و {{htmlelement("h6")}}. يمثل الوسم <code>&lt;h1&gt;</code> العنوان الرئيسي، بينما يمثل الوسم <code>&lt;h2&gt;</code> عنوان فرعي، والوسم <code>&lt;h3&gt;</code> عنوان فرعي للعنوان الفرعي الأول، وهكذا.</p>
+
+<h3 dir="rtl" id="تنفيذ_التسلسل_الهيكلي">تنفيذ التسلسل الهيكلي</h3>
+
+<p dir="rtl">على سبيل المثال، في قصة ما، سيمثل الوسم <code>&lt;h1&gt;</code> عنوان القصة، والوسم <code>&lt;h2&gt;</code> سيمثل عنوان كل فصل، بينما سيمثل الوسم <code>&lt;h3&gt;</code> القسم الفرعي لكل فصل،وهلم جرا.</p>
+
+<pre class="brush: html">&lt;h1&gt;The Crushing Bore&lt;/h1&gt;
+
+&lt;p&gt;By Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Chapter 1: The dark night&lt;/h2&gt;
+
+&lt;p&gt;It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...&lt;/p&gt;
+
+&lt;h2&gt;Chapter 2: The eternal silence&lt;/h2&gt;
+
+&lt;p&gt;Our protagonist could not so much as a whisper out of the shadowy figure ...&lt;/p&gt;
+
+&lt;h3&gt;The specter speaks&lt;/h3&gt;
+
+&lt;p&gt;Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"&lt;/p&gt;</pre>
+
+<p dir="rtl">فتحديد وظيفة بعض العناصر يعود لك، طالما أنك تستخدم تسلسل منطقي. ولكنك تحتاج إلى أن تضع بالإعتبار بعض الأمور عندما تقوم بتنظيم محتوى مشابه:</p>
+
+<ul dir="rtl">
+ <li>من الأفضل أن تستخدم والوسم <code>&lt;h1&gt;</code> مرة واحدة في كل صفحة، حيث يعد يمثل هذا الوسم أعلى مستويات العنونة، وبقية العناوين تتوضع أسفله بشكل تسلسلي.</li>
+ <li>تأكد أنك تستخدم العناوين بترتيبها التسلسلي الصحيح. أي لا تستخدم الوسم <code>&lt;h3&gt;</code> لتمثيل عنوان فرعي، وتستخدم بعده الوسم <code>&lt;h2&gt;</code> لتمثيل عنوان فرعي من درجة ثانية، فهذا لا يبدو منطقياً، كما يؤدي إلى نتائج غريبة!</li>
+ <li>من الست درجات عنونة المتاحة، حاول ألاَّ تستخدم أكثر من ثلاثة في كل صفحة، مالم يكن هذا ضرورياً.<span id="result_box" lang="ar"><span> حيث أنَّ المستندات ذات المستويات المتعددة (أي تسلسل هرمي عميق) تصبح غير عملية وصعبة التنقل.</span> <span>في مثل هذه الحالات، من المستحسن نشر المحتوى على صفحات متعددة إذا كان ذلك ممكناً.</span></span></li>
+</ul>
+
+<h3 dir="rtl" id="لماذا_نحتاج_الهيكلة_(التنظيم)؟">لماذا نحتاج الهيكلة (التنظيم)؟</h3>
+
+<p dir="rtl">للإجابة على هذا السؤال، دعنا نأخذ على الملف <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>، يعتبر هذا الملف نقطة البداية لمثالنا في هذه المقالة (وهي وصفحة حمص جميلة). يجب عليك حفظ نسخة من هذا الملف على جهازك، فستحتاجه في تمارين لاحقة. تحتوي جسم الوثيقة على عدة أجزاء من المحتوى، وهي غير مُرمَزِة بأي شكل، ولكنهم مفصولين بسطور.</p>
+
+<p dir="rtl">بكل الأحوال، عندما ستفتح هذه الوثيقة في متصفحك، سترى أنَّ النص سيظهر كقطعة كبيرة!</p>
+
+<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>
+
+<p dir="rtl">يرجع هذا لعدم وجود عناصر لتنظم المحتوى، ولذلك لم يتمكن المتصفح بمعرفة أي جزء هو عنوان وأي جزء هو فقرة. المزيد:</p>
+
+<ul dir="rtl">
+ <li>يميل المستخدمون لتصفح صفحات الويب بسرعة شديدة لإيجاد محتوى متعلق، فغالباً ما يقومون بقراءة العناوين كبداية (<a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">المستخدمون عادةً ما يقضون وقت قصير جداً في صفحة الويب</a>). فإذا لم يجدوا شيء مفيد خلال بضعة ثواني، فسوف يشعرون بالملل ويقومون بالذهاب إلى مكان آخر.</li>
+ <li><span id="result_box" lang="ar"><span>تعتبر محركات البحث التي تفهرس محتويات صفحتك العناوين كلمات رئيسية مهمة التأثير على ترتيب الصفحة عند البحث.</span> <span>وبدون العناوين، ستؤدي صفحتك بشكل سيء من حيث </span></span>{{glossary("SEO")}}<span lang="ar"><span> (تحسين محركات البحث).</span></span></li>
+ <li>غالباً لا يقوم المعاق بصرياً بقراءة صفحات الويب، حيث يقوم بالإستماع لها بدلاً من ذلك. يتم ذلك باستخدم برمجية تسمى بقارئ الشاشة. توفر هذه البرمجية طرق للوصول السريع للنص المُعطى. فمن بين العديد من الأساليب المستخدمة، توفر هذه البرمجية طريقة للحصول على خلاصة المستند من خلال قراءة العناوين، مما يسمح للمستخدمين بالحصول على المعلومات التي يريدونها بسرعة. فإذا كانت العناوين غير متوفرة، سيضطر هؤلاء للسماع للمستند بأكمله.</li>
+ <li dir="ltr">To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li>
+</ul>
+
+<p>We therefore need to give our content structural markup.</p>
+
+<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3>
+
+<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;My short story
+
+I am a policewoman and my name is Trish.
+
+My legs are made of cardboard and I am married to a fish.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;h1&gt;My short story&lt;/h1&gt;\n&lt;p&gt;I am a policewoman and my name is Trish.&lt;/p&gt;\n&lt;p&gt;My legs are made of cardboard and I am married to a fish.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3>
+
+<p>Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)</p>
+
+<p>In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p>
+
+<pre class="brush: html">&lt;h1&gt;This is a top level heading&lt;/h1&gt;</pre>
+
+<p>By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)</p>
+
+<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</pre>
+
+<p>This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.</p>
+
+<h2 id="Lists">Lists</h2>
+
+<p>Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.</p>
+
+<h3 id="Unordered">Unordered</h3>
+
+<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.</p>
+
+<pre>milk
+eggs
+bread
+hummus</pre>
+
+<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+milk
+eggs
+bread
+hummus
+&lt;/ul&gt;</pre>
+
+<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;milk&lt;/li&gt;
+  &lt;li&gt;eggs&lt;/li&gt;
+  &lt;li&gt;bread&lt;/li&gt;
+  &lt;li&gt;hummus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4>
+
+<p>Try editing the live sample below to create your very own HTML unordered list.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;milk
+eggs
+bread
+hummus&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 6em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ul&gt;\n&lt;li&gt;milk&lt;/li&gt;\n&lt;li&gt;eggs&lt;/li&gt;\n&lt;li&gt;bread&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+
+<h3 id="Ordered">Ordered</h3>
+
+<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p>
+
+<pre>Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road</pre>
+
+<p>The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Drive to the end of the road&lt;/li&gt;
+  &lt;li&gt;Turn right&lt;/li&gt;
+  &lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;
+  &lt;li&gt;Turn left at the third roundabout&lt;/li&gt;
+  &lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4>
+
+<p>Try editing the live sample below to create your very own HTML ordered list.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ol&gt;\n&lt;li&gt;Drive to the end of the road&lt;/li&gt;\n&lt;li&gt;Turn right&lt;/li&gt;\n&lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;\n&lt;li&gt;Turn left at the third roundabout&lt;/li&gt;\n&lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;\n&lt;/ol&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>
+
+<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3>
+
+<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_4">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Quick hummus recipe
+
+    This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
+
+    Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.
+
+    Ingredients
+
+    1 can (400g) of chick peas (garbanzo beans)
+    175g of tahini
+    6 sundried tomatoes
+    Half a red pepper
+    A pinch of cayenne pepper
+    1 clove of garlic
+    A dash of olive oil
+
+    Instructions
+
+    Remove the skin from the garlic, and chop coarsely
+    Remove all the seeds and stalk from the pepper, and chop coarsely
+    Add all the ingredients into a food processor
+    Process all the ingredients into a paste.
+    If you want a coarse "chunky" hummus, process it for a short time
+    If you want a smooth hummus, process it for a longer time
+
+    For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.
+
+    Storage
+
+    Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
+
+    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Quick hummous recipe&lt;/h1&gt;\n\n&lt;p&gt;This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.&lt;/p&gt;\n\n&lt;p&gt;Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.&lt;/p&gt;\n\n&lt;h2&gt;Ingredients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 can (400g) of chick peas (garbanzo beans)&lt;/li&gt;\n&lt;li&gt;175g of tahini&lt;/li&gt;\n&lt;li&gt;6 sundried tomatoes&lt;/li&gt;\n&lt;li&gt;Half a red pepper&lt;/li&gt;\n&lt;li&gt;A pinch of cayenne pepper&lt;/li&gt;\n&lt;li&gt;1 clove of garlic&lt;/li&gt;\n&lt;li&gt;A dash of olive oil&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;\n&lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;\n&lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;\n&lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.&lt;/p&gt;\n\n&lt;h2&gt;Storage&lt;/h2&gt;\n\n&lt;p&gt;Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.&lt;/p&gt;\n\n&lt;p&gt;Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>
+
+<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p>
+
+<h3 id="Nesting_lists">Nesting lists</h3>
+
+<p>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:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;
+  &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+  &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>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 the current fourth bullet. This would look like so:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.
+    &lt;ul&gt;
+      &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+      &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Try going back to the previous active learning example and updating the second list like this.</p>
+
+<h2 id="Emphasis_and_importance">Emphasis and importance</h2>
+
+<p>In human language, we often emphasise 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.</p>
+
+<h3 id="Emphasis">Emphasis</h3>
+
+<p>When we want to add emphasis in spoken language, we <em>stress</em> 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.</p>
+
+<p>I am glad you weren't late.</p>
+
+<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+
+<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p>
+
+<p>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 recognised by screen readers and spoken out 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.)</p>
+
+<pre class="brush: html">&lt;p&gt;I am &lt;em&gt;glad&lt;/em&gt; you weren't &lt;em&gt;late&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Strong_importance">Strong importance</h3>
+
+<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p>
+
+<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+
+<p>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 and spoken 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.)</p>
+
+<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;I am counting on you. &lt;strong&gt;Do not&lt;/strong&gt; be late!&lt;/p&gt;</pre>
+
+<p>You can nest strong and emphasis inside one another if desired:</p>
+
+<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt; —
+if you drink it, &lt;strong&gt;you may &lt;em&gt;die&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Active_learning_Let's_be_important!">Active learning: Let's be important!</h3>
+
+<p>In this active learning section, we have 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.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_5">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;h1&gt;Important notice&lt;/h1&gt;
+
+&lt;p&gt;On 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.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show suggestion" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Important notice&lt;/h1&gt;\n&lt;p&gt;On &lt;strong&gt;Sunday January 9th 2010&lt;/strong&gt;, a gang of &lt;em&gt;goths&lt;/em&gt; were spotted stealing &lt;strong&gt;&lt;em&gt;several&lt;/em&gt; garden gnomes&lt;/strong&gt; from a shopping center in downtown &lt;strong&gt;Milwaukee&lt;/strong&gt;. They were all wearing &lt;em&gt;green jumpsuits&lt;/em&gt; and &lt;em&gt;silly hats&lt;/em&gt;, and seemed to be having a whale of a time. If anyone has &lt;strong&gt;any&lt;/strong&gt; information about this incident, please contact the police &lt;strong&gt;now&lt;/strong&gt;.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+
+<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3>
+
+<p>The elements we've discussed so far have clearcut 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 <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p>
+
+<p>HTML5 redefined <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> and <code>&lt;u&gt;</code> with new, somewhat confusing, semantic roles.</p>
+
+<p>Here's the best rule of thumb: it's likely appropriate to use <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, or <code>&lt;u&gt;</code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to 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.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li>
+ <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li>
+ <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li>
+</ul>
+
+<div class="note">
+<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code>&lt;u&gt;</code> 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.</p>
+</div>
+
+<pre class="brush: html">&lt;!-- scientific names --&gt;
+&lt;p&gt;
+  The Ruby-throated Hummingbird (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  is the most common hummingbird in Eastern North America.
+&lt;/p&gt;
+
+&lt;!-- foreign words --&gt;
+&lt;p&gt;
+  The menu was a sea of exotic words like &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; and &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- a known misspelling --&gt;
+&lt;p&gt;
+  Someday I'll learn how to &lt;u&gt;spel&lt;/u&gt; better.
+&lt;/p&gt;
+
+&lt;!-- Highlight keywords in a set of instructions --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Slice&lt;/b&gt; two pieces of bread off the loaf.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Insert&lt;/b&gt; a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
+
+<p> </p>