path: root/files/fa/learn/html/introduction_to_html/getting_started/index.html

---
title: شروع کار با html
slug: Learn/HTML/Introduction_to_HTML/Getting_started
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
---
<div dir="rtl">{{LearnSidebar}}</div>

<div dir="rtl">{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary" dir="rtl">در این مقاله به بررسی اصول زبان علامت گذاری HTML می پردازیم. برای انجام این کار، ابتدا عناصر(المان ها) و خصوصیت ها و دیگر اصطلاحات را تعریف می کنیم و سپس ارتباط آنها با زبان HTML را مورد بررسی قرار می دهیم. <br>
 همچنین به شما نشان خواهیم داد که یک عنصر اچ تی ام ال چه ساختاری دارد و چگونه تعریف می شود. <br>
 در ادامه، به تمرین کدهای HTML می پردازیم تا شما با جذابیت های آن آشنا شوید. </p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th dir="rtl" scope="row">پیش نیازها:</th>
   <td>داشتن دانش ابتدایی رایانه,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">دانش نصب نرم افزارها</a>,<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">دانش ابتدایی در مورد کار کردن با فایل ها</a></td>
  </tr>
  <tr>
   <th dir="rtl" scope="row">اهداف:</th>
   <td dir="rtl">آشنایی ابتدایی با زبان HTML و نوشتن چند عنصر اچ تی ام ال به عنوان تمرین.</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="HTML_چیست؟">HTML چیست؟</h2>

<p dir="rtl">{{glossary("HTML")}} (زبان علامت گذاری ابر متن)یک زبان برنامه نویسی نیست;<br>
 بلکه یک زبان علامت گذاری است که به مرورگر می گوید که چگونه صفحات وب ای که وارد آنها می شویم را ساختار دهی کند. این زبان به تناسب فردی که از آن استفاده می کند می تواند ساده یا پیچیده باشد.<br>
 اچ تی ام ال حاوی یک سری {{glossary("Element", "عنصر")}} است که با استفاده از آنها می توانید بخش های مختلفی از محتواها را محصور کنید تا نشان داده شوند یا روش های خاصی بر روی آنها اعمال شوند. <br>
 بعنوان مثال می توان در یک علامت محصور کننده ی ابر متن(که به آن {{glossary("Tag", "تگ")}} گفته می شود) متنی را به یک صفحه ی وب دیگر پیوند زد و یا کلمات را ایتالیک کرد و یا کارهای دیگری را انجام داد.<br>
 به عنوان مثال, محتوای زیر را که در یک خط نوشته شده است در نظر بگیرید:</p>

<pre>My cat is very grumpy
</pre>

<p dir="rtl">اگر بخواهیم این خط همین طور که هست نمایش داده شود,می توانیم آن را بعنوان یک پاراگراف در نظر بگیریم به طوری که در داخل یک عنصر پاراگراف قرار بگیرد({{htmlelement("p")}}):</p>

<pre class="brush: html">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>

<div class="note" dir="rtl">
<p><strong>نکته</strong>: عناصر HTML حساس به حروف بزرگ و کوچک نیستند. به  عنوان مثال آنها می توانند با حروف کوچک و یا با حروف بزرگ نوشته شوند. <br>
 به عنوان مثال,یک عنصر {{htmlelement("title")}} می تواند به صورت های<br>
  <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code><br>
 نوشته شود و یا به صورت هایی دیگر. و در تمامی این موارد به درستی کار می کند.<br>
 اما بهترین تمرین این است که تمامی عناصر را با حروف کوچک بنویسیم تا استحکام و خوانایی و دیگر موارد افزایش یابد.</p>
</div>

<h2 dir="rtl" id="تشریح_یک_عنصر_HTML">تشریح یک عنصر HTML</h2>

<p dir="rtl">اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p dir="rtl">بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:</p>

<ol dir="rtl">
 <li><strong>تگ باز شده: </strong>این تگ(علامت) حاوی نام عنصر مورد نظر است(در اینجا,عنصر p),به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های &lt; و &gt;) قرار می گیرد. این بخش جایی است که عنصر ما شروع می شود و آغاز به تاثیر گذاری می کند--در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود. </li>
 <li><strong>تگ بسته شده:</strong> این تگ مشابه با تگ باز شده, می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن عنصر است. این بخش همان جایی است که عنصر ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.</li>
 <li><strong>محتوا:</strong>این همان محتوای عنصر است,که در این مورد تنها یک متن است.</li>
 <li><strong>عنصر:</strong> به تگ باز شده به اضافه ی تگ بسته شده به اضافه ی محتوا,عنصر گفته می شود.</li>
