Trong bài này, cafedev sẽ đi qua các phần tử HTML như: <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo>

Sau đó tới comments trong HTML sẽ không được hiển thị trong trình duyệt, nhưng chúng có thể giúp ghi lại những suy nghĩ, lưu ý trong nguồn HTML của bạn.

Ví dụ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from cafedev website:</p>
<blockquote cite="https://cafedev.vn/tu-hoc-html-kieu-dangstyles-trong-html/">
Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu. 
</blockquote>

</body>
</html>

Copy and chạy code

1. Phần tử <blockquote>

Phần tử<blockquote> xác định một phần được trích dẫn từ một nguồn khác.

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from cafedev website:</p>
<blockquote cite="https://cafedev.vn/tu-hoc-html-kieu-dangstyles-trong-html/">
Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu. 
</blockquote>

</body>
</html>

2. Phần tử <q>

Thẻ <q> xác định một trích dẫn ngắn.

Trình duyệt thường chèn dấu ngoặc kép xung quanh câu đó.

 <p>>Cafedev là kênh thông tin, sự kiện: <q> hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu.</q></p> 

Copy and chạy code

3. Phần tử <abbr> cho các từ viết tắc

Thẻ <abbr> định nghĩa một từ viết tắt hoặc viết tắt, như “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.

Đánh dấu viết tắt có thể cung cấp thông tin hữu ích cho trình duyệt, hệ thống dịch thuật và công cụ tìm kiếm.

Mẹo: Sử dụng thuộc tính tiêu đề toàn cầu để hiển thị mô tả cho từ viết tắt khi bạn di chuột qua phần tử.

 <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> 

Copy and chạy code

4. Phần tử <address> cho thông tin liên hệ

Thẻ <address> định nghĩa thông tin liên hệ cho tác giả / chủ sở hữu của tài liệu hoặc bài viết.

Thông tin liên lạc có thể là địa chỉ email, URL, địa chỉ thực, số điện thoại, xử lý phương tiện truyền thông xã hội, v.v.

Văn bản trong phần tử <address> thường được in nghiêng và các trình duyệt sẽ luôn thêm dấu ngắt dòng trước và sau phần tử <address>.

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <address>
Written by David Xuan.<br>
Visit us at:<br>
Ho Chi Minh<br>
Binh Thanh, HCM<br>
</address> 

Copy and chạy code

5. Thẻ <cite> cho tiêu đề công việc

Thẻ <cite> xác định tiêu đề của một tác phẩm sáng tạo (ví dụ: một cuốn sách, một bài thơ, một bài hát, một bộ phim, một bức tranh, một tác phẩm điêu khắc, v.v.).

Lưu ý: Tên của một người không phải là tiêu đề của tác phẩm.

Văn bản trong phần tử thường được in nghiêng.

 <p><cite>Cafedev</cite> by David Xuan in 2019.</p>

Copy and chạy code

6. Phần tử <bdo> để ghi đè 2 chiều

BDO là viết tắt của Ghi đè hai chiều.

Thẻ <bdo> được sử dụng để ghi đè hướng văn bản hiện tại:

 <bdo dir="rtl">This text will be written from right to left</bdo> 

Copy and chạy code

7. Comment trong HTML

Bạn có thể thêm Comment vào nguồn HTML của mình bằng cách sử dụng cú pháp sau:

<!-- Write your comments here -->

Lưu ý rằng có một dấu chấm than (!) Trong thẻ bắt đầu, nhưng không phải trong thẻ kết thúc.

Lưu ý: Comment không được trình duyệt hiển thị, nhưng chúng có thể giúp ghi lại thứ gì đó trong code nguồn HTML của bạn.

Ví dụ

 <!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here --> 

Copy and chạy code

Comment cũng rất tốt để gỡ lỗi HTML, bởi vì bạn có thể Comment từng dòng code HTML, từng dòng một để tìm lỗi:

Ví dụ:

<!-- Do not display this image at the moment
 <img border="0" src="pic_cafedev.jpg"  alt="Cafedev">
 -->

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!