initial commit

1 files changed, 122 insertions, 0 deletions

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ử &lt;span&gt; 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. &lt;span&gt; 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 &lt;span&gt; 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">&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;</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">&lt;li&gt;&lt;span&gt;
+    &lt;a href="portfolio.html" target="_blank"&gt;See my portfolio&lt;/a&gt;
+&lt;/span&gt;&lt;/li&gt;
+</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', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '&lt;span&gt;')}}</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', '&lt;span&gt;')}}</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>