</ol>

<h3 dir="rtl" id="آموزش_عملی_ایجاد_اولین_عنصر">آموزش عملی: ایجاد اولین عنصر </h3>

<p dir="rtl">خط زیر را در بخش <em>Input</em> ویرایش کنید. برای انجام این کار می توانید آن را بین تگ های &lt;em&gt; و &lt;em/&gt; قرار دهید ( برای باز کردن عنصر, کافیست تگ &lt;em&gt; را قبل از آن قرار دهید. و برای برای بستن آن کافیست تگ &lt;em/&gt; را پس از آن قرار دهید). این کار باعث می شود که متن مورد نظر ایتالیک شود! سپس شما قادر خواهید بود تا به صورت زنده تغییرات را در بخش <em>Output</em> مشاهده کنید. </p>

<p dir="rtl">در صورتی که اشتباهی توسط شما رخ داد, همواره می توانید با استفاده از دکمه ی <em>Reset</em> آن را به حالت اولیه برگردانید. </p>

<div class="hidden">
<h6 dir="rtl" id="کد_قابل_اجرا">کد قابل اجرا</h6>

<pre class="brush: html" dir="rtl">&lt;h2&gt;خروجی زنده&lt;/h2&gt;
&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;کد قابل ویرایش&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
&lt;p class="a11y-label"&gt;دکمه ی Esc را فشار دهید تا از ناحیه ی کد خارج شویم.&lt;/p&gt;
&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
  This is my text.
&lt;/textarea&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>

<p> </p>

<pre class="brush: css">html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
</pre>

<p> </p>

<p> </p>

<p> </p>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '&lt;em&gt;This is my text.&lt;/em&gt;';
var solutionEntry = htmlSolution;

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 = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = 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 = function(){
  // 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();
};</pre>

<p> </p>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Nesting_elements">Nesting elements</h3>

<p>You can put elements inside other elements too — this is called <strong>nesting</strong>. If we wanted to state that our cat is <strong>very</strong> grumpy, we could wrap the word "very" in a {{htmlelement("strong")}} element, which means that the word is to be strongly emphasized:</p>

<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>

<p>You do however need to make sure that your elements are properly nested: in the example above, we opened the <code>p</code> element first, then the <code>strong</code> element, therefore we have to close the <code>strong</code> element first, then the <code>p</code>. The following is incorrect:</p>

<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>The elements have to open and close correctly, so they are clearly inside or outside one another. If they overlap like above, then your web browser will try to make a best guess at what you were trying to say, and you may well get unexpected results. So don't do it!</p>

<h3 id="Block_versus_inline_elements">Block versus inline elements</h3>

<p>There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.</p>

<ul>
 <li>Block-level elements form a visible block on a page — they will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li>
 <li>Inline elements are those that are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content. An inline element will not cause a new line to appear in the document; they would normally appear inside a paragraph of text, for example an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li>
</ul>

<p>Take the following example:</p>

<pre class="brush: html">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;

&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
</pre>

<p>{{htmlelement("em")}} is an inline element, so as you can see below, the first three elements sit on the same line as one another with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element, so each element appears on a new line, with space above and below each (the spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs).</p>

<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>

<div class="note">
<p><strong>Note</strong>: HTML5 redefined the element categories in HTML5: see <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than the ones that went before, they are a lot more complicated to understand than "block" and "inline", so we will stick with these throughout this topic.</p>
</div>

<div class="note">
<p><strong>Note</strong>: The terms "block" and "inline", as used in this topic, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> with the same names. While they correlate by default, changing the CSS display type doesn't change the category of the element and doesn't affect which elements it can contain and which elements it can be contained in. One of the reasons why HTML5 dropped these terms was to prevent this rather common confusion.</p>
</div>

<div class="note">
<p><strong>Note</strong>: You can find useful reference pages that include lists of block and inline elements — see <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
</div>

