Các phần tử HTML bổ sung

Trong các hoạt động trước, bạn đã tìm hiểu:

  • Khái niệm cơ bản về các phần tử và thẻ HTML.
  • Cách sắp xếp cấu trúc trang web.
  • HTML ngữ nghĩa và các phương pháp hay nhất.

Với bài viết này, bạn sẽ tiếp tục nâng cao kiến thức về HTML và trình bày các phần tử HTML bổ sung.

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

Các thành phần này hỗ trợ việc tạo nội dung văn bản cũng như bổ sung cấu trúc, phong cách và ý nghĩa. Có nhiều đoạn nội dung văn bản có thể kết hợp các thành phần sau.

Phần tử khối trích dẫn

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

Ví dụ này cho thấy cách sử dụng phần tử <blockquote>, hiển thị một câu trích dẫn nổi tiếng của Mahatma Gandhi. Có rất nhiều câu trích dẫn hay trên mạng khiến bạn nhớ mãi nội dung và ý nghĩa. Hãy nghĩ về một vài nhân vật truyền cảm hứng mà bạn yêu thích và những câu nói hay của họ.

Sử dụng phần tử <blockquote> khi sử dụng dấu ngoặc kép và thông tin tham chiếu từ một nguồn. Phần tử <blockquote> tạo ra một thụt lề và căn chỉnh duy nhất trong bản trình bày, đồng thời sử dụng cả thẻ mở và thẻ đóng. <blockquote> đặc biệt hữu ích khi sử dụng dấu ngoặc kép dài bao gồm nhiều dòng văn bản.

Bạn cũng có thể sử dụng nhiều phần tử trong phần tử <blockquote>, chẳng hạn như tiêu đề, đoạn hoặc danh sách.

Phần tử <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

Thông thường, trang web sẽ có phần Câu hỏi thường gặp và người dùng có thể sử dụng thêm thông tin bổ sung. Phần Câu hỏi thường gặp thường dùng cho thông tin sản phẩm, hành trình du lịch hoặc bất kỳ tình huống hỏi đáp nào.

Phần tử <details> hữu ích khi sử dụng một tiện ích được công bố chứa thông tin bổ sung. Phần tử này có tích hợp sẵn chức năng bật/tắt và người dùng có thể mở và đóng nút bật/tắt. Khi nút bật/tắt ở trạng thái mở, nội dung thông tin bổ sung sẽ mở rộng và người dùng có thể đọc được. Khi nút bật/tắt này đóng, người dùng sẽ không thấy nội dung thông tin bổ sung. Để đặt tên cho tiện ích <details>, hãy sử dụng phần tử <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Đây là phần tử <figure> đang hoạt động. Ở đây, bạn có thể thấy rằng <figure>, được sử dụng cùng với phần tử <figcaption>, có thể được dùng để nâng cao trải nghiệm hình ảnh.

Bạn luôn có thể xem hình ảnh trên web và các dữ liệu hình ảnh hữu ích khác. Các yếu tố hình ảnh giúp thu hút sự chú ý của khách truy cập và tạo ra trải nghiệm người dùng tuyệt vời. Phần tử <figure> là một cách gắn nhãn hình ảnh, bảng, biểu đồ, v.v. Phần tử này hoạt động bằng cách tạo ra nội dung độc lập liên quan đến nội dung chính.

Phần tử <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

Phần tử <time> cung cấp cả ý nghĩa và ngữ nghĩa, giúp cải thiện chức năng cho các hoạt động như lên lịch hẹn trực tuyến, xuất bản ngày và giờ cho bài viết trên blog, bản lưu trữ, v.v. Một số ví dụ về trang web sẽ sử dụng phần tử <time>, bao gồm việc sử dụng Lịch Google, xuất bản bài viết trực tiếp trên nền tảng hoặc đọc kho lưu trữ trực tuyến trước đây từ một trang web thư viện.

Phần tử <time> tham chiếu đến thời gian và có thể biểu thị thời gian của đồng hồ 24 giờ hoặc một ngày cụ thể có thể điều chỉnh theo múi giờ và vị trí. Phần tử này yêu cầu cả thẻ mở và thẻ đóng, <time></time>. Bạn có thể thêm thuộc tính datetime để có thể đọc ngày tháng ở định dạng mà máy có thể đọc được.

Siêu dữ liệu tài liệu

<title>Sarah's Favorite Food Recipes</title>

