<h2 style="text-align: justify;">Kh&oacute;a học n&agrave;y d&agrave;nh cho ai?</h2>
Kh&oacute;a học X&acirc;y dựng giao diện với HTML &amp; CSS n&agrave;y d&agrave;nh cho:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Những bạn mới bắt đầu bước v&agrave;o học lập tr&igrave;nh web. Kh&oacute;a học n&agrave;y l&agrave; cơ sở để tạo ra những trang web chuy&ecirc;n nghiệp, đẹp mắt v&agrave; tương th&iacute;ch tr&ecirc;n nhiều loại thiết bị v&agrave; m&ocirc;i trường kh&aacute;c nhau.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c bạn học vi&ecirc;n đ&atilde; c&oacute; những kiến thức cơ bản về HTML v&agrave; CSS nhưng vẫn bất lực trong việc sử dụng kết hợp ch&uacute;ng với nhau để tạo ra một trang web chuy&ecirc;n nghiệp, hiện đại v&agrave; đẹp mắt.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c bạn học thiết kế nhưng muốn mở rộng kỹ năng của m&igrave;nh với những hiểu biết sơ lược về x&acirc;y dựng giao diện web th&ocirc;ng qua HTML5 v&agrave; CSS3</li>
</ul>
Đơn giản, dễ hiểu, thực tế, v&agrave; thực h&agrave;nh trực tiếp ngay sau khi học với nhiều ứng dụng, gi&uacute;p bạn nhanh ch&oacute;ng tiếp cận v&agrave; triển khai ngay được ứng dụng thực tế. 
<h2 style="text-align: justify;">Để bắt đầu kh&oacute;a học, bạn cần g&igrave;?</h2>
Kh&oacute;a học n&agrave;y được thiết kế d&agrave;nh cho người mới bắt đầu, v&igrave; vậy bạn sẽ kh&ocirc;ng cần phải c&oacute; bất cứ kinh nghiệm n&agrave;o về lập tr&igrave;nh trước khi bắt tay v&agrave;o học. Kh&oacute;a học n&agrave;y:
<ul style="text-align: justify;">
<li style="font-weight: 400; text-align: justify;" aria-level="1">KH&Ocirc;NG đ&ograve;i hỏi bạn phải c&oacute; kiến thức trước về lập tr&igrave;nh hay thiết kế</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">KH&Ocirc;NG nhất thiết phải c&agrave;i đặt c&ocirc;ng cụ nặng với dung lượng lớn. Bạn kh&ocirc;ng cần mua bất cứ phần mềm n&agrave;o - ch&uacute;ng ta sẽ sử dụng tr&igrave;nh editor miễn ph&iacute;, nhẹ v&agrave; tốt nhất với chi ph&iacute; bằng 0.</li>
</ul>
Tất cả những g&igrave; bạn cần l&agrave;:
<ul style="text-align: justify;">
<li style="font-weight: 400; text-align: justify;" aria-level="1">Một thiết bị m&aacute;y t&iacute;nh (Windows, Mac hoặc Linux) hoặc thậm ch&iacute; l&agrave; một chiếc m&aacute;y t&iacute;nh bảng.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">T&acirc;m thế sẵn s&agrave;ng chăm chỉ, nỗ lực v&agrave; thực hiện theo đ&uacute;ng lộ tr&igrave;nh đ&atilde; đề ra trong kh&oacute;a học.</li>
</ul>
<h2 style="text-align: justify;">Giới thiệu&nbsp;</h2>
HTML l&agrave; viết tắt của HyperText Markup Language (ng&ocirc;n ngữ sử dụng thẻ đ&aacute;nh dấu văn bản) d&ugrave;ng để m&ocirc; tả cấu tr&uacute;c của c&aacute;c trang Web v&agrave; tạo ra c&aacute;c loại t&agrave;i liệu c&oacute; thể xem được tr&ecirc;n tr&igrave;nh duyệt.
CSS (viết tắt của Cascading Style Sheets) l&agrave; ng&ocirc;n ngữ định dạng được sử dụng để m&ocirc; tả c&aacute;ch tr&igrave;nh b&agrave;y trang Web, bao gồm m&agrave;u sắc, bố cục v&agrave; ph&ocirc;ng chữ. N&oacute; cho ph&eacute;p hiển thị nội dung tương th&iacute;ch tr&ecirc;n c&aacute;c loại thiết bị c&oacute; k&iacute;ch thước m&agrave;n h&igrave;nh kh&aacute;c nhau như m&agrave;n h&igrave;nh lớn, m&agrave;n h&igrave;nh nhỏ hay m&aacute;y in.
CSS độc lập với HTML v&agrave; c&oacute; thể được sử dụng với bất kỳ ng&ocirc;n ngữ đ&aacute;nh dấu dựa tr&ecirc;n XML n&agrave;o. 
Về cơ bản c&oacute; thể n&oacute;i HTML c&oacute; vai tr&ograve; tạo khung xương cho website c&ograve;n CSS c&oacute; vai tr&ograve; trang điểm v&agrave; đắp da thịt cho website đ&oacute;. Đ&acirc;y l&agrave; hai th&agrave;nh phần kh&ocirc;ng thể thiếu để tạo l&ecirc;n một website mượt m&agrave; v&agrave; đẹp đẽ.
Kh&oacute;a học n&agrave;y sẽ cung cấp cho người học những kiến ​​thức từ cơ bản đến những kh&aacute;i niệm n&acirc;ng cao tổng hợp về HTML v&agrave; CSS. Đ&acirc;y l&agrave; kh&oacute;a học với rất nhiều b&agrave;i tập v&agrave; v&iacute; dụ gi&uacute;p người học chủ động v&agrave; hiểu c&aacute;ch x&acirc;y dựng giao diện website tĩnh khi sử dụng HTML v&agrave; CSS. Mục ti&ecirc;u của kh&oacute;a học n&agrave;y l&agrave; gi&uacute;p bạn th&agrave;nh thạo lập tr&igrave;nh HTML v&agrave; CSS từ số 0. Kh&oacute;a học sẽ cung cấp cho bạn c&aacute;c kh&aacute;i niệm về thẻ HTML, thuộc t&iacute;nh, thuộc t&iacute;nh của HTML, CSS. C&aacute;ch tạo ra một trang web từ HTML v&agrave; CSS, c&aacute;ch cắt giao diện website từ c&aacute;c file thiết kế dạng figma hoặc Photoshop. 
Sau kh&oacute;a học n&agrave;y, bạn ho&agrave;n to&agrave;n c&oacute; thể n&acirc;ng cao kỹ năng của m&igrave;nh hơn nữa với c&aacute;c kh&oacute;a học n&acirc;ng cao của TEK4.VN như: lập tr&igrave;nh PHP, lập tr&igrave;nh NodeJS, lập tr&igrave;nh JavaScript,... để c&oacute; thể x&acirc;y dựng website một c&aacute;ch ho&agrave;n thiện với đầy đủ t&iacute;nh năng v&agrave; th&agrave;nh phần.
...
Với kh&oacute;a học n&agrave;y bạn ho&agrave;n to&agrave;n c&oacute; thể thiết kế v&agrave; x&acirc;y dựng bất kỳ trang web n&agrave;o m&agrave; bạn c&oacute; thể nghĩ ra, chứ kh&ocirc;ng chỉ sao ch&eacute;p dự &aacute;n kh&oacute;a học.
V&igrave; vậy, để trở th&agrave;nh một lập tr&igrave;nh vi&ecirc;n tự tin v&agrave; độc lập, c&oacute; khả năng x&acirc;y dựng trang web của ri&ecirc;ng bạn trong tương lai, bạn sẽ học:
<ol>
<li>C&aacute;c nguy&ecirc;n tắc cơ bản của HTML, CSS. Bao gồm flexbox hiện đại v&agrave; CSS Grid!</li>
<li style="text-align: justify;">C&aacute;ch thiết kế c&aacute;c trang web đẹp, bằng c&aacute;ch học một khung thiết kế web m&agrave; ch&uacute;ng t&ocirc;i đ&atilde; tạo chỉ d&agrave;nh cho kh&oacute;a học n&agrave;y. N&oacute; bao gồm c&aacute;c hướng dẫn dễ sử dụng cho c&aacute;c kh&iacute;a cạnh thiết kế như kiểu chữ, m&agrave;u sắc, h&igrave;nh ảnh, khoảng c&aacute;ch,...</li>
<li style="text-align: justify;">C&aacute;ch sử dụng c&aacute;c th&agrave;nh phần trang web v&agrave; mẫu bố cục đ&atilde; được thiết lập để tạo ra c&aacute;c thiết kế chuy&ecirc;n nghiệp.</li>
<li style="text-align: justify;">C&aacute;ch l&agrave;m cho bất kỳ trang web n&agrave;o hoạt động tr&ecirc;n mọi thiết bị di động, bất kể thiết kế v&agrave; bố cục như thế n&agrave;o.</li>
<li style="text-align: justify;">C&aacute;ch vận dụng 7 bước x&acirc;y dựng website chuy&ecirc;n nghiệp v&agrave;o thực tế: lập kế hoạch, ph&aacute;c thảo, thiết kế, x&acirc;y dựng, kiểm thử, tối ưu v&agrave; khởi chạy.</li>
<li style="text-align: justify;">C&aacute;ch t&igrave;m v&agrave; sử dụng c&aacute;c nội dung thiết kế miễn ph&iacute; như h&igrave;nh ảnh, ph&ocirc;ng chữ v&agrave; biểu tượng</li>
<li style="text-align: justify;">C&aacute;c kỹ năng quan trọng của lập tr&igrave;nh vi&ecirc;n như đọc t&agrave;i liệu, tự sửa lỗi v&agrave; sử dụng c&aacute;c c&ocirc;ng cụ ph&aacute;t triển web chuy&ecirc;n nghiệp.</li>
</ol>
<h2 style="text-align: justify;">Tại sao bạn n&ecirc;n học HTML v&agrave; CSS ngay từ b&acirc;y giờ?</h2>
Ở Việt Nam hiện nay, c&aacute;c c&ocirc;ng việc li&ecirc;n quan đến lập tr&igrave;nh n&oacute;i ri&ecirc;ng v&agrave; c&ocirc;ng nghệ n&oacute;i chung đều được rất nhiều c&aacute;c nh&agrave; tuyển dụng săn đ&oacute;n v&agrave; trọng dụng. C&ocirc;ng việc thiết kế v&agrave; x&acirc;y dựng một website l&agrave; một c&ocirc;ng việc th&uacute; vị. Đ&acirc;y l&agrave; một trong những ng&agrave;nh c&oacute; tương lai ổn định v&agrave; được trả lương cao nhất tr&ecirc;n thế giới. HTML v&agrave; CSS l&agrave; điểm v&agrave;o nếu bạn chọn đi con đường n&agrave;y.
Đ&acirc;y l&agrave; kh&oacute;a học tốt nhất v&agrave; đầy đủ nhất để bắt đầu h&agrave;nh tr&igrave;nh ph&aacute;t triển web của bạn. Gi&uacute;p bạn từ chỗ kh&ocirc;ng biết g&igrave; về HTML v&agrave; CSS, đến việc x&acirc;y dựng c&aacute;c trang web tuyệt đẹp bằng c&aacute;ch sử dụng c&aacute;c c&ocirc;ng cụ v&agrave; c&ocirc;ng nghệ m&agrave; c&aacute;c lập tr&igrave;nh vi&ecirc;n sử dụng h&agrave;ng ng&agrave;y.
H&atilde;y c&ugrave;ng TEK4.VN bắt đầu x&acirc;y dựng trang web ngay h&ocirc;m nay!

