HTML - Phrase Elements: Giving Your Text More Meaning
Xin chào các bạn nhà phát triển web tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy.exciting này vào thế giới của các phần tử phrase trong HTML. Như một ai đó đã dạy HTML hơn một thập kỷ, tôi không thể chờ đợi để chia sẻ những công cụ mạnh mẽ này sẽ giúp bạn tạo ra nội dung web ý nghĩa và biểu cảm hơn. Hãy cùng khám phá!
What Are HTML Phrase Elements?
Trước khi chúng ta đi vào chi tiết, hãy hiểu phần tử phrase là gì. Hãy tưởng tượng chúng như những thẻ đặc biệt mang lại ý nghĩa hoặc nhấn mạnh thêm cho một phần của văn bản của bạn. Chúng giống như gia vị trong món ăn yêu thích của bạn - chúng thêm hương vị và chiều sâu cho nội dung của bạn!
Dưới đây là một cái nhìn nhanh về các phần tử phrase chúng ta sẽ khám phá:
| Element | Description |
|---|---|
<em> |
Văn bản được nhấn mạnh |
<mark> |
Văn bản được đánh dấu hoặc nổi bật |
<strong> |
Văn bản quan trọng |
<abbr> |
Viết tắt |
<dfn> |
Term định nghĩa |
<q> |
Trích dẫn ngắn |
<cite> |
Trích dẫn |
<code> |
Mã máy tính |
<kbd> |
Đầu vào từ bàn phím |
<var> |
Biến trong lập trình hoặc toán học |
<samp> |
Kết quả mẫu từ một chương trình |
<address> |
Thông tin liên hệ |
Bây giờ, hãy khám phá từng phần tử này chi tiết!
Emphasized Text: The <em> Element
Khi bạn muốn nhấn mạnh một từ hoặc cụm từ, giống như bạn sẽ làm trong lời nói, phần tử <em> là công cụ lý tưởng của bạn.
<p>Tôi <em>thích</em> học HTML!</p>Điều này sẽ hiển thị như sau:
Tôi thích học HTML!
Trình duyệt thường hiển thị văn bản được nhấn mạnh in nghiêng, nhưng hãy nhớ, điều này là về ý nghĩa, không chỉ về phong cách. Các trình đọc màn hình thường thay đổi giọng nói khi gặp thẻ <em>, làm cho nội dung của bạn dễ tiếp cận hơn.
Marked Text: The <mark> Element
Bạn đã bao giờ sử dụng bút highlighter trong sách giáo khoa của mình chưa? Đó chính xác là điều mà phần tử <mark> làm trong HTML!
<p>Phần quan trọng nhất của câu là <mark>ở đây</mark>.</p>Điều này sẽ xuất hiện như sau:
Phần quan trọng nhất của câu là ở đây.
Nó hoàn hảo cho việc thu hút sự chú ý đến các phần cụ thể của văn bản của bạn, giống như tôi từng làm với máy chiếu trong lớp!
Strong Text: The <strong> Element
Khi bạn cần chỉ ra rằng văn bản có tầm quan trọng lớn, <strong> là siêu anh hùng của bạn.
<p>Lưu ý: <strong>Luôn sao lưu tệp của bạn trước khi cập nhật hệ thống!</strong></p>Điều này sẽ được hiển thị như sau:
Lưu ý: Luôn sao lưu tệp của bạn trước khi cập nhật hệ thống!
Các trình duyệt thường hiển thị văn bản này in đậm, nhưng một lần nữa, điều này là về ý nghĩa. Nó giống như đang nói, "Hey, hãy chú ý đến điều này!"
Abbreviation Text: The <abbr> Element
Chúng ta đều yêu thích viết tắt, phải không? Nhưng không phải ai cũng biết chúng có nghĩa là gì. Đó là lúc <abbr> trở nên hữu ích.
<p>Tôi làm việc với <abbr title="HyperText Markup Language">HTML</abbr> hàng ngày.</p>Điều này sẽ hiển thị như sau:
Tôi làm việc với HTML hàng ngày.
Di chuột qua "HTML" trong trình duyệt, và bạn sẽ thấy hình thức đầy đủ! Nó giống như có một vòng解码ring cho viết tắt của bạn.
Definition Terms: The <dfn> Element
Khi bạn đang giới thiệu một thuật ngữ hoặc khái niệm mới, <dfn> là người bạn tốt nhất của bạn.
<p><dfn>HTML</dfn> là ngôn ngữ đánh dấu chuẩn cho việc tạo trang web.</p>Điều này cho biết các trình duyệt và công cụ tìm kiếm, "Hey, chúng ta đang định nghĩa một điều gì đó quan trọng ở đây!"
Quoting Text: The <q> Element
Đối với những lần bạn muốn bao gồm một trích dẫn ngắn trong một đoạn văn, <q> là hoàn hảo.
<p> Như giáo viên yêu thích của tôi luôn nói, <q>The only silly question is the one you don't ask.</q></p>Điều này sẽ xuất hiện như sau:
Như giáo viên yêu thích của tôi luôn nói, "The only silly question is the one you don't ask."
Most browsers will automatically add quotation marks around the text within <q> tags.
Text Citations: The <cite> Element
Khi bạn đang tham khảo một sách, phim hoặc bất kỳ tác phẩm nào khác, <cite> là ngôi sao trích dẫn của bạn.
<p>Sách yêu thích của tôi là <cite>The Hitchhiker's Guide to the Galaxy</cite> của Douglas Adams.</p>Điều này thường được hiển thị in nghiêng:
Sách yêu thích của tôi là The Hitchhiker's Guide to the Galaxy của Douglas Adams.
Computer Code: The <code> Element
Đối với tất cả các bạn nhà phát triển lập trình mới, khi bạn muốn hiển thị các đoạn mã, <code> là bạn tốt nhất của bạn.
<p>Chức năng <code>console.log()</code> được sử dụng để in tin nhắn vào console trong JavaScript.</p>Điều này sẽ hiển thị như sau:
Chức năng console.log() được sử dụng để in tin nhắn vào console trong JavaScript.
Keyboard Text: The <kbd> Element
Khi bạn cần chỉ ra đầu vào từ bàn phím, <kbd> đến cứu bạn.
<p>Để lưu tệp của bạn, nhấn <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>Điều này sẽ hiển thị như sau:
Để lưu tệp của bạn, nhấn Ctrl + S.
Programming Variables: The <var> Element
Đối với những lần bạn đang thảo luận về các biến trong ngữ cảnh toán học hoặc lập trình, <var> là nghệ sĩ biến của bạn.
<pTrong phương trình <var>E</var> = <var>mc</var><sup>2</sup>, <var>E</var> đại diện cho năng lượng.</p>Điều này thường được hiển thị in nghiêng:
Trong phương trình E = mc2, E đại diện cho năng lượng.
Program Output: The <samp> Element
Khi bạn muốn hiển thị một ví dụ về kết quả từ một chương trình, <samp> là ngôi sao mẫu của bạn.
<p>Nếu bạn chạy mã này, bạn sẽ thấy: <samp>Hello, World!</samp></p>Điều này thường được hiển thị trong phông chữ monospace:
Nếu bạn chạy mã này, bạn sẽ thấy: Hello, World!
Address Text: The <address> Element
Cuối cùng nhưng không kém phần quan trọng, khi bạn cần cung cấp thông tin liên hệ, <address> là phần tử bạn cần.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>Điều này thường được hiển thị in nghiêng và thường có một dòng trễ trước và sau.
Và thế là bạn đã biết về thế giới tuyệt vời của các phần tử phrase trong HTML. Nhớ rằng, các phần tử này không chỉ về việc thay đổi cách văn bản trông như thế nào - chúng về việc thêm ý nghĩa và cấu trúc cho nội dung của bạn. Chúng làm cho trang web của bạn dễ tiếp cận hơn, phong phú hơn về ngữ nghĩa và cuối cùng, chuyên nghiệp hơn.
Khi chúng ta kết thúc, tôi nhớ lại một học sinh từng nói với tôi, "Học HTML giống như học một ngôn ngữ mới, nhưng thay vì nói chuyện với người khác, tôi đang nói chuyện với máy tính!" Và bạn biết gì? Cô ấy hoàn toàn đúng. Với các phần tử phrase này trong bộ công cụ của bạn, bạn đang trên đường trở thành thành thạo trong ngôn ngữ của web.
Tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy vui vẻ với HTML. Trước khi bạn biết, bạn sẽ tạo ra các trang web không chỉ trông đẹp mà còn ý nghĩa và dễ tiếp cận. Chúc các bạn may mắn trong việc lập trình, mọi người!
Credits: Image by storyset