Bất cứ khi nào bạn nhập vào một URL của trang web, tên <title> có thể được đọc trên thanh trình duyệt hoặc thẻ trang web. Đây là tên tiêu đề mà bạn thấy được cung cấp cho một trang web. Phần tử này rất quan trọng và được một công cụ tìm kiếm sử dụng để hiển thị danh sách các trang web liên quan trong kết quả tìm kiếm. Độ dài của tiêu đề có thể thay đổi từ ngắn và mô tả cụ thể đến dài hơn và mô tả rõ hơn.

Tình huống: bạn có một trang web mà bạn đang cân nhắc nhưng không thể nhớ URL của trang web cụ thể. Nhập từ khoá vào công cụ tìm kiếm. Công cụ tìm kiếm giúp theo dõi trang web mà bạn đang tìm và bạn có thể xem tên <title> xuất hiện trong phần tìm kiếm.

Phần tử nội dung được nhúng

Ngoài nội dung văn bản, bạn có thể sử dụng nhiều thành phần nội dung bổ sung.

Phần tử <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Khi hoàn tất quá trình mua sắm các mặt hàng trên mạng và nhấp vào lựa chọn thanh toán của bạn, chẳng hạn như PayPal hoặc Apple Pay, các tính năng này thường được thêm vào trang web có biểu tượng <iframe>. Một trải nghiệm phổ biến khác là xem bản đồ trực tuyến để tìm kiếm doanh nghiệp địa phương. Bạn có thể thêm những loại trải nghiệm người dùng này trên trang web bằng iframe. Trong ví dụ trên, bạn thấy URL Wikipedia trong một iframe, có tiêu đề là "Wikipedia".

Phần tử <iframe> cho phép bạn chèn nội dung từ một nguồn khác và nhúng một khung trong một trang web. Cửa sổ này tạo một khung hình chữ nhật và hiển thị nội dung trong trình duyệt. Khung cho phép trình bày bố cục có hình cửa sổ trong phần tử <iframe>. Đó là một cách hiệu quả để thêm nội dung vào trang web của bạn nhằm nâng cao trải nghiệm.

Thành phần biểu mẫu

<progress max="100" value="30"> 30% </progress>

Khi xem video dài, bài giảng hoặc điền thông tin vào một đơn đăng ký mở rộng, thanh tiến trình trực quan có thể giúp ích cho việc theo dõi tiến trình của bạn. Phần tử <progress> hữu ích trong những loại tình huống này.

Phần tử này được mô tả dưới dạng thanh hình ảnh có màu nền. Thanh hình ảnh có thể có nhiều kích thước và màu nền. Với thanh tiến trình, bạn có thể tuỳ ý sử dụng các thuộc tính maxvalue. Thuộc tính max đặt số thực dấu phẩy động và thuộc tính value ghi chú tiến độ của một công việc.

Lên nội dung

<canvas id="canvas"></canvas>

Để có thể vẽ đồ hoạ và ảnh động theo thời gian thực, hãy sử dụng phần tử <canvas>. Đặt phần tử <canvas> vào trang web HTML để tạo một canvas. Phần tử này yêu cầu mã JavaScript cho chức năng vẽ và tạo đồ hoạ.

Phần tử của nội dung bảng

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

Phần tử <table>

Phần tử <table> sẽ tạo một bảng. Đây là điểm bắt đầu để thêm các phần tử bổ sung bằng hàng và cột. Bảng thường xuất hiện trên các trang web, là một cách hữu ích để sắp xếp và trình bày thông tin. Một trường hợp sử dụng phần tử <table> là trình bày thông tin dạng bảng cho người dùng, chẳng hạn như loại thông tin bạn có thể tìm thấy trong bảng tính.

Phần tử <th>

Phần tử <th> là tiêu đề của một nhóm ô.

Phần tử <tr>

Phần tử <tr> xác định một hàng ô trong bảng. Tại đây, bạn có thể thêm dữ liệu di động cụ thể.

Phần tử <td>

Phần tử <td> tạo ô, thêm nội dung cần thiết.

Kết luận

Trong bài viết này, bạn đã khám phá các phần tử HTML khác và xây dựng kỹ năng lập trình của bạn. Bạn đã tìm hiểu thêm về nội dung, văn bản cùng dòng, nội dung được nhúng và các phần tử trong bảng. Giờ đây, bạn đã hiểu rõ hơn về các phần tử HTML bổ sung. Hãy tiếp tục phát huy!