Xây dựng giao diện với HTML & CSS

Ch&uacute;ng ta c&oacute; 2 kiểu loại thẻ:
<ol>
<li>Loại thẻ cấu tr&uacute;c (Structural markup): L&agrave; c&aacute;c thẻ được sử dụng để m&ocirc; tả cho c&aacute;c ti&ecirc;u đề v&agrave; c&aacute;c đoạn văn bản.</li>
<li>Loại thẻ về ngữ nghĩa (Semantic markup): L&agrave; c&aacute;c thẻ cung cấp th&ecirc;m về th&ocirc;ng tin, chẳng hạn như nhấn mạnh v&agrave;o nội dung n&agrave;o đ&oacute; trong đoạn văn, đưa ra c&acirc;u tr&iacute;ch dẫn bởi một người nổi tiếng n&agrave;o đ&oacute; v&agrave; c&aacute;c th&ocirc;ng tin kh&aacute;c.</li>
</ol>
<h2> C&aacute;c thẻ ti&ecirc;u đề cho văn bản</h2>
HTML c&oacute; 6 thẻ ti&ecirc;u đề ứng với 6 cấp bậc kh&aacute;c nhau, ta c&oacute; từ &lt;h1&gt; &lt;/h1&gt;đến &lt;h6&gt;&lt;/h6&gt;. Trong đ&oacute;, thẻ &lt;h1&gt; được sử dụng để tạo c&aacute;c ti&ecirc;u đề ch&iacute;nh, v&agrave; c&aacute;c thẻ c&ograve;n lại để l&agrave;m ti&ecirc;u đề phụ.
C&aacute;c tr&igrave;nh duyệt sẽ hiển thị nội dung của c&aacute;c ti&ecirc;u đề với c&aacute;c k&iacute;ch thước kh&aacute;c nhau. Nội dung của phần tử &lt;h1&gt; c&oacute; k&iacute;ch thước l&agrave; lớn nhất v&agrave; nội dung của phần tử &lt;h6&gt; c&oacute; k&iacute;ch thước l&agrave; nhỏ nhất. K&iacute;ch thước ch&iacute;nh x&aacute;c m&agrave; mỗi tr&igrave;nh duyệt hiển thị cho c&aacute;c ti&ecirc;u đề c&oacute; thể hơi kh&aacute;c nhau. Ngo&agrave;i ra, người d&ugrave;ng cũng c&oacute; thể điều chỉnh k&iacute;ch thước của văn bản trong tr&igrave;nh duyệt của họ.
Lưu &yacute;: C&aacute;c bạn h&atilde;y lưu &yacute; l&agrave; chỉ được d&ugrave;ng c&aacute;c thẻ &lt;h1&gt; đến &lt;h6&gt; cho việc tạo c&aacute;c ti&ecirc;u đề của đoạn văn, kh&ocirc;ng được sử dụng để in đậm hoặc thay k&iacute;ch thước chữ cho đoạn văn nh&eacute;!
V&iacute; dụ: ta c&oacute; đoạn m&atilde; như sau:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;Ti&ecirc;u đề ch&iacute;nh&lt;/h1&gt;
 &lt;h2&gt;Ti&ecirc;u đề con cấp 2&lt;/h2&gt;
 &lt;h3&gt;Ti&ecirc;u đề con cấp 3&lt;/h3&gt;
 &lt;h4&gt;Ti&ecirc;u đề con cấp 4&lt;/h4&gt;
 &lt;h5&gt;Ti&ecirc;u đề con cấp 5&lt;/h5&gt;
 &lt;h6&gt;Ti&ecirc;u đề con cấp 6&lt;/h6&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả của đoạn m&atilde; b&ecirc;n tr&ecirc;n c&oacute; dạng như sau:
<img style="width: 100%;" src="../../../public_files/718cfa58-83c4-47ab-84a2-cecd0c6be08e" alt="the-cho-van-ban-1" />
<h2> Thẻ cho đoạn văn bản</h2>
Để tạo một đoạn văn, c&aacute;c bạn c&oacute; thể th&ecirc;m nội dung đoạn văn v&agrave; đặt b&ecirc;n trong thẻ &lt;p&gt; mở v&agrave; thẻ đ&oacute;ng &lt;/p&gt;.
Theo mặc định, tr&igrave;nh duyệt sẽ hiển thị từng đoạn tr&ecirc;n một d&ograve;ng mới với một số khoảng c&aacute;ch giữa n&oacute; v&agrave; bất kỳ đoạn văn n&agrave;o tiếp theo.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Đoạn văn bản&lt;/p&gt;
 &lt;p&gt;Đoạn văn bản 2&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả đầu ra:
<img style="width: 100%;" src="../../../public_files/87b863a8-515b-4e58-b93b-1a93ad7c147d" alt="the-cho-van-ban-2" />
Với HTML, bạn kh&ocirc;ng thể thay đổi c&aacute;ch hiển thị cho đoạn văn bản bằng c&aacute;ch th&ecirc;m khoảng trắng hoặc c&aacute;c d&ograve;ng thừa trong đoạn m&atilde; HTML. Bởi tr&igrave;nh duyệt sẽ tự động x&oacute;a bất kỳ khoảng trắng v&agrave; d&ograve;ng thừa n&agrave;o khi trang được hiển thị.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Đoạn văn bản&lt;/p&gt;
 &lt;p&gt;Đoạn văn bản
 Đoạn văn bản 2
 &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả trong đoạn m&atilde; tr&ecirc;n sẽ c&oacute; dạng như sau:
<img style="width: 100%;" src="../../../public_files/b837789e-c1f8-43aa-845f-0411d7f4ed40" alt="the-cho-van-ban-3" />
<h2> Một số thẻ định dạng cho văn bản</h2>
&lt;b&gt;: Bằng c&aacute;ch th&ecirc;m c&aacute;c k&yacute; tự hoặc đoạn văn bản đặt trong cặp thẻ &lt;b&gt;&lt;/b&gt;, ta c&oacute; thể tạo ra c&aacute;c từ in đậm.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Đoạn văn bản&lt;/p&gt;
 &lt;p&gt;Bạn đang học &lt;b&gt;HTML&lt;/b&gt; cơ bản.
 &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả của đoạn m&atilde; b&ecirc;n tr&ecirc;n như sau:
<img style="width: 100%;" src="../../../public_files/cb5c1e30-f9a4-4856-9b20-bcdf550209f0" alt="the-cho-van-ban-4" />
&lt;i&gt;: bằng c&aacute;ch th&ecirc;m c&aacute;c k&yacute; tự hoặc đoạn văn bản đặt trong thẻ &lt;i&gt;&lt;/i&gt;, ta c&oacute; thể tạo ra c&aacute;c từ in nghi&ecirc;ng.
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Đoạn văn bản&lt;/p&gt;
 &lt;p&gt;Bạn đang học &lt;i&gt;HTML&lt;/i&gt;
 &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả của đoạn m&atilde; b&ecirc;n tr&ecirc;n như sau:
