Cách lồng các phần tử HTML
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Hướng dẫn này sẽ dạy bạn cách lồng các phần tử HTML để áp dụng nhiều thẻ HTML cho một phần nội dung.
Các phần tử HTML có thể được lồng vào nhau , nghĩa là một phần tử này có thể được đặt bên trong một phần tử khác. Việc lồng ghép cho phép bạn áp dụng nhiều thẻ HTML cho một phần nội dung. Ví dụ: hãy thử dán đoạn mã sau vào trong index.html của bạn:
<strong>My bold text and <em>my bold and emphasized text</em></strong>
Lưu file của bạn và reload trong trình duyệt. (Để biết hướng dẫn về cách tạo index.html , vui lòng xem hướng dẫn của ta tại đây hoặc để tải file trong trình duyệt của bạn, hãy xem hướng dẫn của ta tại đây .) Bạn sẽ nhận được thông tin như sau:
Văn bản in đậm và văn bản in đậm và nhấn mạnh của tôi
Lồng các phương pháp hay nhất
Lưu ý bạn nên luôn đóng các thẻ lồng nhau theo thứ tự ngược lại mà chúng đã được mở.
Ví dụ: trong ví dụ bên dưới, <em> đóng đầu tiên vì đây là thẻ cuối cùng mở. Thẻ <strong> đóng sau cùng vì nó là thẻ mở đầu tiên.
This sentence contains HTML elements that are <strong><em>nested according to best practices</em></strong>.
Ví dụ về bộ đếm, mã HTML sau chứa các thẻ không được lồng vào nhau theo các phương pháp hay nhất, vì <strong> đóng trước <em> :
This sentence contains HTML elements that are <strong><em>not nested according to best practices</strong></em>.
Mặc dù không cần thiết về mặt kỹ thuật để hiển thị HTML của bạn trong trình duyệt, nhưng việc lồng các thẻ của bạn theo thứ tự thích hợp có thể giúp cải thiện khả năng đọc của mã HTML cho bạn hoặc các nhà phát triển khác.
Các tin liên quan
Cách thêm một Favicon vào trang web của bạn bằng HTML2020-08-26
Tạo phần trên cùng của trang chủ của bạn bằng HTML
2020-08-26
Cách sử dụng các thuộc tính HTML
2020-08-26
Cách thêm siêu liên kết trong HTML
2020-08-26
Cách sửa đổi màu của các phần tử HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách viết HTML nhanh chóng bằng Emmet
2019-07-02
Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML
2018-01-18
Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
