Cách lồng thẻ HTML chính xác
Nếu bạn nhìn vào đánh dấu HTML cho bất kỳ trang web nào ngày hôm nay, bạn sẽ thấy các phần tử HTML có trong các phần tử HTML khác. Những yếu tố này là "bên trong" của các yếu tố khác được gọi là "yếu tố lồng nhau", và chúng rất cần thiết để xây dựng bất kỳ trang web nào ngày nay.
Thẻ HTML Nest có ý nghĩa gì?
Cách dễ nhất để hiểu làm tổ là nghĩ về các thẻ HTML như các hộp chứa nội dung của bạn. Nội dung của bạn có thể bao gồm văn bản, hình ảnh, v.v. Các thẻ HTML là các hộp xung quanh nội dung. Đôi khi, bạn cần đặt các hộp bên trong các hộp khác. Những "bên trong" hộp được lồng bên trong của người khác.
Nếu bạn có một khối văn bản mà bạn muốn in đậm bên trong một đoạn văn, bạn sẽ có hai phần tử HTML cũng như chính văn bản đó.
Ví dụ: Đây là câu văn bản.Văn bản đó là những gì chúng tôi sẽ sử dụng làm ví dụ của chúng tôi. Đây là cách nó sẽ được viết.
Ví dụ: Đây là câu văn bản.
Bởi vì bạn muốn chữ "câu" được in đậm, bạn thêm mở và đóng các thẻ in đậm trước và sau đó.
Ví dụ: Đây là câu của văn bản.
Như bạn có thể thấy, chúng ta có một hộp (đoạn văn) chứa nội dung / văn bản câu của chúng ta, cộng với một hộp thứ hai (cặp thẻ mạnh), sẽ làm cho từ đó được in đậm.
Khi bạn lồng thẻ, điều quan trọng là bạn đóng các thẻ theo thứ tự ngược lại mà bạn đã mở chúng. Bạn mở
đầu tiên, theo sau là , có nghĩa là bạn đảo ngược và đóng và sau đó .
Một cách khác để suy nghĩ về điều này là một lần nữa sử dụng sự tương tự của các hộp. Nếu bạn đặt một hộp bên trong một hộp khác, bạn phải đóng hộp bên trong trước khi bạn có thể đóng hộp bên ngoài hoặc có chứa.
Thêm thẻ lồng nhau khác
Điều gì sẽ xảy ra nếu bạn chỉ muốn một hoặc hai từ được in đậm và một từ khác được in nghiêng? Đây là cách để làm điều đó.
Ví dụ: Đây là câu của văn bản và nó cũng có văn bản in nghiêng . Bạn có thể thấy rằng hộp bên ngoài của chúng tôi, , hiện có hai thẻ lồng nhau bên trong nó - và . Cả hai phải được đóng trước khi hộp có chứa có thể được đóng lại. Ví dụ: Đây là câu của văn bản và nó cũng có văn bản in nghiêng . Đây là một đoạn khác. < / p> Trong trường hợp này, chúng tôi có các hộp bên trong hộp! Hộp ra nhiều nhất là Lý do số một mà bạn nên quan tâm về làm tổ là nếu bạn định sử dụng CSS. Cascading Style Sheets dựa vào các thẻ được lồng vào nhau một cách nhất quán trong tài liệu để nó có thể cho biết các kiểu bắt đầu và kết thúc ở đâu. Nếu bạn thiết lập kiểu sẽ ảnh hưởng đến tất cả "các liên kết nằm bên trong phân chia với một lớp văn bản" nội dung chính "trên trang, việc lồng không chính xác sẽ khiến trình duyệt khó biết nơi áp dụng các kiểu này. Hãy xem xét một số HTML: Ví dụ: Đây là câu của văn bản và nó cũng có văn bản in nghiêng . Đây là một đoạn khác . Sử dụng ví dụ tôi vừa nói, nếu tôi muốn viết một kiểu CSS có thể ảnh hưởng đến liên kết bên trong bộ phận này và chỉ liên kết đó (trái ngược với bất kỳ liên kết nào khác trong các phần khác của trang), tôi sẽ cần sử dụng làm tổ để viết phong cách của tôi, như vậy: Các lý do khác bao gồm khả năng truy cập và khả năng tương thích trình duyệt. Nếu HTML của bạn không được lồng vào nhau, trình đọc màn hình và trình duyệt cũ sẽ không thể truy cập được nữa và thậm chí nó có thể phá vỡ hoàn toàn giao diện trực quan của trang nếu trình duyệt không thể tìm ra cách hiển thị đúng trang vì các phần tử và thẻ HTML không đúng chỗ. Cuối cùng, nếu bạn đang cố gắng viết HTML hoàn toàn chính xác và hợp lệ, bạn sẽ cần phải sử dụng đúng cách lồng nhau. Nếu không, mọi trình xác thực sẽ gắn cờ HTML của bạn là không chính xác. Tại sao bạn nên quan tâm đến Nesting