initial commit

9 files changed, 1979 insertions, 0 deletions

diff --git a/files/vi/learn/html/forms/index.html b/files/vi/learn/html/forms/index.html
new file mode 100644
index 0000000000..5b0215a43c
--- /dev/null
+++ b/files/vi/learn/html/forms/index.html
@@ -0,0 +1,101 @@
+---
+title: HTML forms
+slug: Learn/HTML/Forms
+tags:
+  - Beginner
+  - Featured
+  - Forms
+  - Guide
+  - HTML
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p>
+
+<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p>
+
+<p>The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn_mở_đầu">Hướng dẫn mở đầu</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt>
+ <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
+ <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
+</dl>
+
+<h2 id="Các_form_controls_khác_nhau">Các form controls khác nhau</h2>
+
+<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></strong><br>
+ Chúng ta bắt đầu phần này bằng việc nhìn vào chức năng khả dụng của của kiểu {{htmlelement("input")}} HTML, tìm hiểu những tùy chọn có thể sử dụng để thu thập các kiểu data khác nhau.</p>
+
+<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></strong><br>
+ Tại đây chúng ta sẽ tiếp tục đi sâu vào phần tử <code>&lt;input&gt;</code>, tìm hiểu về các kiểu input mới được thêm trong HTML5, và các loại UI controls khác nhau và cách thu thập dữ liệu nâng cao mà chúng làm được. Thêm nữa, chúng ta sẽ xem qua phần tử {{htmlelement('output')}}.</p>
+
+<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></strong><br>
+ Tiếp sau đó chúng ta sẽ tìm hiểu về các non-<code>&lt;input&gt;</code> form controls và các công cụ có liên quan, ví dụ {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.</p>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<dl>
+ <dt></dt>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></dt>
+ <dd>An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state.</dd>
+</dl>
+
+<h2 id="Kiểm_tra_và_gửi_dữ_liệu_form">Kiểm tra và gửi dữ liệu form</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
+ <dd>Bài viết này cho biết điều gì sẽ xảy ra khi user submit một cái form - dữ liệu sẽ đi đâu, và làm sao chúng ta có thẻ xử lý dữ liệu đó khi nó đi đến đó? Chúng ta cũng nhìn vào một số vấn đề về bảo mật liên quan đến việc gửi dữ liệu đi.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></dt>
+ <dd>Gửi dữ liệu đi thôi là chưa đủ - chúng ta cũng cần phải đảm bảo rằng dữ liêu mà user điền vào form là đúng định dạng chúng ta mong muốn để xử lý được, và chúng sẽ không làm hư hại ứng dụng của chúng ta. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
+</dl>
+
+<h2 id="Advanced_guides">Advanced guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Làm sao để xây dựng các form widgets tùy chỉnh</a> </dt>
+ <dd>Bạn sẽ bắt gặp các trường hợp mà form tích hợp trong cùng file là không đủ đáp ứng nhu cầu của bạn, ví dụ lý do về styling hay chức năng. Trong các trường hợp này, bạn có thể sẽ cần xây dựng widget form của riêng bạn dựa trên HTML thô. Bài viết này sẽ giải thích làm cách nào đạt được điều đó, và các điều cần cân nhắc khi bạn làm nó, với một case study thực tế.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Gửi form bằng JavaScript</a></dt>
+ <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
+ <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
+</dl>
+
+<h2 id="Form_styling_guides_2">Form styling guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
+ <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
+</ul>
diff --git a/files/vi/learn/html/index.html b/files/vi/learn/html/index.html
new file mode 100644
index 0000000000..2f55fd4003
--- /dev/null
+++ b/files/vi/learn/html/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML
+slug: Learn/HTML
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Để xây dựng trang web, bạn nên biết về {{Glossary('HTML')}} - công nghệ cơ bản được sử dụng để xác định cấu trúc của trang web. HTML được sử dụng để xác định xem nội dung web của bạn có được nhận dạng như một đoạn, danh sách, tiêu đề, liên kết, hình ảnh, trình phát đa phương tiện, biểu mẫu hay một trong nhiều thành phần có sẵn khác hay thậm chí là phần tử mới mà bạn định nghĩa.</p>
+
+<h2 id="Lộ_trình_học_tập">Lộ trình học tập</h2>
+
+<p>Cách lý tưởng nhất để bắt đầu quá trình học tập của bạn là học HTML. Khởi đầu bằng việc đọc Giới thiệu về HTML. Sau đó, bạn có thể tiếp tục tìm hiểu về các chủ đề nâng cao hơn như:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li>
+ <li><a href="/en-US/docs/Learn/CSS">CSS</a>, và sử dụng nó như nào để tạo kiểu HTML (ví dụ như chuyển đổi kích cỡ văn bản của bạn và phông đã được sử dụng, thêm viền và điểm bóng, bố trí trang của bạn với vô số những cột, thêm hình động cùng những hiệu ứng bắt mắt khác.)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, và làm thế nào để thêm chức năng linh động vào các trang web( ví dụ như tìm vị trí của bạn và đánh dấu nó trên một bản đồ, làm cho phần tử Ul xuất hiện/ biến mất khi bạn thiết lập một button, lưu giữ sơ bộ giữ liệu của người dùng trên máy tính của họ, và còn rất nhiều việc khác nữa.)</li>
+</ul>
+
+<p>Trước khi bắt đầu chủ đề này, bạn nên có ít nhất hiểu biết cơ bản về việc sử dụng máy tính, và việc sử dụng trang web một cách thụ động (ví dụ chỉ nhìn vào đó và tiếp nhận nội dung). Bạn nên có một hệ thiết lập môi trường làm việc chi tiết như trong <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, và hiểu được là làm sao để có thể tạo và quản lý các files chi tiết như trong <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — cả 2 đều là những phần nhỏ của <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> mô đun hoàn chỉnh cho người mới bắt đầu.</p>
+
+<p>Chúng tôi khuyến khích các bạn tìm hiểu qua <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>trước khi bước vào chủ đề này, tuy nhiên thì cũng không thực sự cần thiết cái mà được bao quát trong những bài viết của <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> vì nócũng được tổng quát trong <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> mô đun của chúng tôi tuy rằng là chi tiết hơn nhiều.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt>
+ <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt>
+ <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt>
+ <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt>
+ <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd>
+</dl>
+
+<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2>
+
+<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p>
+
+<h2 id="See_also">See also</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN.</dt>
+ <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd>
+</dl>
+</div>
diff --git a/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..e063115936
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,326 @@
+---
+title: Creating hyperlinks
+slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Hyperlinks are really important — they are what makes the Web <em>a web</em>. This article shows the syntax required to make a link, and discusses link best practices.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn how to implement a hyperlink effectively, and link multiple files together.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_a_hyperlink">What is a hyperlink?</h2>
+
+<p>Hyperlinks là một trong những phát minh thú vị nhất mà Web cung cấp. Well, chúng là một tính năng của Web từ những ngày đầu, nhưng chúng là điều làm nên Web thật sự là Web - chúng cho phép ta liên kết các tập tin của chúng ta đến bất kỳ tập tin nào khác (hoặc tài nguyên nào khác) mà ta muốn, chúng ta cũng có thể liên kết đến một phần cụ thể trong một tập tin, và chúng ta có thể khiến cho các apps trở nên khả dụng tại một địa chỉ web đơn giản (trái ngược với native apps, những apps mà cần phải được cài đặt). Gần như mọi nội dung web đều có thể chuyển hóa thành một đường dẫn liên kết, nên khi được click (hoặc được activated) nó sẽ khiến trình duyệt đi đến một địa chỉ ({{glossary("URL")}}) web khác.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Một URL có thể trỏ đến những file HTML, file text, hình ảnh, tập tin text, video, và audio files, và bất kỳ thứ gì có thể tồn tại trên web. Nếu trình duyệt không biết làm sao để hiển thị hoặc xử lý file, nó sẽ hỏi bạn liệu bạn có muốn mở file (trong trường hợp này nhiệm vụ mở hoặc xử lý file đó được chuyển cho một native app khác phù hợp trên thiết bị) hoặc tải file (trong trường hợp này bạn có thể thử với nó ở các phần tiếp theo của bài viết).</p>
+</div>
+
+<p>The BBC homepage, for example, contains a large number of links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools) and more.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/17032/updated-bbc-website.png" style="display: block; height: 455px; margin: 0px auto; width: 700px;"></p>
+
+<h2 id="Cấu_trúc_của_một_link">Cấu trúc của một link</h2>
+
+<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>This gives us the following result:</p>
+
+<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p>
+
+<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3>
+
+<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p>
+
+<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p>
+</div>
+
+<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3>
+
+<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p>
+
+<ul>
+ <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li>
+ <li>Turn some of the content into links.</li>
+ <li>Include title attributes.</li>
+</ul>
+
+<h3 id="Block_level_links">Block level links</h3>
+
+<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code>&lt;a&gt;&lt;/a&gt;</code> tags.</p>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/"&gt;
+  &lt;img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p>
+</div>
+
+<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2>
+
+<p>Để hoàn toàn hiểu về các link targets, bạn cần phải hiểu về các URLs và các đường dẫn file. Phần này sẽ cho bạn thông tin bạn cần để đạt được điều này.</p>
+
+<p>Một URL, hoặc Uniform Resouce Locator (Định vị Tài nguyên Thống nhất) đơn giản là một chuỗi văn bản mà nó định nghĩa cái nơi mà một thứ gì đó được định vị trên Web. Ví dụ, trang chủ của Mozilla được định vị tại: <code>https://www.mozilla.org/en-US/</code>.</p>
+
+<p>Các URLs sử dụng các đường dẫn paths để tìm kiếm các files. Các đường dẫn (paths) chỉ định nơi nào đó ở trong filesystem mà cái file bạn đang tìm được đặt tại đó. Hãy xem một ví dụ đơn giản về cấu trúc thư mục (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p>
+
+<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p><strong>Root</strong> của cấu trúc thư mục (directory structure) này có tên gọi là <code>creating-hyperlinks</code>. Khi làm việc một cách local với một web site, bạn sẽ có một thư mục mà toàn bộ site đi vào bên trong nó. Bên trong root, chúng ta có một file <code>index.html</code> và <code>contacts.html</code>. Trong một website thực tế, index.html sẽ là trang chủ hoặc landing page (một dạng trang web mà được dùng như một điểm tiếp xúc cho cả website hoặc một phần cụ thể của website.)</p>
+
+<p>Ngoài ra còn có 2 thư mục bên trong root của chúng ta— <code>pdfs</code> and <code>projects</code>. Và chúng lại có một file bên trong mỗi thư mục đó — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p>
+
+<ul>
+ <li>
+  <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Want to contact a specific staff member?
+Find details on our &lt;a href="contacts.html"&gt;contacts page&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;Visit my &lt;a href="projects/index.html"&gt;project homepage&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p>
+
+  <pre class="brush: html">&lt;p&gt;A link to my &lt;a href="../pdfs/project-brief.pdf"&gt;project brief&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p>
+</div>
+
+<h3 id="Document_fragments">Document fragments</h3>
+
+<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p>
+
+<pre class="brush: html">&lt;h2 id="Mailing_address"&gt;Mailing address&lt;/h2&gt;</pre>
+
+<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p>
+
+<pre class="brush: html">&lt;p&gt;Want to write us a letter? Use our &lt;a href="contacts.html#Mailing_address"&gt;mailing address&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p>
+
+<pre class="brush: html">&lt;p&gt;The &lt;a href="#Mailing_address"&gt;company mailing address&lt;/a&gt; can be found at the bottom of this page.&lt;/p&gt;</pre>
+
+<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3>
+
+<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p>
+
+<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p>
+
+<p>An absolute URL will always point to the same location, no matter where it is used.</p>
+
+<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
+
+<p>A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p>
+
+<h2 id="Link_best_practices">Link best practices</h2>
+
+<p>There are some best practices to follow when writing links. Let's look at these now.</p>
+
+<ul>
+</ul>
+
+<h3 id="Use_clear_link_wording">Use clear link wording</h3>
+
+<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p>
+
+<ul>
+ <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li>
+ <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li>
+ <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li>
+</ul>
+
+<p>Let's look at a specific example:</p>
+
+<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Download Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Click here
+&lt;/a&gt;
+to download Firefox&lt;/p&gt;
+</pre>
+
+<p>Other tips:</p>
+
+<ul>
+ <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li>
+ <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li>
+ <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li>
+ <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li>
+</ul>
+
+<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3>
+
+<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p>
+
+<ul>
+ <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li>
+ <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li>
+</ul>
+
+<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3>
+
+<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p>
+
+<ul>
+ <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li>
+ <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li>
+</ul>
+
+<p>Let's look at some examples, to see what kind of text can be used here:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Download the sales report (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/" target="_blank"&gt;
+  Watch the video (stream opens in separate tab, HD quality)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Play the car game (requires Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3>
+
+<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p>
+
+<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=en-US"
+   download="firefox-latest-64bit-installer.exe"&gt;
+  Download Latest Firefox for Windows (64-bit) (English, US)
+&lt;/a&gt;</pre>
+
+<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2>
+
+<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p>
+
+<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>You should:</p>
+
+<ol>
+ <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li>
+ <li>Turn each page name into a link to that page.</li>
+ <li>Copy the navigation menu across to each page.</li>
+ <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li>
+</ol>
+
+<p>The finished example should end up looking something like this:</p>
+
+<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p>
+</div>
+
+<h2 id="E-mail_links">E-mail links</h2>
+
+<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p>
+
+<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
+</pre>
+
+<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
+
+<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p>
+
+<h3 id="Specifying_details">Specifying details</h3>
+
+<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p>
+
+<p>Here's an example that includes a cc, bcc, subject and body:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email&amp;body=The%20body%20of%20the%20email"&gt;
+  Send mail with cc, bcc, subject and body
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&amp;) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p>
+</div>
+
+<p>Here are a few other sample <code>mailto</code> URLs:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links">Test your skills: Links</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</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>
diff --git a/files/vi/learn/html/introduction_to_html/getting_started/index.html b/files/vi/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..9cbcb80907
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,740 @@
+---
+title: Getting started with HTML
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Trong bài viết này, chúng ta đề cập đến các khái niệm cơ bản về HTML để giúp bạn bắt đầu. Chúng tôi xác định các elements (phần tử), attributes (thuộc tính) và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã biết tới và nơi chúng phù hợp với ngôn ngữ. Chúng tôi cũng cho bạn thấy cái cách của một phần tử HTML được cấu tạo, cách một trang HTML điển hình được cấu tạo và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ "chơi" với một số HTML để giúp hứng thú!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện:</th>
+   <td>Máy tính, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">phần mềm cơ bản</a>, và kiến thức cơ bản về <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với các tệp</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Để đạt được sự quen thuộc với ngôn ngữ HTML và biết thực hành được một số cách viết một vài phần tử </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_là_gì">HTML là gì?</h2>
+
+<p>{{glossary("HTML")}} (Ngôn Ngữ Đánh Dấu Siêu Văn Bản) không phải là ngôn ngữ lập trình; nó là một <em>ngôn ngữ đánh dấu</em> được sử dụng để cho trình duyệt của bạn biết cách cấu tạo các trang web bạn truy cập. Nó có thể phức tạp hoặc đơn giản như nhà phát triển web mong muốn. HTML bao gồm một loạt {{glossary ("Element", "elements")}}, mà bạn sử dụng để đính kèm, bọc hoặc đánh dấu các phần khác nhau của nội dung để làm cho nó xuất hiện hoặc hành động theo một cách nhất định. {{Glossary ("Tag", "tags")}} kèm theo có thể tạo một chút nội dung thành siêu liên kết để liên kết đến một trang khác trên web, in nghiêng từ, v.v. Ví dụ: lấy dòng nội dung sau:</p>
+
+<pre class="notranslate">Mèo của tôi rất cục cằn</pre>
+
+<p>nếu chúng ta muốn dòng chữ đấy hiển thị thì chúng ta có thể chỉ rõ rằng nó là một đoạn bằng cách đính kèm nó trong một phần tử "đoạn" ({{htmlelement("p")}}):</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mèo của tôi rất máu chó&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Ghi Chú</strong>: Các thẻ ở trong HTML là trường hợp không quan trọng có thể nói rằng chúng có thể được viết thế ếu nào cũng được, Ví dụ như một thẻ {{phần tử html("title")}} có thể được viết như <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code>, v.v. và nó vẫn sẽ hoạt động ổn hoi. Tốt nhất là được viết thường hết để cho phù hợp, dễ đọc và các lí do khác nữa.</p>
+</div>
+
+<h2 id="Cấu_trúc_của_một_thẻ_HTML">Cấu trúc của một thẻ HTML</h2>
+
+<p>Let's explore our paragraph element a bit further:</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>Các phần chính của thẻ bao gồm:</p>
+
+<ol>
+ <li><strong>The opening tag (Thẻ mở):</strong> phần này bao gồm tên của phần tử (trong trường hợp này là p), được bao bọc trong các dấu ngoặc nhọn mở và đóng. Điều này nói rõ nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực - trong trường hợp này là nơi bắt đầu của đoạn văn.</li>
+ <li><strong>The closing tag (Thẻ đóng):</strong> Như "the opening tag", ngoại trừ nó bảo gồm dấu gạch chéo trước tên phần tử. Nơi này là nơi phần tử kết thúc - trong trường hợp này là nơi kết thúc của đoạn văn. Không có bao gồm thẻ đóng là lỗi phổ biến của người mới và nó cho ra kết quả khác thường.</li>
+ <li><strong>The content (Nội dung):</strong> Phần này là nội dung của phần tử, trong trường hợp này là chỉ có văn bản.</li>
+ <li><strong>The element:</strong> <strong>Thẻ Đóng + Thẻ Mở + Nội Dung = 1 Phần Tử</strong></li>
+</ol>
+
+<h3 id="Bắt_đầu_học_Tạo_cho_bạn_một_phần_tử_HTML_đầu_tiên">Bắt đầu học: Tạo cho bạn một phần tử HTML đầu tiên</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Chỉnh sử dòng bên dưới bên trong phần <em>Input</em> bằng cách đóng nó trong thẻ </span></font>&lt;em&gt;</code> và <code>&lt;/em&gt;</code> (đặt <code>&lt;em&gt;</code> trước nó để <em>mở phần tử</em>, và <code>&lt;/em&gt;</code> sau nó để <em>đóng phần tử</em>) — Hành động này sẽ hiện thỉ dòng bên dưới sáng chứ in nghiêng! Bạn có thể thấy sự thay đổi được thể hiện ngay trong phần <em>Output</em></p>
+
+<p>Nếu bạn làm sai, bạn có thể ấn nút <em>Reset</em>, nếu bạn thấy khó vãi ồi, ấn nút <em>Show solution</em> để xem câu trả lời.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&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="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>
+
+<pre class="brush: css notranslate">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>
+
+<pre class="brush: js notranslate">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>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Nesting_elements_Các_phần_tử_lồng_nhau">Nesting elements (Các phần tử lồng nhau)</h3>
+
+<p>Bạn cũng có thể để các elements trong các elements khác — và đó gọi là <strong>nesting</strong>. Nếu chúng ta muốn nói rằng con mèo của chúng ta <strong>rất</strong> cục cằn, chúng ta có thể gói từ "rất" trong {{htmlelement("strong")}} element ( tức là phần tử html strong), có nghĩa là từ này được nhấn mạnh:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Mèo của tôi &lt;strong&gt;rất&lt;/strong&gt; máu chó.&lt;/p&gt;</pre>
+
+<p>Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng đúng cách: trong ví dụ trên, chúng tôi đã mở phần tử <code>p</code> trước, sau đó là phần tử <code>strong</code>, do đó chúng tôi phải đóng phần tử <code>strong</code> trước, sau đó là phần <code>p</code>. Sau đây là không chính xác:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;Mèo của tôi &lt;strong&gt;rất cọc cằn.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Các elements phải mở và đóng một cách chính xác, vì vậy chúng cần phải rõ ràng là ở bên trong hay bên ngoài nhau. Nếu chúng trùng nhau như trên, thì trình duyệt web của bạn sẽ cố gắng đoán đúng nhất những gì bạn đang cố nói và bạn cũng có thể nhận được kết quả không như mong muốn. Vì vậy, đừng làm điều đó!</p>
+
+<h3 id="Phần_tử_dạng_khối_và_phần_tử_dạng_inline">Phần tử dạng khối và phần tử dạng inline </h3>
+
+<p>Có hai điều quan trọng của elements trong HTML mà bạn cần phải biết. Đó là <strong>block-level elements</strong> (phần tử cấp khối) và <strong>inline elements</strong> (nội phần tử). </p>
+
+<ul>
+ <li><strong>Block-level elements</strong> tạo thành một khối hiển thị trên một trang  — nó sẽ xuất hiện ở dòng mới từ bất cứ nội dung nào đã đứng trước nó và bất cứ nội dung nào đứng sau nó thì đều xuất hiện trên dòng mới. <strong>Block-level elements</strong> thường là các phần tử có cấu trúc ở trên trang mà nó hiện diện, ví dụ, paragraphs, lists, navigation menu.. Một <strong>block-level element</strong> không nên nằm bên trong một <strong>inline element, </strong>nhưng nó có thể được lồng bên trong một <strong>block-level element</strong> khác.  </li>
+ <li><strong>Inline elements</strong> là những elements được chứa trong các block-level elements và chỉ bao quanh các phần nhỏ của nội dung tập tin, không phải bao quanh cả paragraph hay các nhóm nội dung. Một inline element sẽ không khiến dòng mới xuất hiện trong tập tin; nó chỉ đởn giản là xuất hiện trong một paragraph, ví dụ một {{htmlelement("a")}} element (siêu liên kết) hoặc các phần tử nhấn mạnh như {{htmlelement("em")}} or {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Theo ví dụ dưới đây:</p>
+
+<pre class="brush: html notranslate">&lt;em&gt;thứ_nhất&lt;/em&gt;&lt;em&gt;thứ_hai&lt;/em&gt;&lt;em&gt;thứ_ba&lt;/em&gt;
+
+&lt;p&gt;thứ_tư&lt;/p&gt;&lt;p&gt;thứ_năm&lt;/p&gt;&lt;p&gt;thứ_sáu&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} là một inline element, như bạn có thể thấy bên trên, ba cái element đầu tiên nằm ở trên cùng một dòng và không có khoảng cách giữa chúng. Mặt khác, {{htmlelement("p")}} là một block-level element, nên mỗi element xuất hiện ở dòng mới với khoảng cách ở trên và bên dưới (khoảng cách là do <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> mặc định mà các trình duyệt có thể áp dụng cho các đoạn văn).</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Ghi Chú</strong>: HTML5 đã thiết lập lại các thể loại element trong HTML5: xem <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. Mặc dù các định nghĩa này chính xác hơn và ít mơ hồ hơn các định nghĩa trước đây, nhưng chúng phức tạp hơn nhiều so với "block" và "inline", vì vậy chúng ta sẽ gắn bó với chúng trong suốt chủ đề này.</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_phần_tử_không_chứa_nội_dung">Empty elements (phần tử không chứa nội dung)</h3>
+
+<p>Không phải mọi element đều tuân theo kiểu mẫu thẻ mở + nội dung + thẻ đóng. Một số element chỉ bao gồm một thẻ duy nhất, điều này thường được sử dụng để insert/embed một số thứ trong tập tin tại nơi mà nó được gắn vào. Ví dụ, {{htmlelement("img")}} element sẽ embeds một file ảnh vào trang, tại vị trí mà thẻ này được gắn:</p>
+
+<pre class="brush: html notranslate">&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="Thuộc_tính_Attributes">Thuộc tính (Attributes)</h2>
+
+<p>Các phần tử cũng có thể có attribute, nó trông như thế này:</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>Các attribute chứa các thông tin thêm về element, những thông tin mà bạn không muốn nó xuất hiện trong nội dung thực sự. Trong trường hợp này, attribute <code>class</code> cho phép bạn gán cho element một định danh mà định danh này sau đó sẽ được sử dụng để xác định element với thông tin về style và các thông tin khác.</p>
+
+<p>Một attribute nên có:</p>
+
+<ol>
+ <li>Một khoảng trống giữa nó và tên của element (hoặc trước attribute khác, nếu element đã có sẵn một hoặc nhiều attribute.)</li>
+ <li>Tên của attribute, theo sau là dấu "=".</li>
+ <li>Giá trị của của attribute, sẽ được bao bọc trong dấu nháy kép.</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_code2">Playable code2</h6>
+
+<pre class="brush: html notranslate">&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;A link to my favorite website.&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>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">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;A link to my &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;favorite website&lt;/a&gt;.&lt;/p&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>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Boolean_attributes">Boolean attributes</h3>
+
+<p>Đôi khi bạn sẽ thấy các attribute được viết ra mà không có giá trị - điều này hoàn toàn được chấp thuận. Chúng được gọi là các boolean attribute (attribute mang tính logic), và chúng chỉ có thể mang một giá trị, giá trị này thường sẽ chính là tên của attribute. Ví dụ, xét attribute {{htmlattrxref("disabled", "input")}}, bạn có thể gán attribute này vào các element &lt;input&gt; để quyết định việc chúng sẽ bị disabled (biến thành màu xám) từ đó người dùng không thể nhập bất kỳ dữ liệu nào vào chúng.</p>
+
+<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Để cho nhanh, nó hoàn toàn có thể được viết như sau đây (chúng tôi cũng bao gồm một phần tử input mà tại đó không có attribute disable để bạn so sánh):</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Cả 2 đều sẽ cho ra kết quả như sau:</p>
+
+<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Omitting_quotes_around_attribute_values">Omitting quotes around attribute values</h3>
+
+<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;favorite website&lt;/a&gt;</pre>
+
+<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</pre>
+
+<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p>
+
+<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p>
+
+<h3 id="Single_or_double_quotes">Single or double quotes?</h3>
+
+<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>You should however make sure you don't mix them together. The following will go wrong!</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>If you've used one type of quote in your HTML, you can include the other type of quote inside your attribute values without causing any problems:</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Tuy nhiên nếu bạn muốn bao gồm một dấu nháy bên trong một dấu nháy mà tại đó cả hai đều cùng một loại dấu nháy (hoặc cùng đơn hoặc cùng kép), bạn có thể dùng<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML"> HTML entities</a>. Ví dụ, đoạn code sau sẽ bị lỗi:</p>
+
+<pre class="example-bad brush: html notranslate">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>Nên bạn cần sửa lại như thế này:</p>
+
+<pre class="brush: html notranslate">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<h2 id="Cấu_trúc_một_tập_tin_HTML">Cấu trúc một tập tin HTML</h2>
+
+<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Here we have:</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: The doctype. Từ lâu lắm rồi, khi HTML mới được phát triển (khoảng tháng 2/1991), doctypes khi đó được dùng để thực thi như các liên kết đến một nhóm các nguyên tắc mà trang HTML cần phải tuần theo để được xem là một HTML tốt, điều này có nghĩa là việc kiểm tra lỗi tự động và nhiều thứ hữu ích khác. Nó từng trông giống như vầy:
+
+  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  Tuy nhiên, ngày nay không ai quan tâm đến chúng, và chúng chỉ còn là di vật lịch sử mà cần được thêm vào để mọi thứ hoạt động đúng. <code>&lt;!DOCTYPE html&gt;</code> là chuỗi ký tự ngắn nhất để cho biết rằng đây là một doctype hợp lệ; đó là tất cả những gì bạn cần biết.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: The {{htmlelement("html")}} element. Element này sẽ bao bọc mọi nội dung trên toàn bộ trang, và đôi khi được biết đến như là một root element.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: The {{htmlelement("head")}} element. Element này sẽ được thực thi như là một vùng chứa mọi thứ mà bạn muốn bao gồm trong trang HTML ở nơi mà <em>không phải</em> là nội dung bạn muốn hiện ra cho người xem trang. Nó bao gồm những thứ như các từ khóa và mô tả của trang mà bạn muốn xuất hiện trên kết quả tìm kiếm, CSS style, khai báo bộ mã ký tự (character set), và nhiều hơn nữa. Bạn sẽ học về điều này trong bài tiếp theo của chuỗi bài học.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: Element này sẽ thiết lập bảng mã kỹ tự (character set) mà tập tin của bạn nên sử dụng để UTF-8, bảng mã mà bao gồm số lượng lớn các ngôn ngữ viết của con người. Về cơ bản, nó hiện tại có thể xử lý mọi loại ngôn ngữ mà bạn đặt vào nó. Nên không có lý do gì để không thiết lập, và nó sẽ giúp bạn tránh rất nhiều vấn đề sau này.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: The {{htmlelement("body")}} element.<br>
+  Thẻ này chứa <em>tất cả</em> nội dung mà bạn muốn hiện ra cho người dùng web khi họ xem trang của bạn, dù nó là chữ, hình, video, games, playable audio tracks, hoặc bất kì thứ gì.</li>
+</ol>
+
+<h3 id="Active_learning_Adding_some_features_to_an_HTML_document">Active learning: Adding some features to an HTML document</h3>
+
+<p>If you want to experiment with writing some HTML on your local computer, you can:</p>
+
+<ol>
+ <li>Copy the HTML page example listed above.</li>
+ <li>Create a new file in your text editor.</li>
+ <li>Paste the code into the new text file.</li>
+ <li>Save the file as <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
+</div>
+
+<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p>
+
+<ul>
+ <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code>&lt;h1&gt;</code> opening tag and <code>&lt;/h1&gt;</code> closing tag.</li>
+ <li>Edit the paragraph content to include some text about something you are interested in.</li>
+ <li>Make any important words stand out in bold by wrapping them inside a <code>&lt;strong&gt;</code> opening tag and <code>&lt;/strong&gt;</code> closing tag</li>
+ <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li>
+ <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li>
+</ul>
+
+<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_code3">Playable code3</h6>
+
+<pre class="brush: html notranslate">&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>
+
+<pre class="brush: css notranslate">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>
+
+<pre class="brush: js notranslate">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 favorite 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>
+</div>
+
+<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 notranslate">&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>Trong HTML, các ký tự <code>&lt;</code>, <code>&gt;</code>, <code>"</code>, <code>'</code> và <code>&amp;</code> là những ký tự đặc biệt. Chúng là một phần của cú pháp HTML, vậy làm sao để bạn gắn kèm một trong những ký tự này vào văn bản của bạn, ví dụ, nếu bạn muốn sử dụng dấu và hoặc dấu bé, và không thể interpret nó dưới dạng code như một số trình duyệt có thể làm?</p>
+
+<p>Chúng ta cần phải sử dụng các tham chiếu ký tự - các đoạn mã đặc biệt đại diện cho các ký tự, và có thể được sử dụng trong những trường hợp phát sinh này. Mỗi ký tự tham chiếu được bắt đầu với một dấu và (&amp;), và kết thúc bởi chấm phẩy (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Ký tự thực sự</th>
+   <th scope="col">Ký tự tham chiếu tương đương</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 notranslate">&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>Ghi chú</strong>: Một bảng chưa tất cả tham chiếu ký tự HTML có thể được tìm thấy trên 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>.<br>
+ Lưu ý là bạn không cần phải sử dụng các tham chiếu ký tự cho mọi ký hiệu, vì các trình duyệt web hiện đại sẽ xử lý các ký hiệu khá tốt miễn là HTML's character encoding của bạn được thiết lập là UTF-8 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</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 notranslate">&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>
diff --git a/files/vi/learn/html/introduction_to_html/index.html b/files/vi/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..43fca0246b
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/index.html
@@ -0,0 +1,68 @@
+---
+title: Giới thiệu về HTML
+slug: Learn/HTML/Introduction_to_HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}
+<p class="summary">Về bản chất, {{glossary ("HTML")}} là một ngôn ngữ khá đơn giản được tạo nên từ các phần từ (<a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Element">elements</a>), dùng để phân biệt nội dung bên trong tài liệu (nội dung là một đoạn?  một danh sách tiết mục? thành phần cùa một bảng ?), phân chia một tài liệu thành những phần hợp lý (có tựa hay không? ba cột nội dung? một trình đơn điều hướng?) và những nội dung nhúng bên trong tài liệu như hình ảnh và video. Mô-đun này sẽ giới thiệu hai nguyên tắc đầu tiên, khái niệm cơ bản, và cú pháp cần biết để hiểu HTML.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô đun này, bạn không cần bất kỳ kiến ​​thức HTML nào trước đó, nhưng bạn nên có ít nhất sự quen thuộc cơ bản với việc sử dụng máy tính và sử dụng web một cách thụ động (nghĩa là chỉ cần nhìn vào nó, tiêu thụ nội dung). Bạn nên có môi trường làm việc cơ bản được thiết lập chi tiết trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> Cài đặt phần mềm cơ bản </a> và hiểu cách tạo và quản lý tệp, như được mô tả chi tiết trong <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> Xử lý các tệp </a> - cả hai đều là một phần của <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"> Bắt đầu với web </a> mô-đun hoàn thành của người mới bắt đầu.</p>
+
+<div class="note">
+<p><strong>Lưu ý : Nếu bạn đang làm việc trên máy tính / máy tính bảng / thiết bị khác nơi bạn không có khả năng tạo tệp của riêng mình, bạn có thể thử (phần lớn) các ví dụ mã trong một chương trình mã hóa trực tuyến như <a href="http://jsbin.com/"> JSBin </a> hoặc <a href="https://thimble.mozilla.org/"> Thimble </a>. </strong></p>
+</div>
+
+<h2 id="Hướng_dẫn"><strong>Hướng dẫn </strong></h2>
+
+<p>Mô-đun này chứa các bài viết sau, sẽ đưa bạn qua tất cả các lý thuyết cơ bản về HTML và cung cấp cơ hội phong phú cho bạn để kiểm tra một số kỹ năng.</p>
+
+<dl>
+ <dd><strong> </strong>
+
+ <dl>
+  <dt><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Bắt đầu với HTML </a>  </strong></dt>
+  <dd>Bao gồm các vấn đề cơ bản về HTML, để giúp bạn bắt đầu - chúng tôi xác định các yếu tố, thuộc tính, và tất cả các thuật ngữ quan trọng khác mà bạn có thể đã nghe và chỉ ra vị trí phù hợp của chúng trong ngôn ngữ. Chúng tôi cũng cho thấy một phần tử HTML được cấu trúc như thế nào, cách trang HTML điển hình được cấu trúc và giải thích các tính năng ngôn ngữ cơ bản quan trọng khác. Trên đường đi, chúng ta sẽ chơi với một số HTML, để giúp bạn có hứng thú!  </dd>
+  <dt><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Có gì trong head? Metadata trong HTML </a>  </strong></dt>
+  <dd>Phần <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Head">head</a> của một tập tin HTML là phần <strong>không</strong> hiển thị trong trình duyệt web khi trang được tải. Nó chứa các thông tin như {{htmlelement ("title")}} của trang, các đường dẫn liên kết đến {{glossary ("CSS")}} (nếu bạn muốn định dạng nội dung HTML của mình với CSS), các đường dẫn liên kết đến favicons tùy chỉnh, và metadata (là dữ liệu về HTML, chẳng hạn như người đã viết nó và các từ khóa quan trọng mô tả tập tin HTML).<strong>  </strong></dd>
+  <dt><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Nguyên tắc cơ bản về HTML </a>  </strong></strong></dt>
+  <dd>Một trong những công việc chính của HTML là đưa ra ý nghĩa cho văn bản (còn được gọi là <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Semantics">ngữ nghĩa</a>) để trình duyệt biết cách hiển thị chính xác. Bài viết này xem cách sử dụng HTML để phá vỡ một khối văn bản thành một cấu trúc của các tiêu đề và đoạn văn, thêm sự chú trọng / tầm quan trọng vào từ, tạo danh sách và hơn thế nữa.<strong>  </strong></dd>
+  <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Tạo siêu liên kết </a>  </strong></strong></strong></dt>
+  <dd>Các siêu liên kết thực sự quan trọng - đó là những gì làm cho web trở thành web. Bài viết này cho thấy cú pháp cần thiết để tạo liên kết, và thảo luận các phương pháp hay nhất liên kết.<strong>  </strong></dd>
+  <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Định dạng văn bản nâng cao </a>  </strong></strong></strong></dt>
+  <dd>Có nhiều yếu tố khác trong HTML để định dạng văn bản mà chúng tôi không tìm thấy trong bài viết <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>. Các elements ở đây ít được biết đến, nhưng vẫn hữu ích để biết về chúng. Tại đây, bạn sẽ tìm hiểu về cách đánh dấu các báo giá, danh sách mô tả, mã máy tính và các văn bản, chỉ số dưới và ký tự liên quan, thông tin liên hệ và hơn thế nữa.  </dd>
+  <dt><strong><strong><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Cấu trúc tài liệu và trang web </a>  </strong></strong></strong></dt>
+  <dd>Ngoài việc xác định các phần riêng lẻ của trang (chẳng hạn như "đoạn văn" hoặc "hình ảnh"), HTML cũng được sử dụng để xác định các khu vực của trang web của bạn (chẳng hạn như "tiêu đề", "menu điều hướng", " "cột nội dung chính".) Bài viết này xem cách lập kế hoạch cấu trúc trang web cơ bản và viết mã HTML để biểu thị cấu trúc này.<strong>  </strong></dd>
+  <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Gỡ lỗi HTML </a>  </dt>
+  <dt>Viết HTML là tốt, nhưng nếu một cái gì đó đang xảy ra sai, và bạn không thể tìm ra nơi mà các lỗi trong mã là? Bài viết này sẽ giới thiệu cho bạn một số công cụ có thể giúp bạn.
+  <h2 id="Đánh_giá">Đánh giá</h2>
+
+  <p>Các đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các vấn đề cơ bản về HTML được đề cập trong các hướng dẫn ở trên.</p>
+
+  <dl>
+   <dd>
+   <dl>
+    <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Đánh dấu thư </a>  </dt>
+    <dd>Tất cả chúng ta đều biết viết một lá thư sớm hay muộn; nó cũng là một ví dụ hữu ích để kiểm tra kỹ năng định dạng văn bản của chúng tôi! Vì vậy trong đánh giá này, bạn sẽ nhận được một lá thư để đánh dấu.  </dd>
+    <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Stablish_a_page_ofcontent">Cấu trúc một trang nội dung </a>  </dt>
+    <dt>Đánh giá này kiểm tra khả năng sử dụng HTML của bạn để cấu trúc một trang nội dung đơn giản, chứa tiêu đề, chân trang, trình đơn điều hướng, nội dung chính và thanh bên.
+    <h2 id="Xem_thêm">Xem thêm</h2>
+
+    <dl>
+     <dt>
+     <dl>
+      <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Kiến thức cơ bản về Web 1 </a>  </dt>
+      <dd>Khóa học về nền tảng Mozilla tuyệt vời khám phá và kiểm tra rất nhiều kỹ năng được đề cập trong mô-đun Giới thiệu về HTML . Học viên làm quen với việc đọc, viết và tham gia trên web trong mô-đun sáu phần này. Khám phá nền tảng của web thông qua sản xuất và hợp tác.</dd>
+     </dl>
+     </dt>
+    </dl>
+    </dt>
+   </dl>
+   </dd>
+  </dl>
+  </dt>
+ </dl>
+ </dd>
+</dl>
+</div>
diff --git a/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..e73feb86a2
--- /dev/null
+++ b/files/vi/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,285 @@
+---
+title: What’s in the head? Metadata in HTML
+slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">Phần {{glossary("Head", "head")}} của một tập tin HTML là bộ phận sẽ không hiển thị bên trong trình duyệt khi trang được tải. Nó chứa thông tin ví dụ như {{htmlelement("title")}} của trang, đường dẫn đến {{glossary("CSS")}} (nếu bạn chọn việc trang trí nội dung của bạn với CSS), liên kết đến các ảnh favicons tùy chỉnh, và các thông tin metadata khác (thông tin về HTML, ví dụ như tác giả, các từ khóa quan trọng mô tả tập tin). Trong bài viết này, chúng ta sẽ đi qua tất cả những thứ trên và thêm nhiều cái nữa, để giúp bạn có nền tảng tốt khi làm việc với HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Điều kiện tiên quyết:</th>
+   <td>Basic HTML familiarity, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Học về head của HTML, mục đích của nó, những mục quan trọng nhất cần thêm vào, và những ảnh hưởng của nó có thể có lên tập tin HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_head_là_gì">HTML head là gì?</h2>
+
+<p>Hãy xem lại ví dụ đơn giản <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML document we covered in the previous article</a>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>HTML head là những nội dung của element {{htmlelement("head")}} - không giống với nội dung của element {{htmlelement("body")}} (thứ mà được hiển thị trên trang khi được tải trong trình duyệt), nội dung của head không được hiển thị trên trang. Thay vào đó, công việc của head là chứa các siêu dữ liệu {{glossary("Metadata", "metadata")}} về tập tin. Trong ví dụ phía trên, head tương đối ít nội dung:</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;My test page&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>Tuy nhiên trong những trang lớn hơn, head có thể chứa rất nhiều nội dung. Thử đến xem một số website yêu thích của bạn và dùng <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> để kiểm tra các nội dung head của chúng. Mục tiêu của chúng ta ở đây không phải là chỉ ra cho bạn cách làm thế đặt mọi thứ có thể đặt vào trong head, mà là dạy cho bạn làm cách nào để sử dụng những element chính yếu mà bạn sẽ phải thêm vào head, và giúp bạn quen hơn với head. Hãy bắt đầu.</p>
+
+<h2 id="Thêm_title">Thêm title</h2>
+
+<p>Chúng ta đã được xem qua cách hoạt động của {{htmlelement("title")}} - nó có thể được dùng để thêm title vào tập tin. Điều này tuy nhiên có thể bị nhầm lẫn với element {{htmlelement("h1")}}, thứ mà được sử dụng để thêm vào một tiêu đề bao hàm cho toàn bộ nội dung của body - điều này đôi khi cũng được tham chiếu đến title của page. Nhưng chúng là 2 thứ khác nhau!</p>
+
+<ul>
+ <li>Phần tử {{htmlelement("h1")}} xuất hiện trên trang khi được tải trong trình duyệt - thường thì điều này chỉ nên được dùng một lần trên mỗi trang, để đánh dấu tiêu đề cho nội dung của trang của bạn (tiêu đề câu chuyện, hoặc tiêu đề tin tức, hoặc bất kỳ cái gì phù hợp với việc sử dụng của bạn).</li>
+ <li>Phần tử {{htmlelement("title")}} là metadata đại diện cho tiêu đề của cả tập tin HTML (không phải của nội dung tập tin.)</li>
+</ul>
+
+<h3 id="Active_learning_Inspecting_a_simple_example">Active learning: Inspecting a simple example</h3>
+
+<ol>
+ <li>To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>. To do this, either
+
+  <ol>
+   <li>Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.</li>
+   <li>Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's <em>File &gt; Save Page As...</em> menu and choose a sensible place to save the file.</li>
+  </ol>
+ </li>
+ <li>Now open the file in your browser. You should see something like this:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">It should now be completely obvious where the <code>&lt;h1&gt;</code> content appears, and where the <code>&lt;title&gt;</code> content appears!</p>
+ </li>
+ <li>You should also try opening the code up in your code editor, editing the contents of these elements, then refreshing the page in your browser. Have some fun with it.</li>
+</ol>
+
+<p>The <code>&lt;title&gt;</code> element contents are also used in other ways. For example, if you try bookmarking the page (<em>Bookmarks &gt; Bookmark This Page</em> or the star icon in the URL bar in Firefox), you will see the <code>&lt;title&gt;</code> contents filled in as the suggested bookmark name.</p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p>The <code>&lt;title&gt;</code> contents are also used in search results, as you'll see below.</p>
+
+<h2 id="Metadata_phần_tử_&lt;meta>">Metadata: phần tử &lt;meta&gt;</h2>
+
+<p>Metadata là dữ liệu dùng để mô tả dữ liệu, và HTML có một cách thức "chính thống" để thêm metadata vào một tập tin - phần từ {{htmlelement("meta")}}. Tất nhiên, các thứ khác mà chúng ta sẽ nói ngay sau đây trong bài viết này cũng có thể được hiểu như là metadata. Có rất nhiều loại phần tử <code>&lt;meta&gt;</code> khác nhau có thể được thêm vào bên trong phần head của trang của bạn, nhưng đừng cố gắng giải thích tất cả chúng ở giai đoạn này, vì nó sẽ rất rối rắm. Thay vào đó, chúng ta sẽ giải thích một vài thứ mà bạn có thể thường thấy, chỉ để bạn có được ý niệm.</p>
+
+<h3 id="Chỉ_định_bộ_mã_ký_tự_character_encoding_của_tập_tin">Chỉ định bộ mã ký tự (character encoding) của tập tin</h3>
+
+<p>Trong ví dụ chúng ta xem bên trên, dòng này đã được thêm vào:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Phần tử này đơn giản sẽ chỉ định kiểu mã hóa ký tự của tập tin - bảng mã ký tự mà tập tin được phép sử dụng. utf-8 là một bảng mã phổ biến toàn cầu mà nó bao gồm rất nhiều ký tự từ mọi ngôn ngữ của con người. Điều này có nghĩa là web page của bạn sẽ có khả năng xử lý việc hiển thị bất kỳ ngôn ngữ nào; vì thế bạn nên đặt nó trong mọi web page bạn tạo ra! Ví dụ, trang của bạn có thể xử lý cả tiếng Anh và tiếng Nhật đều được:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Nếu bạn thiết lập việc mã hóa ký tự character encoding là <code>ISO-8859-1</code>, ví dụ (bộ mã ký tự Latin), việc render page của bạn có thể bị hỏng:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Một số trình duyệt có thể tự động sửa lỗi encodings, nhưng bạn vẫn nên thiết lập <code>utf-8</code> trên page để tránh lỗi ở các trình duyệt khác.</p>
+</div>
+
+<h3 id="Active_learning_Experiment_with_character_encoding">Active learning: Experiment with character encoding</h3>
+
+<p>To try this out, revisit the simple HTML template you obtained in the previous section on <code>&lt;title&gt;</code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), try changing the meta charset value to <code>ISO-8859-1</code>, and add the Japanese to your page. This is the code we used:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="Thêm_thông_tin_tác_giả_và_mô_tả">Thêm thông tin tác giả và mô tả</h3>
+
+<p>Nhiều phần tử <code>&lt;meta&gt;</code> chứa thuộc tính <code>name </code>và <code>content</code>:</p>
+
+<ul>
+ <li><code>name</code> chỉ định kiểu loại của phần tử meta; loại thông tin nào mà nó chứa đựng.</li>
+ <li><code>content</code> chỉ định nội dung meta thật sự.</li>
+</ul>
+
+<p>Hai phần tử meta này hữu ích để gắn vào trang của bạn để xác định tác giả của trang, và cung cấp một mô tả chính xác cho trang. Xem ví dụ:</p>
+
+<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="The MDN Web Docs Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications."&gt;</pre>
+
+<p>Xác định cụ thể tác giả mang lại nhiều lợi ích: nó hữu ích để biết ai viết ra trang đó, nếu bạn có câu hỏi về nội dung và bạn muốn liên hệ với họ. Một số hệ quản trị nội dung có các chức năng để tự động kết xuất thông tin tác giả và làm nó khả dụng cho những mục đích như vậy.</p>
+
+<p>Xác định một mô tả cụ thể có bao gồm các từ khóa liên quan đến nội dung của trang sẽ hữu ích khi bạn muốn trang hiển thị cao hơn trong kết quả tiềm kiếm tương ứng. (such activities are termed <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, or {{glossary("SEO")}}.)</p>
+
+<h3 id="Active_learning_The_descriptions_use_in_search_engines">Active learning: The description's use in search engines</h3>
+
+<p>The description is also used on search engine result pages. Let's go through an exercise to explore this</p>
+
+<ol>
+ <li>Go to the <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li>
+ <li>View the page's source (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li>
+ <li>Find the description meta tag. It will look something like this (although it may change over time):
+  <pre class="brush: html">&lt;meta name="description" content="The MDN Web Docs site
+  provides information about Open Web technologies
+  including HTML, CSS, and APIs for both Web sites and
+  progressive web apps."&gt;</pre>
+ </li>
+ <li>Now search for "MDN Web Docs" in your favorite search engine (We used Google.) You'll notice the description <code>&lt;meta&gt;</code> and <code>&lt;title&gt;</code> element content used in the search result — definitely worth having!
+  <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Many <code>&lt;meta&gt;</code> features just aren't used any more. For example, the keyword <code>&lt;meta&gt;</code> element (<code>&lt;meta name="keywords" content="fill, in, your, keywords, here"&gt;</code>) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.</p>
+</div>
+
+<h3 id="Các_kiểu_metadata_khác">Các kiểu metadata khác</h3>
+
+<p>Khi bạn dạo vòng quanh trang web, bạn sẽ thấy những kiểu loại khác của metadata. Rất nhiều trong số những tính năng bạn sẽ thấy trên các website là sự sáng tạo độc quyền, được thiết kế để cung cấp cho những trang nhất định (như các trang social networking) với những mẫu thông tin nhỏ cụ thể mà họ có thể sử dụng.</p>
+
+<p>Ví dụ, <a href="http://ogp.me/">Open Graph Data</a> là giao thức metadata mà Facebook phát minh ra để cung cấp metadata phong phú hơn cho các website. Trong mã nguồn của MDN Web Dóc, bạn sẽ thấy thế này:</p>
+
+<pre class="brush: html">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>Một tác dụng của thứ này là khi bạn link đến MDN Web Docs trên facebook, đường dẫn sẽ xuất hiện kèm với một hình ảnh và mô tả: một trải nghiệm phong phú hơn cho các người dùng.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Twitter cũng có các metadata tương tự gọi là <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, which has a similar effect when the site's URL is displayed on twitter.com. For example:</p>
+
+<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Thêm_các_icon_tự_chọn_vào_site_của_bạn">Thêm các icon tự chọn vào site của bạn</h2>
+
+<p>Để làm phong phú hơn thiết kế cho trang của bạn, bạn có thể thêm các tham chiếu đến các icon tự chọn trong metadata của bạn, và chúng sẽ được hiển thị trong những văn bản nhất định. Phổ biến nhất là <strong>favicon</strong> (viết tắt của "favorite icon", đề cập đến việc nó dùng cho danh sách "favorite" hoặc "bookmarks" trong các trình duyệt).</p>
+
+<p>The humble favicon has been around for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You may see (depending on the browser) favicons displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.</p>
+
+<p>A favicon can be added to your page by:</p>
+
+<ol>
+ <li>Saving it in the same directory as the site's index page, saved in <code>.ico</code> format (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li>
+ <li>Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it:
+  <pre class="brush: html">&lt;link rel="icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>Here is an example of a favicon in a bookmarks panel:</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>There are lots of other icon types to consider these days as well. For example, you'll find this in the source code of the MDN Web Docs homepage:</p>
+
+<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p><img alt="" src="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"><img alt="" src="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png" style="height: 50px; width: 50px;">The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad's home screen.</p>
+
+<p>Don't worry too much about implementing all these types of icon right now — this is a fairly advanced feature, and you won't be expected to have knowledge of this to progress through the course. The main purpose here is to let you know what such things are, in case you come across them while browsing other websites' source code.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</p>
+</div>
+
+<h2 id="Áp_dụng_CSS_và_JavaScript_vào_HTML">Áp dụng CSS và JavaScript vào HTML</h2>
+
+<p>Just about all websites you'll use in the modern day will employ {{glossary("CSS")}} to make them look cool, and {{glossary("JavaScript")}} to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the {{htmlelement("link")}} element and the {{htmlelement("script")}} element, respectively.</p>
+
+<ul>
+ <li>
+  <p>Phần tử {{htmlelement("link")}} luôn luôn nằm trong phần head của tập tin. Nó có 2 thuộc tính, rel="stylesheet", ý chỉ rằng nó là stylesheet của tập tin, và href, chứa đường dẫn đến file stylesheet:</p>
+ </li>
+ <li>
+  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>Phần tử {{htmlelement("script")}} không nhất thiết phải ở trong head, thực tế, thường sẽ tốt hơn nếu đặt nó ở dưới cùng của body (trước thẻ đóng <code>&lt;/body&gt;</code>), để đảm bảo mọi nội dung HTML được trình duyệt đọc qua trước khi nó cố gắng áp dụng JavaScript cho nó (nếu JavaScript cố gắng truy cập đến phần tử mà vẫn chưa tồn tại, trình duyệt sẽ throw ra một lỗi.)</p>
+
+  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+
+  <p><strong>Note</strong>: The <code>&lt;script&gt;</code> element may look like an empty element, but it's not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <code>&lt;script&gt;</code> element.</p>
+ </li>
+</ul>
+
+<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3>
+
+<ol>
+ <li>To start this active learning, grab a copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> files, and save them on your local computer in the same directory. Make sure they are saved with the correct names and file extensions.</li>
+ <li>Open the HTML file in both your browser, and your text editor.</li>
+ <li>By following the information given above, add {{htmlelement("link")}} and {{htmlelement("script")}} elements to your HTML, so that your CSS and JavaScript are applied to your HTML.</li>
+</ol>
+
+<p>If done correctly, when you save your HTML and refresh your browser you should be able to see that things have changed:</p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>The JavaScript has added an empty list to the page. Now when you click anywhere on the list, a dialog box will pop up asking you to enter some text for a new list item. When you press the OK button, a new list item will be added to the list containing the text. When you click on an existing list item, a dialog box will pop up allowing you to change the item's text.</li>
+ <li>The CSS has caused the background to go green, and the text to become bigger. It has also styled some of the content that the JavaScript has added to the page (the red bar with the black border is the styling the CSS has added to the JS-generated list.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck in this exercise and can't get the CSS/JS to apply, try checking out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> example page.</p>
+</div>
+
+<h2 id="Thiết_lập_ngôn_ngữ_chính_của_tập_tin">Thiết lập ngôn ngữ chính của tập tin</h2>
+
+<p>Finally, it's worth mentioning that you can (and really should) set the language of your page. This can be done by adding the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> to the opening HTML tag (as seen in the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> and shown below.)</p>
+
+<pre class="brush: html">&lt;html lang="en-US"&gt;</pre>
+
+<p>Điều này rất có ích, tập tin HTML của bạn sẽ được index hiệu quả hơn trên các công cụ tìm kiếm nếu ngôn ngữ của nó được thiết lập (ví dụ, cho phép nó xuất hiện chính xác trong các kết quả yêu cầu ngôn ngữ cụ thể), và nó cũng hữu ích với những người có vấn đề về thị giác sử dụng chức năng đọc màn hình thành tiếng (ví dụ, từ "six" tồn tại cả trong tiếng Pháp và tiếng Anh, nhưng được phát âm khác nhau.)</p>
+
+<p>Bạn cũng có thể thiết lập các khu vực con của tập tin của bạn để nó được nhận diện với ngôn ngữ khác. For example, we could set our Japanese language section to be recognised as Japanese, like so:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="ja"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>These codes are defined by the <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standard. You can find more about them in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That marks the end of our quickfire tour of the HTML head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things you'll find in there for now! In the next article we'll be looking at HTML text fundamentals.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</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>
diff --git a/files/vi/learn/html/multimedia_and_embedding/index.html b/files/vi/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..3b40801d47
--- /dev/null
+++ b/files/vi/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,75 @@
+---
+title: Multimedia and embedding
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - iframes
+  - imagemaps
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary"></p>
+
+<p class="summary">Chúng ta đã xem xét rất nhiều văn bản trong khóa học cho đến nay, nhưng một trang web sẽ thực sự nhàm chán nếu chỉ sử dụng văn bản. Cùng bắt đầu tìm hiểu cách làm cho web trở nên sống động với nhiều nội dung thú vị hơn! Mô-dun này khám phá cách sử dụng HTML để đưa các nội dung đa phương tiện vào trong các trang web, bao gồm nhiều cách khác nhau mà hình ảnh có thể được đưa vào và cách thức để nhúng video, âm thanh và thậm chí toàn bộ trang web.</p>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô-dun này, bạn nên có kiến thức nhất định về những điều cơ bản của HTML, như đã trình bày trước đây trong phần <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. Nếu bạn chưa đi qua mô-dun này (hay những phần tương tự), hãy tìm hiểu qua nó trước, sau đó quay lại!</p>
+
+<div class="note">
+<p><strong>Lưu ý</strong>: Nếu bạn làm việc trên máy tính / máy tính bảng / thiết bị khác mà bạn không có khả năng tạo file của riêng bạn, bạn có thể thử (đa phần) các ví dụ code trong các chương trình code chẳng hạn như <a href="https://jsbin.com/">JSBin</a> hay <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<p>Mô-dun này bao gồm các bài viết sẽ đưa bạn đi qua tất cả những nguyên tắc cơ bản của việc nhúng đa phương tiện trên các trang web.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Hình ảnh trong HTML</a></dt>
+ <dd>Có nhiều loại hình đa phương tiện cần xem xét, nhưng hợp lý là bắt đầu với phần tử {{htmlelement("img")}} khiêm tốn được sử dụng để nhúng một hình ảnh đơn giản vào trong một trang web. Trong bài viết này chúng ta sẽ xem xét cách sử dụng nó sâu hơn, bao gồm cả những điều cơ bản, chú thích nó bằng cách sử dụng {{htmlelement("figure")}}, và cách nó liên quan đến hình nền CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Nội dung video và âm thanh</a></dt>
+ <dd>Tiếp theo, chúng ta xem xét làm cách nào  để sử dụng các nhân tố HTML5 {{htmlelement("video")}} và {{htmlelement("audio")}} để nhúng video và audio vào các trang web, bao gồm cả những điều cơ bản, cung cấp quyền truy cập vào các định dạng tệp cho các trình duyệt khác nhau , thêm chú thích và phụ đề cũng như cách thêm dự phòng cho các trình duyệt cũ hơn.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Từ &lt;object&gt; đến &lt;iframe&gt; — các công nghệ nhúng khác</a></dt>
+ <dd>Tại thời điểm này, chúng tôi muốn thực hiện một số bước khác, xem xét một số yếu tố cho phép bạn nhúng nhiều loại nội dung khác nhau vào các trang web của mình: các nhân tố {{htmlelement("iframe")}},{{htmlelement("embed")}} và {{htmlelement("object")}}. <code>&lt;iframe&gt; </code>là để nhúng các trang web khác, hai nhân tố còn lại cho phep bạn nhúng các file PDF, SVG hay thậm chí là Flash - một công nghệ đang được phát triển, nhưng bạn  vẫn có thể thấy nó bán thường xuyên.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Thêm đồ họa vector vào web</a></dt>
+ <dd>Đồ họa vector có thể rất hữu ích trong một số trường hợp nhất định. Không giống như các định dạng thông thường như PNG/JPG, chúng không làm biến dạng/vỡ điểm ảnh khi phóng to - chúng có thể vẫn mượt mà khi thu nhỏ. Bài viết này giới thiệu với bạn về đồ họa vector là gì và cách đưa định dạng  {{glossary("SVG")}} phổ biến trong các trang web.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Hình ảnh phản hồi</a></dt>
+ <dd>Hiện có nhiều các thiết bị khác nhau có thể truy cập vào Web - từ điện thoại di động đến các máy tính để bàn - một khái niệm cần thiết hiện tại đề là chủ được công nghệ web hiện đại đó là thiết kế đáp ứng. Điều này đề cập đến việc tạo ra các trang web có thể tự động thay đổi các tính năng của nó để phù hợp với các loại kích cỡ màn hình khác nhau, các độ phân giải khác nhau, v.v. Vấn đề này sẽ được đề cập chi tiết hơn trong mô đun CSS sau này, nhưng hiện tại chúng ta xem xét các công cụ HTML có sẵn để tạo ra các trang web đáp ứng, bao gồm các phần tử {{htmlelement("picture")}}.</dd>
+</dl>
+
+<h2 id="Đánh_giá">Đánh giá</h2>
+
+<p>Bài đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các khía niệm cơ bản về HTML được đề cập trong các hướng dẫn ở trên:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Trang giật gân Mozilla</a></dt>
+ <dd>Trong bài đánh giá này, chúng tôi sẽ kiểm tra kiến thức của bạn về các kỹ thuật được thảo luận trong mô đun này, giúp bạn thêm một số hình ảnh và video vào một trang giật gân thú vị về Mozilla!</dd>
+</dl>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Thêm một bản đồ trên đầu một hình ảnh</a></dt>
+ <dd>Bản đồ hình ảnh cung cấp một cơ chế để làm cho các  phần khác nhau của hình ảnh liên kết đến các địa điểm khác nhau (hãy nghĩ về một bản đồ liên kết đến thông tin thêm về mỗi quốc gia khác nhau mà bạn click vào). Kỹ thuật này đôi khi có thể hữu ích.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Kiến thức cơ bản về Web 2</a></dt>
+ <dd>
+ <p>Một điều tuyệt vời của khóa học nền tảng này của Modzilla là khám phá và kiểm tra một số kỹ năng được đề cập trong  mô đun <em>Đa phương tiện và nhúng  </em>này. Tìm hiểu sâu hơn về soạn thảo web, thiết kế khả năng truy cập, chia sẻ tài nguyên, sử dụng phương tiện trực tuyến, và làm việc mở (nghĩa là nội dung của bạn có sẵn và được người khác chia sẻ miễn phí).</p>
+
+
+ </dd>
+</dl>
diff --git a/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..23a21a7731
--- /dev/null
+++ b/files/vi/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,274 @@
+---
+title: Video and audio content
+slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Một khi đã cảm thấy tự tin làm việc với hình ảnh trên web, bước tiếp theo chúng ta học cách thêm video và audio player vào HTML! Trong bài viết này chúng ta sẽ học cách sử dụng thẻ {{htmlelement("video")}} và {{htmlelement("audio")}} ; cách thêm captions/subtitles vào trong video.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Cần nắm trước:</th>
+   <td>Kiến thức máy tính căn bản, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">biết cài đặt phần mềm</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">làm việc với file</a>, có nền tảng HTML (đã giới thiệu trong bài <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>) và <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Mục tiêu:</th>
+   <td>Học cách chèn video và audio vào web, thêm caption/subtitles.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_và_video_trên_web">Audio và video trên web</h2>
+
+<p>Web developer đã muốn sử dụng audio và video từ rất lâu, trước những năm 2000, khi chúng ta bắt đầu có mạng với băng thông lớn hơn, đủ đáp ứng nhiều loại video, (file video thường lớn hơn nhiều so với hình và text.) Trước đây, HTML không thể nhúng video và audio trên Web, trước đây chúng ta sử dụng những plugin như <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (sau đó là <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) để xử lý những nội dung dạng này. Các công nghệ này vướng phải nhiều vấn đề, như không tương thích tốt với HTML/CSS, lỗi bảo mật, và các vấn đề với accessibility.</p>
+
+<p>{{glossary("HTML5")}} specification đã bổ sung element {{htmlelement("video")}} và {{htmlelement("audio")}}, cùng với {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} để làm việc với 2 element này. Chúng ta không bàn về JavaScript ở đây — chỉ những phần cơ bản có thể với HTML.</p>
+
+<p>Chúng ta sử dụng <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">file audio và video ví dụ </a> để làm.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Trước khi bắt đầu, bạn cũng nên biết những trang {{glossary("OVP","OVPs")}} (online video providers) như <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, và <a href="https://vimeo.com/">Vimeo</a>, và online audio providers như <a href="https://soundcloud.com/">Soundcloud</a>. Dùng các dịch vụ này để host và hiển thijvideo sẽ đơn giản và tiện lợi hơn, không cần lo lắng về vấn đề băng thông, OVPs cũng thường có hổ trợ code để nhúng video/audio vào web.</p>
+</div>
+
+<h3 id="Thẻ_&lt;video>">Thẻ &lt;video&gt;</h3>
+
+<p>Ví dụ cách sử dụng thẻ {{htmlelement("video")}}:</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Trình duyệt không hổ trợ HTML5 video. Đây là &lt;a href="rabbit320.webm"&gt;link đến file video&lt;/a&gt;&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p> </p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>Tương tự như src của {{htmlelement("img")}}, attribute <code>src</code> chứa đường dẫn đến file video muốn nhúng.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd><code>controls</code> cho phép sử dụng giao diện điều khiển trình chiếu video của trình duyệt, hoặc tự build một giao diện bằng <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Căn bản nhất, giao diện sẽ có nút start và stop, điều chỉnh âm lượng.</dd>
+ <dt>Thẻ paragraph trong <code>&lt;video&gt;</code></dt>
+ <dd>Gọi là <strong>fallback content</strong> — nó sẽ hiện thị nếu trình duyệt không hổ trợ thẻ <code>&lt;video&gt;</code> , cho phép chúng ta hiển thị fallback nếu user đang dùng trình duyệt cũ.</dd>
+</dl>
+
+<p>Video nhúng sẽ được hiển thị như sau:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Dùng <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">thử ví dụ trực tiếp</a> ở đây (xem <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p>
+
+<h3 id="Hổ_trợ_nhiều_loại_formats">Hổ trợ nhiều loại formats</h3>
+
+<p>Có một vấn đề với ví dụ ở trên, nếu mở bằng Safari hoặc Internet Explorer. Video sẽ không phát! Bởi vì mỗi trình duyệt chỉ hỗ trợ kiểu video và audio nhất định.</p>
+
+<p>Những định dạng MP3, MP4 và WebM được gọi là <strong>container formats</strong>. nó sẽ chứa nhiều phần khác nhau tạo thành một bài hát hoặc video — chằng hạn như video track, audio track, và metadata để diễn giải nội dung file media.</p>
+
+<p>Audio và video track cũng có nhiều định dạng khác nhau, ví dụ:</p>
+
+<ul>
+ <li>WebM container thường bao gồm Ogg Vorbis audio với VP8/VP9 video. Được hổ trợ chủ yếu bởi Firefox và Chrome.</li>
+ <li>MP4 container thường bao gồm AAC hoặc MP3 audio với H.264 video. Được hổ trợ chủ yếu bởi Internet Explorer và Safari.</li>
+ <li>Ogg container (đã cũ) thường có Ogg Vorbis audio và Ogg Theora video. Được hổ trợ chủ yếu bởi Firefox và Chrome, bị xóa sổ bởi định dạng WebM cho chất lượng âm thanh hình ảnh tốt hơn.</li>
+</ul>
+
+<p>Audio player thường phát audio track trực tiếp, e.g. an MP3 hoặc Ogg . Nó không cần container.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Vấn đề này không hề đơn giản, nếu bạn xem qua bảng<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility </a>. Thêm nữa, nhiều trình duyệt trên mobile có thể phát unsupported format bằng việc sử dụng trình phát của hệ thống, không thông qua trình duyệt.</p>
+</div>
+
+<p>Trình duyệt sử dụng những bộ <strong>{{Glossary("Codec","Codecs")}} </strong>khác nhau, như Vorbis hoặc H.264. Như đã đề cập ở trên, trình duyệt lại không hổ trợ toàn bộ codec, vì vậy bạn phải cung cấp nhiều định dạng khác nhau. Nếu thiếu bộ codec đúng để giải mã, nó sẽ không phát.</p>
+
+<p>Xem ví dụ bên dưới để biết cách làm <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ví dụ được cập nhập ở đây</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">thử bản trực tiếp ở đây</a>):</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Trình duyệt không hổ trợ HTML5 video. Đây là &lt;a href="rabbit320.webm"&gt;link đến file video&lt;/a&gt;&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Bằng cách này trình duyệt sẽ tìm đến file mà nó có codec để giả mã trong danh sách file được liệt kê trong thẻ <code>source</code>. WebM và MP4 là có thể xem được ở hầu hết các trình duyệt hiện tại.</p>
+
+<p>Trên mỗi thẻ <code>&lt;source&gt;</code> có attribute <code>type</code> . Cái này không bắt buộc, nhưng nên làm — nó chứa thông tin {{glossary("MIME type","MIME types")}} của video, trình duyệt khi đọc qua nó sẽ biết ngay có giải mã được video kiểu này không. Nếu không thêm attribute này, trình duyệt sẽ load và thử phát từng file đến khi nào thấy được, nó sẽ tiêu tốn nhiều thời gian và tài nguyên hơn.</p>
+
+<h3 id="Các_tính_năng_khác_của_&lt;video>">Các tính năng khác của &lt;video&gt;</h3>
+
+<p>Có một số tính năng khác bao gồm trong thẻ video của HTML5. Xem ví dụ bên dưới:</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+ &lt;p&gt;Trình duyệt không hổ trợ HTML5 video. Đây là &lt;a href="rabbit320.webm"&gt;link đến file video&lt;/a&gt;&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Nó sẽ cho ra kết quả như thế này trên trình duyệt:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Những tính này bao gồm:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} và {{htmlattrxref("height","video")}}</dt>
+ <dd>Cho phép tinh chỉnh kích thước bằng atttribute hoặc bằng {{Glossary("CSS")}}. Trong cả 2 trường hợp, video luôn giữ nguyên tỉ lệ chiều cao-chiều rộng của nó — thường gọi là <strong>aspect ratio</strong>. Nếu không đưa đúng giá trị cao và rộng đảm bảo aspect ratio, video sẽ phủ hết chiều ngang, phần chiều rộng bị thiếu hoặc dư sẽ hiển thị bằng màu nền mặc định.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Attribute cho phép audio hoặc video phát ngay lập tức trong khi các phần khác của trang tiếp tục được load. Khuyến khích không nên dùng tính năng này, users sẽ cảm thấy khá khó chịu.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Cho phép video audio lặp lại khi kết thúc</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Bật mặc định tắt tiếng</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>Truyền vào url của hình, được hiển thị thay cho video trước khi phát.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Được dùng để bật tính năng buffer nếu file lớn. Truyền vào 1 trong 3 giá trị:</p>
+
+ <ul>
+  <li><code>"none"</code> tắt buffer</li>
+  <li><code>"auto"</code> tự động buffer nếu file lớn</li>
+  <li><code>"metadata"</code> chỉ buffer những thông tin meta data</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Ví dụ này có thể <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">phát trực tiếp trên Github</a> (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">xem source code</a>.) Để ý, trong ví dụ không đặt thuộc tính <code>autoplay</code> — nếu video tự động phát ngay khi được load, chúng ta sẽ không thấy poster!</p>
+
+<h3 id="Thẻ_&lt;audio>">Thẻ &lt;audio&gt;</h3>
+
+<p>Thẻ {{htmlelement("audio")}} hoạt động tương tự như thẻ {{htmlelement("video")}}:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Kết quả hiển thị trên trình duyệt</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Bạn có thể <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">xem demo trực tiếp</a> trên Github (xem <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">source code</a>.)</p>
+</div>
+
+<p>Một vài điểm khác so với video:</p>
+
+<ul>
+ <li>Thẻ {{htmlelement("audio")}} không hổ trợ attribute <code>width</code>/<code>height</code></li>
+ <li>Cũng không hổ trợ attribute <code>poster</code>.</li>
+</ul>
+
+<h2 id="Hiển_thị_Text_track_cho_video">Hiển thị Text track cho video</h2>
+
+<p>Chúng ta nói thêm về một khái niệm hơi phức tạp hơn nhưng rất hữu ích. Đa phần user không đủ kiên nhẫn đễ đợi audio/video nếu quá lâu. Và một số trường hợp khác:</p>
+
+<ul>
+ <li>Không có thiết bị để phát âm thanh, người khuyết tật không thể nghe được.</li>
+ <li>Không nghe rõ vì môi trường xung quanh quá ồn, hoặc không muốn gây ra âm thanh ví dụ như đang ngồi trong thư viện</li>
+ <li>User có thể không hiểu ngôn ngữ đang phát, nhưng họ có thể đọc hiểu được.</li>
+</ul>
+
+<p>Với HTML5 video chúng ta có thể cung cấp đoạn text cho phần âm thanh đang phát, với định dạng <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> và thẻ {{htmlelement("track")}} .</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: "Transcribe" và "transcript" nghĩ là viết lại thành văn bản cho phần âm thanh.</p>
+</div>
+
+<p>WebVTT là định dạng cho phép viết text dạng nhiều dòng bên trong metadata, thời gian đoạn text xuất hiện trong video, thậm chí styling/position. Đoạn text này gọi là <strong>cues</strong>, các trường hợp sử dụng thường thấy:</p>
+
+<dl>
+ <dt>subtitle</dt>
+ <dd>Dịch thuật</dd>
+ <dt>caption</dt>
+ <dd>Đồng bộ phần transcription với thoại, hoặc diễn giải phần âm thanh đang phát.</dd>
+ <dt>timed description</dt>
+ <dd>Hiển thị text cho người không thể nghe được.</dd>
+</dl>
+
+<p>File WebVTT sẽ như thế này:</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>Để hiển thị cùng khi đang phát, bạn cần:</p>
+
+<ol>
+ <li>Lưu với định dạng <code>.vtt</code>.</li>
+ <li>Link đến file <code>.vtt</code> bằng thẻ {{htmlelement("track")}}. <code>&lt;track&gt;</code> phải đặt trong thẻ <code>&lt;audio&gt;</code> hoặc <code>&lt;video&gt;</code>, sau tất cả thẻ <code>&lt;source&gt;</code>. Sử dụng attribute {{htmlattrxref("kind","track")}} để xác định cái cue là <code>subtitles</code>, <code>captions</code>, hay <code>descriptions</code>. Thêm nữa, sử dụng {{htmlattrxref("srclang","track")}} để nói với trình duyệt ngôn ngữ đang sử dụng trong subtitle.</li>
+</ol>
+
+<p>Ví dụ:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Kết quả sẽ như thế này:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Để biết thêm chi tiết, đọc thêm <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Bạn có thể <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">xem ví dụ</a> dùng trong bài viết này trên Github, tác giả Ian Devlin (xem <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a>.). Để ý có thể tắt/mở subtitle bằng cách click nút "CC" và tùy chọn ngôn ngữ — English, Deutsch, hoặc Español.</p>
+
+<div class="note">
+<p><strong>Ghi chú</strong>: Text track cùng đồng thời hổ trợ {{glossary("SEO")}}, bởi vì các máy tìm kiếm luôn đọc text.</p>
+</div>
+
+<h3 id="Hãy_học_một_cách_chủ_động_tự_nhúng_video_và_audio">Hãy học một cách chủ động: tự nhúng video và audio</h3>
+
+<p>Bạn có thể dùng <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">file audio/video ví dụ</a> để tự thực hành.</p>
+
+<p>Chỉ dẫn:</p>
+
+<ol>
+ <li>Lưu file audio/video vào một thư mục mới.</li>
+ <li>Tạo một file HTML mới trong cùng thư mục này, đặt là <code>index.html</code>.</li>
+ <li>Thêm thẻ <code>&lt;audio&gt;</code> và <code>&lt;video&gt;</code> vào trang; để xem kết quả hiển thị bằng trình phát mặc định của trình duyệt.</li>
+ <li>Đưa đường link vào thẻ <code>&lt;source&gt;</code>. Nhớ khai báo <code>type</code>.</li>
+ <li>Với thẻ <code>&lt;video&gt;</code> khai báo attribute poster.</li>
+</ol>
+
+<h2 id="Xem_thêm_các_tài_liệu_tham_khảo_khác">Xem thêm các tài liệu tham khảo khác</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
+ <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="Trong_loạt_bài_này">Trong loạt bài này</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/vi/learn/html/tables/index.html b/files/vi/learn/html/tables/index.html
new file mode 100644
index 0000000000..84e53983e9
--- /dev/null
+++ b/files/vi/learn/html/tables/index.html
@@ -0,0 +1,60 @@
+---
+title: HTML Tables
+slug: Learn/HTML/Tables
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Một tác vụ rất phổ biến trong HTML đó là cấu trúc dữ liệu dạng bảng, và nó có một số phần tử và thuộc tính chỉ cho mục đích này. Kết hợp với một chút <a href="/en-US/docs/Learn/CSS">CSS </a>để tạo kiểu, HTML giúp dễ dàng hiển thị các bảng thông tin trên web chẳng hạn như kế hoạch giảng dạy của trường, thời gian biểu tại bể bơi địa phương hoặc số liệu thống kê về đội khủng long hay bóng đá yêu thích của bạn. Mô-đun này đưa bạn đi qua tất cả những điều bạn cần biết về cấu trúc dữ liệu dạng bảng sử dụng HTML.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="Muốn_trở_thành_một_nhà_phát_triển_web_front-end">Muốn trở thành một nhà phát triển web front-end?</h3>
+
+<p>Chúng tôi đã tập hợp một khóa học bao gồm tất cả những thông tin cần thiết bạn cần để chinh phục mục tiêu của bạn.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<h2 id="Điều_kiện_tiên_quyết">Điều kiện tiên quyết</h2>
+
+<p>Trước khi bắt đầu mô-đun này, bạn cần có những hiểu biết cơ bản về HTML - hãy xem <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Hướng_dẫn">Hướng dẫn</h2>
+
+<p>Mô-đun này chứa các bài viết sau:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Những điều cơ bản về bảng HTML</a></dt>
+ <dd>Bài viết này đưa bạn bắt đầu với các bảng HTML, bao gồm những điều rất cơ bản chẳng hạn như các hàng và cột, tiêu đề, làm cho các ô mở rộng nhiều hàng và cột, và cách nhóm tất cả các ô khac nhau trong một cột cho mục đích tạo kiểu.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Các tính năng và khả năng truy cập nâng cao của bảng HTML </a></dt>
+ <dd>Mô-đun này xem xét một vài tính năng nâng cao hơn của bảng HTML - chẳng hạn như chú thích / tóm tắt và nhóm các hàng của bạn thành các tiêu đề bảng, phần thân và phần chân trang - cũng như xem xét khả năng truy cập của bảng cho người dùng khiếm thị.</dd>
+</dl>
+
+<h2 id="Đánh_giá">Đánh giá</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Cấu trúc dữ liệu hành tinh</a></dt>
+ <dd>Trong phần đánh giá bảng của chúng tôi, chúng tôi cung cấp cho bạn một số dữ liệu về các hành tinh trong hệ mặt trời và giúp bạn cấu trục nó thành một bảng HTML.</dd>
+</dl>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1555px; left: 50px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>