<h3 id="Empty_elements">Empty elements</h3>

<p>Not all elements follow the above pattern of opening tag, content, closing tag. Some elements consist only of a single tag, which is usually used to insert/embed something in the document at the place it is included. For example, the {{htmlelement("img")}} element embeds an image file onto a page in the position it is included in:</p>

<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>

<p>This would output the following on your page:</p>

<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Note</strong>: Empty elements are also sometimes called <em>void elements</em>.</p>
</div>

<h2 id="Attributes">Attributes</h2>

<p>Elements can also have attributes, which look like this:</p>

<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the <code>class</code> attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things.</p>

<p>An attribute should have:</p>

<ol>
 <li>A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)</li>
 <li>The attribute name, followed by an equals sign.</li>
 <li>An attribute value, with opening and closing quote marks wrapped around it.</li>
</ol>

<h3 id="Active_learning_Adding_attributes_to_an_element">Active learning: Adding attributes to an element</h3>

<p>Another example of an element is {{htmlelement("a")}} — this stands for "anchor" and will make the piece of text it wraps around into a hyperlink. This can take a number of attributes, but several are as follows:</p>

<ul>
 <li><code>href</code>: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, <code>href="https://www.mozilla.org/"</code>.</li>
 <li><code>title</code>: The <code>title</code> attribute specifies extra information about the link, such as what the page is that you are linking to. For example, <code>title="The Mozilla homepage"</code>. This will appear as a tooltip when hovered over.</li>
 <li><code>target</code>: The <code>target</code> attribute specifies the browsing context which will be used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.</li>
</ul>

<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website. First, add the <code>&lt;a&gt;</code> element. Second, add the <code>href</code> attribute and the <code>title</code> attribute. Lastly, specify <code>target</code> attribute to open the link in the new tab. You'll be able to see your changes update live in the <em>Output</em> area. You should see a link that when hovered over displays the <code>title</code> attribute's content, and when clicked navigates to the web address in the <code>href</code> element. Remember that you need to include a space between the element name, and each attribute.</p>

<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really 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 line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  This is my text.
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>

<p> </p>

<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span>
  <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">h2 </span><span class="punctuation token">{</span>
  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span>
  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
  <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span>
  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">body </span><span class="punctuation token">{</span>
  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
  <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<p> </p>

<p> </p>

<p> </p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
  solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'&lt;em&gt;This is my text.&lt;/em&gt;'</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>

textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// stop tab key tabbing out of textarea and</span>
<span class="comment token">// make it write a tab at the caret position instead</span>

textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
  <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>

  <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>

textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>

<p> </p>
</div>

<h6 id="Playable_code3">Playable code3</h6>

<p> </p>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;

&lt;div class="output" style="min-height: 50px;"&gt;
&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
  &amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;</pre>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<p> </p>

<p> </p>

<p> </p>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
var solutionEntry = htmlSolution;

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 = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = 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 = function(){
  // 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();
};</pre>

<p> </p>

<p> </p>

<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Whitespace_in_HTML">Whitespace in HTML</h3>

<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p>

<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;

&lt;p&gt;Dogs        are
         silly.&lt;/p&gt;</pre>

<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p>

<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2>

<p>In HTML, the characters <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> and <code>&amp;</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p>

<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&amp;), and ended by a semicolon (;).</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Literal character</th>
   <th scope="col">Character reference equivalent</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>&lt;</td>
   <td>&amp;lt;</td>
  </tr>
  <tr>
   <td>&gt;</td>
   <td>&amp;gt;</td>
  </tr>
  <tr>
   <td>"</td>
   <td>&amp;quot;</td>
  </tr>
  <tr>
   <td>'</td>
   <td>&amp;apos;</td>
  </tr>
  <tr>
   <td>&amp;</td>
   <td>&amp;amp;</td>
  </tr>
 </tbody>
</table>

<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p>

<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;

&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>

<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code>&lt;p&gt;</code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p>

<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
</div>

<h2 id="HTML_comments">HTML comments</h2>

<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p>

<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code>&lt;!--</code> and <code>--&gt;</code>, for example:</p>

<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;

&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>

<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p>

<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="Summary">Summary</h2>

<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p>

<div class="note">
<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
</ul>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<div> </div>

<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>