<img style="width: 100%;" src="../../../public_files/0df049e0-64df-434b-b636-ce7e93dc8ee5" alt="the-cho-van-ban-5" />
Thẻ tạo dấu mũ v&agrave; k&yacute; tự b&ecirc;n dưới
&lt;sup&gt;: được sử dụng để th&ecirc;m c&aacute;c k&yacute; tự được viết ở dạng số mũ trong to&aacute;n học hoặc trong ng&agrave;y th&aacute;ng.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;4 &lt;sup&gt;th&lt;/sup&gt; of June&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả như sau:
<img style="width: 100%;" src="../../../public_files/852d4e81-3e1b-48fb-b494-742c865e18e7" alt="the-cho-van-ban-6" />
&lt;sub&gt;: được sử dụng để th&ecirc;m c&aacute;c k&yacute; tự được viết nằm ở b&ecirc;n dưới.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;X&lt;sub&gt;1&lt;/sub&gt; v&agrave; X &lt;sub&gt;2&lt;/sub&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả như sau:
<img style="width: 100%;" src="../../../public_files/29fc87c6-488f-4c49-b9d5-0f8c6c82f1da" alt="the-cho-van-ban-7" />
&lt;br&gt;: Tr&igrave;nh duyệt sẽ hiển thị c&aacute;c đoạn văn bản ở c&aacute;c d&ograve;ng mới. Tuy nhi&ecirc;n, nếu ta muốn dấu xuống d&ograve;ng trong một đoạn văn bản, ta sẽ sử dụng thẻ &lt;br&gt;.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;HTML&lt;br&gt;CSS&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả của đoạn m&atilde; b&ecirc;n tr&ecirc;n:
<img style="width: 100%;" src="../../../public_files/ec71b32f-ecda-418b-9c88-6683f5259025" alt="the-cho-van-ban-8" />
&lt;hr&gt;: Để ph&acirc;n t&aacute;ch giữa c&aacute;c đoạn văn bản hoặc t&aacute;ch c&aacute;c phần nội dung kh&aacute;c nhau trong văn bản, ta c&oacute; thể sử dụng dấu gạch ngang b&ecirc;n dưới bằng thẻ &lt;hr&gt; để thực hiện việc ph&acirc;n t&aacute;ch n&agrave;y.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Đoạn văn bản 1&lt;/p&gt;
 &lt;hr&gt;
 &lt;p&gt;Đoạn văn bản 2&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả của đoạn m&atilde; b&ecirc;n tr&ecirc;n như sau:
