این ترجمه ناقص است. لطفاً در ترجمه این مقاله از انگلیسی کمک کنید.

در این مقاله به بررسی اصول زبان علامت گذاری HTML می پردازیم. برای انجام این کار، ابتدا عناصر(المان ها) و خصوصیت ها و دیگر اصطلاحات را تعریف می کنیم و سپس ارتباط آنها با زبان HTML را مورد بررسی قرار می دهیم. 
همچنین به شما نشان خواهیم داد که یک عنصر اچ تی ام ال چه ساختاری دارد و چگونه تعریف می شود. 
در ادامه، به تمرین کدهای HTML می پردازیم تا شما با جذابیت های آن آشنا شوید. 

پیش نیازها: داشتن دانش ابتدایی رایانه,دانش نصب نرم افزارها,دانش ابتدایی در مورد کار کردن با فایل ها
اهداف: آشنایی ابتدایی با زبان HTML و نوشتن چند عنصر اچ تی ام ال به عنوان تمرین.

HTML چیست؟

HTML (زبان علامت گذاری ابر متن)یک زبان برنامه نویسی نیست;
بلکه یک زبان علامت گذاری است که به مرورگر می گوید که چگونه صفحات وب ای که وارد آنها می شویم را ساختار دهی کند. این زبان به تناسب فردی که از آن استفاده می کند می تواند ساده یا پیچیده باشد.
اچ تی ام ال حاوی یک سری عنصر است که با استفاده از آنها می توانید بخش های مختلفی از محتواها را محصور کنید تا نشان داده شوند یا روش های خاصی بر روی آنها اعمال شوند. 
بعنوان مثال می توان در یک علامت محصور کننده ی ابر متن(که به آن تگ گفته می شود) متنی را به یک صفحه ی وب دیگر پیوند زد و یا کلمات را ایتالیک کرد و یا کارهای دیگری را انجام داد.
به عنوان مثال, محتوای زیر را که در یک خط نوشته شده است در نظر بگیرید:

My cat is very grumpy

اگر بخواهیم این خط همین طور که هست نمایش داده شود,می توانیم آن را بعنوان یک پاراگراف در نظر بگیریم به طوری که در داخل یک عنصر پاراگراف قرار بگیرد(<p>):

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

نکته: عناصر HTML حساس به حروف بزرگ و کوچک نیستند. به  عنوان مثال آنها می توانند با حروف کوچک و یا با حروف بزرگ نوشته شوند. 
به عنوان مثال,یک عنصر <title> می تواند به صورت های
 <title>, <TITLE>, <Title>, <TiTlE>
نوشته شود و یا به صورت هایی دیگر. و در تمامی این موارد به درستی کار می کند.
اما بهترین تمرین این است که تمامی عناصر را با حروف کوچک بنویسیم تا استحکام و خوانایی و دیگر موارد افزایش یابد.

تشریح یک عنصر HTML

اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:

بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:

  1. تگ باز شده: این تگ(علامت) حاوی نام عنصر مورد نظر است(در اینجا,عنصر p),به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های < و >) قرار می گیرد. این بخش جایی است که عنصر ما شروع می شود و آغاز به تاثیر گذاری می کند--در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود. 
  2. تگ بسته شده: این تگ مشابه با تگ باز شده, می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن عنصر است. این بخش همان جایی است که عنصر ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.
  3. محتوا:این همان محتوای عنصر است,که در این مورد تنها یک متن است.
  4. عنصر: به تگ باز شده به اضافه ی تگ بسته شده به اضافه ی محتوا,عنصر گفته می شود.

آموزش عملی: ایجاد اولین عنصر 

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

در صورتی که اشتباهی توسط شما رخ داد, همواره می توانید با استفاده از دکمه ی Reset آن را به حالت اولیه برگردانید. 

Nesting elements

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

<p>My cat is <strong>very</strong> grumpy.</p>

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

<p>My cat is <strong>very grumpy.</p></strong>

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!

Block versus inline elements

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

  • 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.
  • 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 <a> element (hyperlink) or emphasis elements such as <em> or <strong>.

Take the following example:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<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, <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 CSS styling that the browser applies to paragraphs).

Note: HTML5 redefined the element categories in HTML5: see Element content categories. 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.

Note: The terms "block" and "inline", as used in this topic, should not be confused with the types of CSS boxes 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.

Note: You can find useful reference pages that include lists of block and inline elements — see Block-level elements and Inline elements.

Empty elements

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 <img> element embeds an image file onto a page in the position it is included in:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

This would output the following on your page:

Note: Empty elements are also sometimes called void elements.

Attributes

Elements can also have attributes, which look like this:

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

Attributes contain extra information about the element which you don't want to appear in the actual content. In this case, the class 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.

An attribute should have:

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

Active learning: Adding attributes to an element

Another example of an element is <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:

  • href: 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, href="https://www.mozilla.org/".
  • title: The title attribute specifies extra information about the link, such as what the page is that you are linking to. For example, title="The Mozilla homepage". This will appear as a tooltip when hovered over.
  • target: The target attribute specifies the browsing context which will be used to display the link. For example, target="_blank" will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.

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

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Playable code3

 

<h2>Live output</h2>

<div class="output" style="min-height: 50px;">
</div>

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

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

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

 

 

 

 

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

 

 

 

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

 

 

Whitespace in HTML

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>Dogs are silly.</p>

<p>Dogs        are
         silly.</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.

Entity references: Including special characters in HTML

In HTML, the characters <, >,",' and & 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?

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 (&), and ended by a semicolon (;).

Literal character Character reference equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

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

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</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 <p> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references.

HTML comments

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.

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

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

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

Summary

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!

Note: 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 CSS. 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.

See also

 

In this module

Document Tags and Contributors

Contributors to this page: sbaloot
Last updated by: sbaloot,