diff options
Diffstat (limited to 'files/vi/web/html/element')
| -rw-r--r-- | files/vi/web/html/element/center/index.html | 55 | ||||
| -rw-r--r-- | files/vi/web/html/element/dialog/index.html | 163 | ||||
| -rw-r--r-- | files/vi/web/html/element/em/index.html | 122 | ||||
| -rw-r--r-- | files/vi/web/html/element/header/index.html | 142 | ||||
| -rw-r--r-- | files/vi/web/html/element/html/index.html | 109 | ||||
| -rw-r--r-- | files/vi/web/html/element/index.html | 86 | ||||
| -rw-r--r-- | files/vi/web/html/element/meta/index.html | 441 | ||||
| -rw-r--r-- | files/vi/web/html/element/span/index.html | 122 |
8 files changed, 1240 insertions, 0 deletions
diff --git a/files/vi/web/html/element/center/index.html b/files/vi/web/html/element/center/index.html new file mode 100644 index 0000000000..8303b88549 --- /dev/null +++ b/files/vi/web/html/element/center/index.html @@ -0,0 +1,55 @@ +--- +title: '<center>: The Centered Text element (obsolete)' +slug: Web/HTML/Element/center +translation_of: Web/HTML/Element/center +--- +<div>{{obsolete_header}}</div> + +<p><span class="seoSummary"><strong>Phần tử trung tâm HTML</strong> lỗi thời ( <strong><code><center></code></strong>) là <a href="/en-US/docs/HTML/Block-level_elements" title="HTML / Block-level_elements">phần tử cấp</a> khối hiển thị nội dung cấp khối hoặc nội dòng được căn giữa theo chiều ngang bên trong phần tử chứa nó. </span>Vùng chứa thường là, nhưng không bắt buộc, {{HTMLElement ("body")}}.</p> + +<p>Thẻ này đã không được chấp nhận trong HTML 4 (và XHTML 1) vì thuộc tính <a href="/en-US/docs/Web/CSS" title="/ en-US / docs / Web / CSS">CSS</a> {{Cssxref("text-align")}}, có thể được áp dụng cho phần tử {{HTMLElement ("div")}} hoặc cho một cá nhân {{HTMLElement("p")}}. Đối với các khối căn giữa, hãy sử dụng các thuộc tính CSS khác như {{Cssxref ("margin-left")}} và {{Cssxref ("margin-right")}} và đặt chúng thành <code>auto</code>(hoặc đặt {{Cssxref ("margin")}} đến <code>0 auto</code>).</p> + +<h2 id="Giao_diện_DOM">Giao diện DOM</h2> + +<p>Phần tử này thực hiện giao diện {{domxref ("HTMLElement")}}.</p> + +<div class="note"> +<p><strong>Lưu ý triển khai:</strong> bao gồm cả Gecko 1.9.2, Firefox triển khai giao diện {{domxref("HTMLSpanElement")}} cho phần tử này.</p> +</div> + +<h2 id="ví_dụ_1">ví dụ 1</h2> + +<pre class="brush: html notranslate"><center> Văn bản này sẽ được căn giữa. +<p> Đoạn này cũng vậy. </p> </center> +</pre> + +<h2 id="Ví_dụ_2_CSS_thay_thế">Ví dụ 2 (CSS thay thế)</h2> + +<pre class="brush: html notranslate"><div style = "text-align: center"> Văn bản này sẽ được căn giữa. +<p> Đoạn này cũng vậy. </p> </div> +</pre> + +<h2 id="Ví_dụ_3_CSS_thay_thế">Ví dụ 3 (CSS thay thế)</h2> + +<pre class="brush: html notranslate"><p style = "text-align: center"> Dòng này sẽ được căn giữa. <br> +Và dòng này cũng vậy. </p> +</pre> + +<h2 id="Ghi_chú">Ghi chú</h2> + +<p>Việc áp dụng {{Cssxref ("text-align")}} <code>:center</code>cho phần tử {{HTMLElement("div")}} hoặc {{HTMLElement("p")}} sẽ căn giữa <em>nội dung</em> của các phần tử đó trong khi giữ nguyên kích thước tổng thể của chúng.</p> + +<h2 id="Tính_tương_thích_của_trình_duyệt_web">Tính tương thích của trình duyệt web</h2> + +<div class="hidden">Bảng tương thích trong trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp vào dữ liệu, vui lòng xem <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi yêu cầu kéo cho chúng tôi.</div> + +<p>{{Compat("html.elements.center")}}</p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("hiển thị")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/vi/web/html/element/dialog/index.html b/files/vi/web/html/element/dialog/index.html new file mode 100644 index 0000000000..d6d63404b4 --- /dev/null +++ b/files/vi/web/html/element/dialog/index.html @@ -0,0 +1,163 @@ +--- +title: '<dialog>: Phần tử Hộp thoại' +slug: Web/HTML/Element/dialog +tags: + - Dialog + - HTML + - Hộp thoại + - Phần tử + - Phần tử HTML tương tác được + - Tham khảo + - Thử nghiệm + - Web +translation_of: Web/HTML/Element/dialog +--- +<p><strong>Phần tử HTML</strong> <code><dialog></code> đại diện cho một hộp thoại hoặc một component tương tác được, chẳng hạn như giao diện cửa sổ hoặc khảo sát.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Loại nội dung</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td> + </tr> + <tr> + <th scope="row">Nội dung cho phép</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td> + </tr> + <tr> + <th scope="row">Thẻ được phép bỏ</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Thẻ cha cho phép</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">ARIA role cho phép</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">Giao diện lập trình DOM</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Thuộc_tính">Thuộc tính</h2> + +<p>Phần tử này có các <a href="/en-US/docs/Web/HTML/Global_attributes">thuộc tính chung</a>. Thuộc tính <code>tabindex</code> không được phép sử dụng với phần tử <code><dialog></code>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Cho biết hộp thoại có được kích hoạt và sẵn sàng tương tác hay không. Khi thuộc tính open này không được bật (không có trong thẻ), hộp thoại sẽ không hiện ra cho người dùng.</dd> +</dl> + +<h2 id="Lưu_ý_khi_sử_dụng">Lưu ý khi sử dụng</h2> + +<ul> + <li>Phần tử <code><form></code> có thể được tính hợp với dialog bằng cách thêm thuộc tính <code>method="dialog"</code> tại <code><form></code> bên trong. Khi form được gửi đi, hộp thoại sẽ đóng lại với <code>returnValue</code> là giá trị <code>value</code> của nút submit được bấm.</li> + <li>CSS pseudo-element {{cssxref('::backdrop')}} là một phần tử giả phía sau hộp thoại dùng để che đi hoặc làm mờ nội dung bên dưới khi mà hộp thoại đang hiện ra. Backdrop chỉ được hiển thị khi phần tử dialog được hiện với <code>dialog.showModal()</code>.</li> +</ul> + +<h2 id="Ví_dụ">Ví dụ</h2> + +<h3 id="Ví_dụ_đơn_giản">Ví dụ đơn giản</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Ví_dụ_nâng_cao">Ví dụ nâng cao</h3> + +<p>Trong ví dụ này, một hộp thoại sẽ hiện ra với một form bên trong khi mà nút "Update details" được bấm.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Simple pop-up dialog box containing a form --> +<dialog id="favDialog"> + <form method="dialog"> + <p><label>Favorite animal: + <select> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select> + </label></p> + <menu> + <button>Cancel</button> + <button>Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">(function() { + var updateButton = document.getElementById('updateDetails'); + var favDialog = document.getElementById('favDialog'); + + // “Update details” button opens the <dialog> modally + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); +})(); +</pre> + +<h3 id="Kết_quả_nhận_được">Kết quả nhận được</h3> + +<p>{{EmbedLiveSample("Ví_dụ_nâng_cao", "100%", 300)}}</p> + +<p>Nút submit nào được bấm có thể được xác định với <a href="/en-US/docs/Web/API/HTMLDialogElement/returnValue">returnValue</a> của <code>favDialog</code>.</p> + +<h2 id="Đặc_tả">Đặc tả</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Đặc tả</th> + <th scope="col">Trạng thái</th> + <th scope="col">Ghi chú</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Định nghĩa ban đầu.</td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_hỗ_trợ">Trình duyệt hỗ trợ</h2> + + + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Dùng polyfill sau để hỗ trợ <code><dialog></code> cho các trình duyệt cũ:</p> + +<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>Sự kiện {{event("close")}}</li> + <li>Sự kiện {{event("cancel")}}</li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">Hướng dẫn HTML form</a>.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/vi/web/html/element/em/index.html b/files/vi/web/html/element/em/index.html new file mode 100644 index 0000000000..3f52dea31a --- /dev/null +++ b/files/vi/web/html/element/em/index.html @@ -0,0 +1,122 @@ +--- +title: '<em>: The Emphasis element' +slug: Web/HTML/Element/em +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><em></code> element</strong> marks text that has stress emphasis. The <code><em></code> element can be nested, with each level of nesting indicating a greater degree of emphasis.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>The <code><em></code> element is for words that have a stressed emphasis compared to surrounding text, which is often limited to a word or words of a sentence and affects the meaning of the sentence itself.</p> + +<p>Typically this element is displayed in italic type. However, it should not be used simply to apply italic styling; use the CSS {{cssxref("font-style")}} property for that purpose. Use the {{HTMLElement("cite")}} element to mark the title of a work (book, play, song, etc.). Use the {{HTMLElement("i")}} element to mark text that is in an alternate tone or mood, which covers many common situations for italics such as scientific names or words in other languages. Use the {{HTMLElement("strong")}} element to mark text that has greater importance than surrounding text.</p> + +<h3 id="<i>_vs._<em>"><i> vs. <em></h3> + +<p>New developers are often confused at seeing multiple elements that produce similar results. <code><em></code> and <code><i></code> are a common example, since they both italicize text. What's the difference? Which should you use?</p> + +<p>By default, the visual result is the same. However, the semantic meaning is different. The <code><em></code> element represents stress emphasis of its contents, while the <code><i></code> element represents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <code><cite></code>.)</p> + +<p>This means the right one to use depends on the situation. Neither is for purely decorational purposes, that's what CSS styling is for.</p> + +<p>An example for <code><em></code> could be: "Just <em>do</em> it already!", or: "We <em>had</em> to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.</p> + +<p>An example for <code><i></code> could be: "The <em>Queen Mary</em> sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named<em> Queen Mary</em>. Another example for <code><i></code> could be: "The word <em>the</em> is an article".</p> + +<h2 id="Example">Example</h2> + +<p>The <code><em></code> element is often used to indicate an implicit or explicit contrast.</p> + +<pre class="brush: html notranslate"><p> + In HTML 5, what was previously called + <em>block-level</em> content is now called + <em>flow</em> content. +</p></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Trình_duyệt_tương_thích">Trình duyệt tương thích</h2> + + + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="Xem_thêm">Xem thêm</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> diff --git a/files/vi/web/html/element/header/index.html b/files/vi/web/html/element/header/index.html new file mode 100644 index 0000000000..6b3f3a7ecc --- /dev/null +++ b/files/vi/web/html/element/header/index.html @@ -0,0 +1,142 @@ +--- +title: <header> +slug: Web/HTML/Element/header +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><header></code> element</strong> represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, and so on.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, but with no <code><header></code> or {{HTMLElement("footer")}} descendant.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that a <code><header></code> element must not be a descendant of an {{HTMLElement("address")}}, {{HTMLElement("footer")}} or another {{HTMLElement("header")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>The <code><header></code> element is not sectioning content and therefore does not introduce a new section in the <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">outline</a>. That said, a <code>header</code> element is intended to usually contain the surrounding <code>section</code>'s heading (an <code>h1</code>–<code>h6</code> element), but this is <strong>not</strong> required.</p> + +<h2 id="Attributes">Attributes</h2> + +<p>This element only includes the <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><header> + <h1>Main Page Title</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> +</pre> + +<h1 id="Main_Page_Title">Main Page Title</h1> + +<h2 id="sect1"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></h2> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}.</li> + <li class="last"><a class="deki-ns current" href="/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of a HTML5 document</a>.</li> +</ul> diff --git a/files/vi/web/html/element/html/index.html b/files/vi/web/html/element/html/index.html new file mode 100644 index 0000000000..8609afe4a2 --- /dev/null +++ b/files/vi/web/html/element/html/index.html @@ -0,0 +1,109 @@ +--- +title: <html> +slug: Web/HTML/Element/html +tags: + - HTML + - Phần tử + - Phần tử gốc HTML + - Tài liệu tham khảo + - Web +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p>The <strong>HTML <code><html></code> element</strong> represents the root (top-level element) of an HTML document, so it is also referred to as the <em>root element</em>. All other elements must be descendants of this element.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>None.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>One {{HTMLElement("head")}} element, followed by one {{HTMLElement("body")}} element.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>The start tag may be omitted if the first thing inside the <code><html></code> element is not a comment.<br> + The end tag may be omitted if the <code><html></code> element is not immediately followed by a comment, and it contains a {{HTMLElement("body")}} element either that is not empty or whose start tag is present.</td> + </tr> + <tr> + <th>Perimitted parents</th> + <td>As the root element of a document, or wherever a subdocument fragment is allowed in a compound document.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Specifies the URI of a resource manifest indicating resources that should be cached locally. See <a href="/en-US/docs/Web/HTML/Using_the_application_cache">Using the application cache</a> for details.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Specifies the version of the HTML {{glossary("DTD", "Document Type Definition")}} that governs the current document. This attribute is not needed, because it is redundant with the version information in the document type declaration.</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd>Specifies the XML Namespace of the document. Default value is <code>"http://www.w3.org/1999/xhtml"</code>. This is required in documents parsed with XML parsers, and optional in text/html documents.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added support for the <code>manifest</code> attribute (deprecated later).<br> + Obsoleted the <code>version</code> attribute</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Deprecated the <code>version</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>MathML top-level element: {{MathMLElement("math")}}</li> + <li>SVG top-level element: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/vi/web/html/element/index.html b/files/vi/web/html/element/index.html new file mode 100644 index 0000000000..4823538f65 --- /dev/null +++ b/files/vi/web/html/element/index.html @@ -0,0 +1,86 @@ +--- +title: Phần tử HTML +slug: Web/HTML/Element +translation_of: Web/HTML/Element +--- +<p>{{HTMLSidebar("Elements")}}</p> + +<p>Trang này bao gồm {{Glossary("HTML"){{Glossary("Element","elements")}}<span class="seoSummary">.</span> Chúng được chia thành các nhóm bởi chức năng với mong muốn giúp bạn dễ dàng tìm kiếm để có thể đạt được điều mà bạn có trong tâm trí một cách dễ dàng . Dù cho bản hướng dẫn này được viết ra để dành cho những người mới hoặc những người mới bắt đầu trong việc mã hóa, chúng tôi mong rằng đây có thể là tài liệu tham khảo hữu ích cho tất cả mọi người. </p> + +<h2 id="Các_phần_tử_căn_bản">Các phần tử căn bản</h2> + +<p>Các phần tử căn bản là cột sống cho tất cả các văn bản HTML nào. bạn sẽ thấy rằng những nguyên tố này nằm trong mã nguồn của bất cứ trang web nào đằng sau dòng trên cùng khai báo hiệu trang đó. Dòng khai báo xác định loại phiên bản (X)HTML mà trang đó sử dụng. Các phần tử được đặt giữa thẻ <html> mở và thẻ </html> đóng, đồng thời cũng được gọi là phần tử gốc.</p> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document_metadata" style="line-height: 30px; font-size: 2.14285714285714rem;">Document metadata</h2> + +<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software (Search engines, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> + +<p>{{HTMLRefTable("HTML document metadata")}}</p> + +<h2 id="Phân_chia_nội_dung" style="line-height: 30px; font-size: 2.14285714285714rem;">Phân chia nội dung</h2> + +<p>Các phần tử chia thành các mục giúp bạn trình bày nội dung tài liệu một cách loogic. Sử dụng các phần tử phân chia nội dung để tạo ra hình thể rộng cho nội dung trang, bao gồm tiêu đề và chân trang, và phần tử tiêu đề để đánh dấu phần nội dung.</p> + +<p>{{HTMLRefTable("HTML sections")}}</p> + +<h2 id="Text_content" style="line-height: 30px; font-size: 2.14285714285714rem;">Text content</h2> + +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> + +<p>{{HTMLRefTable("HTML grouping content")}}</p> + +<h2 id="Inline_text_semantics" style="line-height: 30px; font-size: 2.14285714285714rem;">Inline text semantics</h2> + +<p>Sử dụng ngữ nghĩa văn bản bên trong HTML để xác định ý nghĩa, cấu trúc hoặc kiểu của từ, dòng hoặc bất kỳ phần văn bản tùy ý nào</p> + +<p>{{HTMLRefTable("HTML text-level semantics")}}</p> + +<h2 id="Image_multimedia" style="line-height: 30px; font-size: 2.14285714285714rem;">Image & multimedia</h2> + +<p>HTML allows to use various multimedia ressources such as images, audio and video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="embedded_content" style="line-height: 30px; font-size: 2.14285714285714rem;">embedded content</h2> + +<p>Beyond multimedia contents HTML can include many other stuff, even if it's not always easy to interact with.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting" style="line-height: 30px; font-size: 2.14285714285714rem;">Scripting</h2> + +<p>{{HTMLRefTable("HTML scripting")}}</p> + +<h2 id="Edits" style="line-height: 30px; font-size: 2.14285714285714rem;">Edits</h2> + +<p>{{HTMLRefTable("HTML edits")}}</p> + +<h2 id="Table_content" style="line-height: 30px; font-size: 2.14285714285714rem;">Table content</h2> + +<p>Those set of elements is specificaly made to handle tabular data</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Forms" style="line-height: 30px; font-size: 2.14285714285714rem;">Forms</h2> + +<p>{{HTMLRefTable("HTML forms")}}</p> + +<h2 id="Interactive_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Interactive elements</h2> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Web_Components" style="line-height: 30px; font-size: 2.14285714285714rem;">Web Components</h2> + +<div class="note"><strong>Those </strong>elements are defined in the {{Glossary("W3C","World Wide Web Consortium")}} (W3C) <a href="http://www.w3.org/TR/components-intro/" title="http://www.w3.org/TR/components-intro/">Web Components collection of specifications</a> rather than the HTML specification.</div> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["decorator","shadow"]})}}</p> + +<h2 id="Obsolete_and_deprecated_elements" style="line-height: 30px; font-size: 2.14285714285714rem;">Obsolete and deprecated elements</h2> + +<div class="warning" style="font-size: 14px;"> +<p>Some old HTML elements were deprecated and their usage is strongly discouraged. <strong>You should never use them for new project, and replace them in old projects.</strong> There are listed here for information only.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/vi/web/html/element/meta/index.html b/files/vi/web/html/element/meta/index.html new file mode 100644 index 0000000000..861a343c66 --- /dev/null +++ b/files/vi/web/html/element/meta/index.html @@ -0,0 +1,441 @@ +--- +title: '<meta>: The Document-level Metadata element' +slug: Web/HTML/Element/meta +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><meta></code> element</strong> represents {{Glossary("Metadata","metadata")}} that cannot be represented by other HTML meta-related elements, like {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} or {{HTMLElement("title")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Metadata content. If the {{htmlattrxref("itemprop", "meta")}} attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>As it is a void element, the start tag must be present and the end tag must not be present.</td> + </tr> + <tr> + <th>Permitted parents</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>: a {{HTMLElement("head")}} element. If the {{htmlattrxref("http-equiv", "meta")}} is not an encoding declaration, it can also be inside a {{HTMLElement("noscript")}} element, itself inside a {{HTMLElement("head")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<div class="note"> +<p><strong>Note:</strong> the global attribute {{htmlattrxref("name", "meta")}} has a specific meaning for the {{HTMLElement("meta")}} element, and the {{htmlattrxref("itemprop", "meta")}} attribute must not be set on the same <code><meta></code> element that has any existing {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} attributes.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>This attribute declares the page's character encoding. It must contain a <a class="external" href="https://www.iana.org/assignments/character-sets">standard IANA MIME name for character encodings</a>. Although the standard doesn't request a specific encoding, it suggests: + <ul> + <li>Authors are encouraged to use <a href="/en-US/docs/Glossary/UTF-8"><code>UTF-8</code></a>.</li> + <li>Authors should not use ASCII-incompatible encodings to avoid security risk: browsers not supporting them may interpret harmful content as HTML. This happens with the <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, the ISO-2022 family and the EBCDIC family.</li> + </ul> + + <div class="note"> + <p><strong>Note: </strong>ASCII-incompatible encodings are those that don't map the 8-bit code points <code>0x20</code> to <code>0x7E</code> to the <code>0x0020</code> to <code>0x007E</code> Unicode code points)</p> + </div> + + <div class="warning"> + <ul> + <li>Authors <strong>must not</strong> use <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> and/or <code>SCSU</code> as <a href="/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting</a> attacks with these encodings have been demonstrated.</li> + <li>Authors should not use <code>UTF-32</code> because not all HTML5 encoding algorithms can distinguish it from <code>UTF-16</code>.</li> + </ul> + </div> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li>The declared character encoding must match the one the page was saved with to avoid garbled characters and security holes.</li> + <li>The {{HTMLElement("meta")}} element declaring the encoding must be inside the {{HTMLElement("head")}} element and <strong>within the first 1024 bytes</strong> of the HTML as some browsers only look at those bytes before choosing an encoding.</li> + <li>This {{HTMLElement("meta")}} element is only one part of the <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm" title="Algorithm charset page">algorithm to determine a page's character set</a>. The <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code> header</a> and any {{Glossary("Byte-Order Mark","Byte-Order Marks")}} override this element.</li> + <li>It is strongly recommended to define the character encoding. If a page's encoding is undefined, cross-scripting techniques are possible, such as the <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7"><code>UTF-7</code> fallback cross-scripting technique</a>.</li> + <li>The {{HTMLElement("meta")}} element with a <code>charset</code> attribute is a synonym for the pre-HTML5 <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"></code>, where <em><code>IANAcharset</code></em> contains the value of the equivalent {{htmlattrxref("charset", "meta")}} attribute. This syntax is still allowed, although no longer recommended.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>This attribute contains the value for the {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("name", "meta")}} attribute, depending on which is used.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd>Defines a pragma directive. The attribute is named <code><strong>http-equiv</strong>(alent)</code> because all the allowed values are names of particular HTTP headers: + <ul> + <li><code>"content-language"</code> {{obsolete_inline}}<br> + Defines the default language of the page. It can be overridden by the <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> attribute on any element. + <div class="warning"> + <p><strong>Warning: </strong>Do not use this value, as it is obsolete. Prefer the <code>lang</code> attribute on the {{HTMLElement("html")}} element.</p> + </div> + </li> + <li><code>"content-security-policy"</code><br> + Allows page authors to define a <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks.</li> + <li><code>"content-type"</code> {{obsolete_inline}}<br> + Defines the <a href="/en-US/docs/Glossary/MIME_type">MIME type</a> of the document, followed by its character encoding. It follows the same syntax as the HTTP <code>content-type</code> entity-header field, but as it is inside a HTML page, most values other than <code>text/html</code> are impossible. Therefore the valid syntax for its <code>content</code> is the string '<code>text/html</code>' followed by a character set with the following syntax: '<code>; charset=<em>IANAcharset</em></code>', where <code>IANAcharset</code> is the <em>preferred MIME name</em> for a character set as <a class="external" href="https://www.iana.org/assignments/character-sets">defined by the IANA.</a> + <div class="warning"> + <p><strong>Warning: </strong>Do not use this value, as it is obsolete. Use the {{htmlattrxref("charset", "meta")}} attribute on the {{HTMLElement("meta")}} element.</p> + </div> + + <div class="note"> + <p><strong>Note: </strong>As {{HTMLElement("meta")}} can't change documents' types in XHTML or HTML5's XHTML serialization, never set the MIME type to an XHTML MIME type with <code><meta></code>.</p> + </div> + </li> + <li><code>"refresh"</code><br> + This instruction specifies: + <ul> + <li>The number of seconds until the page should be reloaded - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer.</li> + <li>The number of seconds until the page should redirect to another - only if the {{htmlattrxref("content", "meta")}} attribute contains a positive integer followed by the string '<code>;url=</code>', and a valid URL.</li> + </ul> + </li> + <li><code>"set-cookie"</code> {{obsolete_inline}}<br> + Defines a <a href="/en-US/docs/cookie">cookie</a> for the page. Its content must follow the syntax defined in the <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>. + <div class="warning"> + <p><strong>Warning:</strong> Do not use this instruction, as it is obsolete. Use the HTTP header <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie"><code>Set-Cookie</code></a> instead.</p> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p>This attribute defines the name of a piece of document-level metadata. It should not be set if one of the attributes {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} or {{htmlattrxref("charset", "meta")}} is also set.</p> + + <p>This metadata name is associated with the value contained by the {{htmlattrxref("content", "meta")}} attribute. The possible values for the name attribute are:</p> + + <ul> + <li><code>application-name</code> which defines the name of the application running in the web page. + + <div class="note"><strong>Note:</strong> + + <ul> + <li>Browsers may use this to identify the application. It is different from the {{HTMLElement("title")}} element, which usually contain the application name, but may also contain information like the document name or a status.</li> + <li>Simple web pages shouldn't define an application-name.</li> + </ul> + </div> + </li> + <li><code>author</code> which defines the name of the document's author.</li> + <li><code>description</code> which contains a short and accurate summary of the content of the page. Several browsers, like Firefox and Opera, use this as the default description of bookmarked pages.</li> + <li><code>generator</code> which contains the identifier of the software that generated the page.</li> + <li><code>keywords</code> which contains words relevant to the page's content separated by commas.</li> + <li><code>referrer</code> which controls the <a href="/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code> HTTP header</a> attached to requests sent from the document: + <table class="standard-table"> + <caption>Values for the <code>content</code> attribute of <code><meta name="referrer"></code></caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>Do not send a HTTP <code>Referrer</code> header.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>Send the <a href="/en-US/docs/Glossary/Origin">origin</a> of the document.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>Send the <a href="/en-US/docs/Glossary/Origin">origin</a> as a referrer to URLs as secure as the current page, (https→https), but does not send a referrer to less secure URLs (https→http). This is the default behaviour.</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>Send the full URL (stripped of parameters) for same-origin requests, but only send the <a href="/en-US/docs/Glossary/Origin">origin</a> for other cases.</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-site origins</a>, but cross-origin requests will contain no referrer information.</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>Only send the origin of the document as the referrer to a-priori as-much-secure destination (HTTPS->HTTPS), but don't send it to a less secure destination (HTTPS->HTTP).</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>Send a full URL when performing a same-origin request, only send the origin of the document to a-priori as-much-secure destination (HTTPS->HTTPS), and send no header to a less secure destination (HTTPS->HTTP).</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>Send the full URL (stripped of parameters) for same-origin or cross-origin requests.</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>Notes:</strong></p> + + <ul> + <li>Some browsers support the deprecated values of <code>always</code>, <code>default</code>, and <code>never</code> for referrer.</li> + <li>Dynamically inserting <code><meta name="referrer"></code> (with <a href="/en-US/docs/Web/API/Document/write"><code>document.write</code></a> or <a href="/en-US/docs/Web/API/Node/appendChild"><code>appendChild</code></a>) makes the referrer behaviour unpredictable.</li> + <li>When several conflicting policies are defined, the no-referrer policy is applied.</li> + </ul> + </div> + </li> + </ul> + + <p>This attribute may also have a value taken from the extended list defined on <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a>. Although none have been formally accepted yet, a few commonly used names are:</p> + + <ul> + <li><code>creator</code> which defines the name of the creator of the document, such as an organization or institution. If there are more than one, several {{HTMLElement("meta")}} elements should be used.</li> + <li><code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li> + <li><code>publisher</code> which defines the name of the document's publisher.</li> + <li><code>robots</code> which defines the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below: + <table class="standard-table"> + <caption>Values for the content of <code><meta name="robots"></code></caption> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Description</th> + <th scope="col">Used by</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>Allows the robot to index the page (default).</td> + <td>All</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>Requests the robot to not index the page.</td> + <td>All</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>Allows the robot to follow the links on the page (default).</td> + <td>All</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Requests the robot to not follow the links on the page.</td> + <td>All</td> + </tr> + <tr> + <td><code>none</code></td> + <td>Equivalent to <code>noindex, nofollow</code></td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noodp</code></td> + <td>Prevents using the <a class="external" href="https://www.dmoz.org/">Open Directory Project</a> description, if any, as the page description in search engine results.</td> + <td> + <p><a class="external" href="https://support.google.com/webmasters/answer/35624#nodmoz">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/meta-tags-robotstxt-yahoo-search-sln2213.html#cont5">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p> + </td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>Requests the search engine not to cache the page content.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>Prevents displaying any description of the page in search engine results.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>Requests this page not to appear as the referring page of an indexed image.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td>Synonym of <code>noarchive</code>.</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li>Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.</li> + <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em><a href="/en-US/docs/Robot_Exclusion_Protocol" title="Robot Exclusion Protocol">robots.txt</a></em> file.</li> + <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li> + <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behaviour is undefined and may vary between them.</li> + <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li> + </ul> + </div> + </li> + <li><code>slurp</code>, is a synonym of <code>robots</code>, but only for Slurp - the crawler for Yahoo Search.</li> + <li><code>viewport</code>, which gives hints about the size of the initial size of the {{glossary("viewport")}}. Used by mobile devices only. + <table class="fullwidth-table"> + <caption>Values for the content of <code><meta name="viewport"></code></caption> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Possible subvalues</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>A positive integer number, or the text <code>device-width</code></td> + <td>Defines the pixel width of the viewport that you want the web site to be rendered at.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>A positive integer, or the text <code>device-height</code></td> + <td>Defines the height of the viewport. Not used by any browser.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td>A positive number between <code>0.0</code> and <code>10.0</code></td> + <td>Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td>A positive number between <code>0.0</code> and <code>10.0</code></td> + <td>Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td>A positive number between <code>0.0</code> and <code>10.0</code></td> + <td>Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> or <code>no</code></td> + <td>If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default.</td> + </tr> + </tbody> + </table> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Non-normatively describes the Viewport META element</td> + </tr> + </tbody> + </table> + + <div>See also: {{cssxref("@viewport")}}</div> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li>Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.</li> + <li>The default values may vary between devices and browsers.</li> + <li>To learn about this declaration in Firefox for Mobile, see <a href="/en-US/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li> + </ul> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt> + <dd>This attribute defines the scheme in which metadata is described. A scheme is a context leading to the correct interpretations of the {{htmlattrxref("content", "meta")}} value, like a format. + <div class="warning"> + <p><strong>Warning:</strong> Do not use this value, as it is obsolete. There is no replacement as there was no real usage for it.</p> + </div> + </dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<p>Depending on the attributes set, the kind of metadata can be one of the following:</p> + +<ul> + <li>If {{htmlattrxref("name", "meta")}} is set, it is <em>document-level</em> <em>metadata</em>, applying to the whole page.</li> + <li>If {{htmlattrxref("http-equiv", "meta")}} is set, it is a <em>pragma directive</em> — information normally given by the web server about how the web page is served.</li> + <li>If {{htmlattrxref("charset", "meta")}} is set, it is a <em>charset declaration</em> — the character encoding used by the webpage.</li> + <li>If {{htmlattrxref("itemprop", "meta")}} is set, it is <em>user-defined metadata</em> — transparent for the user-agent as the semantics of the metadata is user-specific. {{experimental_inline}}</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><meta charset="utf-8"> + +<!-- Redirect page after 3 seconds --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Refreshing_content">Refreshing content</h3> + +<p>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions. </p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Viewport_scaling">Viewport scaling</h3> + +<p>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Defines values and semantics of <code><meta name="referrer"></code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added <code>itemprop</code> attribute</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added <code>charset</code> attribute</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>The information shown below has been pulled from MDN's Github (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.meta")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The other elements containing metadata: {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("title")}}.</li> +</ul> diff --git a/files/vi/web/html/element/span/index.html b/files/vi/web/html/element/span/index.html new file mode 100644 index 0000000000..4f45bf613b --- /dev/null +++ b/files/vi/web/html/element/span/index.html @@ -0,0 +1,122 @@ +--- +title: <span> +slug: Web/HTML/Element/span +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Phần tử <span> HTML là một bộ chứa nội tuyến chung cho nội dung cụm từ, vốn không đại diện cho bất cứ điều gì. Nó có thể được sử dụng để nhóm các thành phần cho mục đích tạo kiểu (sử dụng các thuộc tính {{htmlattrxref ("class")}} hoặc {{htmlattrxref ("id")}}) hoặc vì chúng chia sẻ các giá trị thuộc tính, như {{htmlattrxref ( "lang")}}. Nó chỉ được sử dụng khi không có yếu tố ngữ nghĩa nào khác phù hợp. <span> rất giống với phần tử {{HTMLE bổ sung ("div")}}, nhưng {{HTMLEuity ("div")}} là phần tử cấp khối trong khi <span> là phần tử nội tuyến.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLSpanElement")}} (before {{glossary("HTML5")}}, the interface was {{domxref("HTMLElement")}})</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Example">Example</h2> + +<h3 id="Example_1">Example 1</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html gutter:false notranslate"><p><span>Some text</span></p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Example_1')}}</p> + +<h3 id="Example_2">Example 2</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html gutter:false notranslate"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">li span { + background: gold; + } +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('Example_2')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>The {{glossary("DOM")}} interface is now {{domxref("HTMLSpanElement")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>HTML {{HTMLElement("div")}} element</li> +</ul> |