<img style="width: 100%;" src="../../../public_files/e82caa0c-16f5-41dd-84d3-ea2dd9a37106" alt="the-cho-van-ban-9" />
&lt;strong&gt;: thẻ n&agrave;y được sử dụng để nhấn mạnh nội dung quan trọng trong đoạn văn bản. Theo mặc định, tr&igrave;nh duyệt sẽ hiển thị nội dung b&ecirc;n trong thẻ n&agrave;y ở dạng in đậm.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Bạn đang học&lt;strong&gt;HTML&lt;/strong&gt;&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả trong đoạn m&atilde; tr&ecirc;n như sau:
<img style="width: 100%;" src="../../../public_files/f1173094-d93d-4065-95a2-8a5e492a435f" alt="the-cho-van-ban-10" />
&lt;blockquote&gt;: thẻ n&agrave;y được sử dụng để th&ecirc;m c&aacute;c c&acirc;u tr&iacute;ch dẫn d&agrave;i. Tr&igrave;nh duyệt sẽ tự động mặc định l&ugrave;i đầu d&ograve;ng cho c&aacute;c nội dung b&ecirc;n trong thẻ n&agrave;y. Tuy nhi&ecirc;n, c&aacute;c bạn kh&ocirc;ng n&ecirc;n sử dụng thẻ n&agrave;y để l&ugrave;i v&agrave;o đầu d&ograve;ng cho văn bản nh&eacute;, m&agrave; thay v&agrave;o đ&oacute; ta sẽ sử dụng CSS để thực hiện việc n&agrave;y. Ngo&agrave;i ra, ta cần sử dụng thuộc t&iacute;nh cite trong thẻ n&agrave;y để tr&iacute;ch dẫn nguồn cho c&acirc;u n&oacute;i.
&lt;q&gt;: thẻ n&agrave;y được sử dụng để th&ecirc;m c&aacute;c c&acirc;u tr&iacute;ch dẫn ngắn. Tr&igrave;nh duyệt mặc định sẽ để nội dung của thẻ n&agrave;y b&ecirc;n trong dấu nh&aacute;y k&eacute;p. Tương tự, ta cũng c&oacute; thể sử dụng thuộc t&iacute;nh cite cho thẻ n&agrave;y.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Nam n&oacute;i rằng: &lt;q&gt;HTML thật hữu &iacute;ch&lt;/q&gt;&lt;/p&gt;
 &lt;blockquote cite="http://TEK4.VN.vn"&gt;Miễn ph&iacute;, Cập nhật, Hệ thống, Đơn giản, Chất lượng&lt;/blockquote&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả:
<img style="width: 100%;" src="../../../public_files/c3049fbf-b55e-44f6-b737-0803e7d65a7e" alt="the-cho-van-ban-11" />
&lt;cite&gt;: Khi bạn tham khảo một phần của t&aacute;c phẩm chẳng hạn như s&aacute;ch, phim hoặc b&agrave;i nghi&ecirc;n cứu n&agrave;o đ&oacute;, thẻ &lt;cite&gt; c&oacute; thể được sử dụng để chỉ ra nguồn tr&iacute;ch dẫn.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;&lt;cite&gt;The Scream&lt;/cite&gt; by Edward Munch in 1893.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả đầu ra:
<img style="width: 100%;" src="../../../public_files/282c55aa-11cc-4ef3-90a1-8d5a021989e9" alt="the-cho-van-ban-12" />
&lt;del&gt;: Thẻ n&agrave;y được sử dụng để gạch dấu ngang cho một từ hoặc một đoạn văn bản n&agrave;o đ&oacute;.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;&lt;del&gt;Đoạn văn bản&lt;/del&gt; được x&oacute;a &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Kết quả đầu ra:
<img style="width: 100%;" src="../../../public_files/40327a84-6b8e-4817-841e-b001ede8e7af" alt="the-cho-van-ban-14" />

Các thẻ sử dụng cho văn bản