Các thẻ liên quan đến văn bản
Bài viết này giải thích về các thẻ liên quan đến văn bản.
Giải thích được chia thành thẻ ngữ nghĩa và thẻ không ngữ nghĩa.
YouTube Video
Tạo CSS để xem trước
html-tags.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 20px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29}
30
31p, pre {
32 margin: 10px 0;
33 padding: 0;
34}
35
36ul, ol, dl, menu {
37 margin: 0;
38}
39
40pre {
41 background-color: #f0f0f0;
42 border-left: 4px solid #ccc;
43 padding: 10px;
44 overflow-x: auto;
45}
46
47p.sample, .sample {
48 background-color: #e7f4e9;
49 padding: 10px;
50 border-left: 4px solid #7bbd82;
51 color: #333;
52}
53
54p.sample-error, .sample-error {
55 background-color: #f4e7e7;
56 padding: 10px;
57 border-left: 4px solid #bd827b;
58 color: #333;
59}
60
61p.sample-warn, .sample-warn {
62 background-color: #f4f1e7;
63 padding: 10px;
64 border-left: 4px solid #bda97b;
65 color: #333;
66}
67
68code {
69 padding: 2px 4px;
70 border-radius: 4px;
71 font-family: monospace;
72}
73
74span {
75 font-weight: bold;
76}
77
78main {
79 padding-bottom: 100px;
80}
81
82article {
83 background-color: white;
84 padding: 20px;
85 margin-bottom: 10px;
86 border-radius: 8px;
87 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
88}
89
90section {
91 margin-bottom: 20px;
92}
93
94table {
95 width: 100%;
96 border-collapse: collapse;
97}
98
99th, td {
100 border: 1px solid #ddd;
101}Các thẻ cơ bản liên quan đến văn bản
Thẻ <div>
1<div>This is a division of content.</div>-
Thẻ
<div>là một phần tử cấp khối được sử dụng để tạo các phần trong HTML. -
Thẻ
<div>là một thẻ không mang ý nghĩa ngữ nghĩa.Khi tập trung vào HTML ngữ nghĩa, các thẻ có ý nghĩa (như
<section>,<article>) có thể được sử dụng. Điều này giúp công cụ tìm kiếm và các trình đọc màn hình hiểu rõ hơn nội dung của trang. -
Bằng cách kết hợp với CSS và JavaScript, bạn có thể kiểm soát sự xuất hiện và hành vi của trang.
Thẻ
<div>được sử dụng để nhóm các nội dung trên một trang như một phần tử cấp khối. Nó chủ yếu được sử dụng kết hợp với CSS và JavaScript để điều chỉnh bố cục trang, kiểu dáng và thao tác các phần tử.
Thẻ <p>
This is a paragraph of text.
1<p>This is a paragraph of text.</p>- Thẻ
<p>là một phần tử dùng để xác định một đoạn văn trong HTML. Thẻ<p>đại diện cho một đoạn văn và chủ yếu được dùng để nhóm và hiển thị văn bản. Nó giúp nội dung dễ đọc hơn bằng cách tách biệt về mặt hình ảnh các phần của văn bản. - Bạn không thể đặt các phần tử cấp khối khác như một thẻ
<p>khác hoặc một thẻ<div>bên trong một thẻ<p>. Điều này bị ngăn cấm theo quy định của HTML. Nếu bạn làm điều đó, trình duyệt sẽ tự động đóng thẻ và nó sẽ không hiển thị đúng.
Thẻ <a>
1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>-
Thẻ
<a>được sử dụng để tạo các liên kết.Thẻ
<a>được sử dụng để tạo liên kết đến các trang khác, các trang bên ngoài hoặc các tệp. Thuộc tínhhrefđược sử dụng để xác định đích đến của liên kết. -
Nó có thể được sử dụng cho các liên kết văn bản hoặc hình ảnh, và sử dụng
target="_blank"sẽ mở liên kết trong một tab mới. -
Thuộc tính
targetđược sử dụng để xác định cách đích liên kết sẽ được hiển thị._self(mặc định): Mở liên kết trong cửa sổ hoặc tab hiện tại._blank: Mở liên kết trong cửa sổ hoặc tab mới._parent: Mở liên kết trong khung cha._top: Mở liên kết trong toàn bộ cửa sổ, bỏ qua bất kỳ khung nào.
-
Thuộc tính
titleđược sử dụng để hiển thị một chú giải công cụ trên một liên kết. Khi người dùng di chuột qua liên kết, tiêu đề được chỉ định sẽ được hiển thị.
1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>- Thẻ
<a>cũng được sử dụng để nhảy tới các vị trí cụ thể trong cùng một trang. Để thực hiện điều này, bạn sẽ đặt một thuộc tínhidtrên phần tử mục tiêu và sử dụngidnày trong thuộc tínhhrefcủa liên kết.
Thẻ <span>
1Here is some <span style="color: red;">highlighted text-
Thẻ
<span>là một phần tử nội dòng.Thẻ
<span>là một phần tử nội tuyến, vì vậy nó không làm ngắt dòng khi được sử dụng giữa văn bản, liên kết, hình ảnh, hoặc các phần tử nội tuyến khác. Nó phù hợp một cách tự nhiên vào dòng chảy của trang. -
Bạn có thể áp dụng các kiểu cụ thể cho từng phần.
Khi bạn muốn áp dụng một kiểu chỉ cho một phần của tài liệu, bạn có thể sử dụng thẻ
<span>để gán một lớp CSS hoặc ID và áp dụng kiểu cho một phạm vi cụ thể. -
Thẻ
<span>là một phần tử không có ngữ nghĩa.Vì thẻ
<span>không có ý nghĩa cụ thể hoặc vai trò cấu trúc, nên nó hoàn toàn được sử dụng cho mục đích tạo kiểu hoặc kịch bản. Khi cần nhấn mạnh ngữ nghĩa, nên sử dụng các thẻ ngữ nghĩa như<strong>hoặc<em>, sẽ được giới thiệu sau.
Thẻ <br>
line break.
1Here is some text with a <br> line break.-
Thẻ
<br>là một phần tử inline.Vì thẻ
<br>là một phần tử nội tuyến, nó không chiếm toàn bộ khối, và nó tạo ra một ngắt dòng trong văn bản nơi nó được đặt. Trong khi thẻ<p>thêm khoảng cách trên và dưới để tách các đoạn văn, thẻ<br>tạo một ngắt dòng mà không thêm khoảng cách nào. -
Nó là thẻ tự đóng, do đó không cần thẻ đóng (
</br>). -
Tốt nhất là tránh lạm dụng nó, và hãy sử dụng thẻ
<p>hoặc CSS để ngắt đoạn hay điều chỉnh bố cục.Khi tổ chức văn bản thành các đoạn, thích hợp hơn là sử dụng thẻ
<p>. Cũng nên sử dụng CSS để điều chỉnh bố cục. Ví dụ, sử dụng thuộc tínhwhite-spacetrong CSS có thể hiển thị các ngắt dòng và khoảng trống trong văn bản như họ xuất hiện.
Thẻ <hr>
This is another section of text.
1This is some text.<hr>This is another section of text.-
Thẻ
<hr>là một phần tử cấp khối.Thẻ
<hr>được sử dụng để chèn một đường ngang để tách các phần nội dung về mặt thị giác. Nó cũng có thể được sử dụng để biểu thị một ngắt chủ đề, tạo ý nghĩa dựa trên ngữ cảnh. -
Nó là một thẻ tự đóng, nên không cần thẻ đóng (
</hr>). -
Bạn có thể tùy chỉnh màu sắc, độ dài, và độ dày của nó bằng cách sử dụng CSS.
Thẻ liên quan đến văn bản có ngữ nghĩa
Từ thẻ <h1> đến thẻ <h6>
Main Heading
Subheading
Sub-subheading
1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>-
Các thẻ
<h1>đến<h6>là các thẻ tiêu đề được sử dụng trong HTML.Thẻ
<h1>đại diện cho tiêu đề quan trọng nhất và thường được sử dụng làm tiêu đề chính của toàn bộ trang. Nó là phổ biến khi chỉ sử dụng một thẻ<h1>cho mỗi tài liệu HTML.Thẻ
<h2>là tiêu đề quan trọng kế tiếp sau<h1>và được sử dụng cho tiêu đề phần hoặc chương bên trong trang.Thẻ
<h3>đại diện cho tiêu đề phụ hoặc các phần nhỏ hơn dưới<h2>.Các thẻ
<h4>,<h5>, và<h6>đại diện cho các tiêu đề cấp thấp hơn, được sử dụng cho các mục chi tiết hơn hoặc tiêu đề phần. -
Thẻ tiêu đề chỉ ra tầm quan trọng của văn bản và giúp tạo cấu trúc logic của một trang. Các công cụ tìm kiếm cũng sử dụng thẻ tiêu đề để hiểu nội dung của trang.
Thẻ <strong>
1<strong>Important text</strong> to emphasize significance.-
Thẻ
<strong>là một thẻ HTML được sử dụng để chỉ ra tầm quan trọng hoặc nhấn mạnh của văn bản và thường được hiển thị dưới dạng in đậm. -
Thẻ
<strong>là một thẻ ngữ nghĩa và mục đích chính của nó là thêm ý nghĩa.Nó có thể chỉ ra rằng văn bản có tầm quan trọng về ngữ cảnh. Ví dụ, nó có thể cho thấy tầm quan trọng của văn bản đối với các công cụ tìm kiếm, làm cho nó hữu ích cho SEO. Nó cũng truyền tải tầm quan trọng của văn bản đến người dùng sử dụng trình đọc màn hình. Ngược lại, thẻ
<b>, sẽ được giới thiệu sau, chỉ đơn giản là một thẻ để làm cho văn bản in đậm và không cung cấp nhấn mạnh ngữ nghĩa.
Thẻ <em>
1<em>Emphasized text</em> for italics and emphasis.-
Thẻ
<em>là một thẻ HTML được sử dụng để chỉ ra tầm quan trọng hoặc nhấn mạnh trong văn bản và thường được hiển thị dưới dạng chữ nghiêng. -
Thẻ
<em>là một thẻ ngữ nghĩa, và mục tiêu chính của nó là cung cấp ý nghĩa.Giống như thẻ
<strong>, nó có thể chỉ ra rằng văn bản có tầm quan trọng về ngữ cảnh. Thẻ<strong>thường được hiển thị dưới dạng in đậm, trong khi thẻ<em>thường được hiển thị dưới dạng chữ nghiêng. Cả hai đều được các trình đọc màn hình và công cụ tìm kiếm nhận diện để nhấn mạnh ngữ nghĩa, nhưng<strong>chỉ ra tầm quan trọng mạnh mẽ hơn, trong khi<em>truyền tải nhấn mạnh cảm xúc. Ngoài ra, thẻ<i>, sẽ được giới thiệu sau, chỉ đơn giản là làm cho văn bản nghiêng và không cung cấp nhấn mạnh ngữ nghĩa.
Thẻ <mark>
1<mark>Highlighted text</mark> for attention.- Thẻ
<mark>được sử dụng để chỉ ra rằng văn bản cụ thể có tầm quan trọng về ngữ cảnh. Nó có ích cho việc nổi bật kết quả tìm kiếm hoặc các điểm chính. - Theo mặc định, văn bản được bao quanh bởi thẻ
<mark>được hiển thị với nền màu vàng, nhấn mạnh tầm quan trọng của nó một cách trực quan.
Thẻ <del>
1<del>Deleted text</del> shows removed content.-
Thẻ
<del>được sử dụng để chỉ ra rằng văn bản đã bị xóa hoặc sửa đổi. Thẻ này có ích cho việc hiển thị lịch sử thay đổi hoặc chỉnh sửa văn bản. -
Văn bản được bao quanh bởi thẻ
<del>thường được hiển thị với dấu gạch ngang. Điều này chỉ ra trực quan nội dung đã bị xóa.Văn bản được bao quanh bởi thẻ
<del>cũng được các trình đọc màn hình nhận diện là đã bị xóa. Điều này cho phép nội dung không hiển thị rõ ràng vẫn có thể được hiểu.
Thẻ <ins>
1<ins>Inserted text</ins> shows added content.-
Thẻ
<ins>được sử dụng để chỉ ra văn bản mới được thêm hoặc sửa đổi trong tài liệu. Thẻ này hữu ích để hiển thị lịch sử của việc thêm hoặc sửa đổi văn bản. -
Trong trình duyệt, văn bản được bao bọc giữa thẻ
<ins>thường được hiển thị với gạch chân. Điều này chỉ ra nội dung được thêm vào một cách trực quan.Văn bản được bao bọc trong thẻ
<ins>cũng được các thiết bị đọc màn hình nhận biết là mới được thêm. Điều này cho phép nội dung không hiển thị rõ ràng vẫn có thể được hiểu.
Thẻ <abbr>
1<abbr title="World Health Organization">WHO</abbr>- Thẻ
<abbr>là một phần tử dòng được sử dụng để chỉ ra viết tắt hoặc từ viết tắt. Sử dụng thẻ này cung cấp ý nghĩa đầy đủ của các từ viết tắt và góp phần cải thiện SEO và khả năng truy cập. Nó đặc biệt giúp những người đọc không quen thuộc với từ viết tắt và người dùng thiết bị đọc màn hình hiểu rõ hơn nội dung của nó.
Thẻ liên quan đến trang trí văn bản
Thẻ <b>
1<b>Bold text</b> without semantic emphasis.- Thẻ
<b>là một phần tử dòng được sử dụng để in đậm văn bản. Giống như các thẻ khác mà chúng tôi sẽ giới thiệu, nó được sử dụng để nhấn mạnh trực quan nhưng không nhấn mạnh về mặt ngữ nghĩa.
Thẻ <i>
1<i>Italic text</i> for style.- Thẻ
<i>là một phần tử dòng được sử dụng để in nghiêng văn bản.
Thẻ <u>
1<u>Underlined text</u> for decoration.- Thẻ
<u>là một phần tử dòng được sử dụng để gạch chân văn bản.
Thẻ <small>
1<small>This is small text.</small>- Thẻ
<small>là một phần tử nội tuyến được sử dụng để hiển thị văn bản với kích thước nhỏ hơn. Nó thường được sử dụng để biểu thị thông tin bổ sung hoặc chú thích phụ so với nội dung chính.
Thẻ <s>
1<s>Strikethrough text</s>- Thẻ
<s>là một phần tử dòng được sử dụng để gạch ngang văn bản.
Thẻ <sub>
1H<sub>2</sub>O- Thẻ
<sub>là một phần tử nội tuyến được sử dụng để hiển thị văn bản dưới chỉ số.
Thẻ <sup>
1E = mc<sup>2</sup>- Thẻ
<sup>là một phần tử nội tuyến được sử dụng để hiển thị văn bản trên chỉ số.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.