Cú pháp của một cấu trúc HTML là gì?
Ngoài việc xác định các phần riêng lẻ trên trang của bạn (chẳng hạn như "đoạn văn" hoặc "hình ảnh"), HTML còn có một số thành phần cấp khối được sử dụng để xác định các khu vực trên trang web của bạn (chẳng hạn như "tiêu đề", "điều hướng . Bài viết này xem xét cách lập kế hoạch cấu trúc trang web cơ bản và viết HTML để thể hiện cấu trúc này Show
Các phần cơ bản của tài liệuCác trang web có thể và sẽ trông khá khác nhau, nhưng tất cả chúng đều có xu hướng chia sẻ các thành phần tiêu chuẩn tương tự, trừ khi trang đang hiển thị trò chơi hoặc video toàn màn hình, là một phần của một loại dự án nghệ thuật nào đó hoặc chỉ là có cấu trúc tồi tiêu đềThường là một dải lớn ở trên cùng với tiêu đề lớn, biểu tượng và có thể là dòng giới thiệu. Điều này thường giữ nguyên từ trang web này sang trang web khác thanh điều hướngLiên kết đến các phần chính của trang web; . Giống như tiêu đề, nội dung này thường nhất quán từ trang này sang trang khác — việc điều hướng không nhất quán trên trang web của bạn sẽ chỉ khiến người dùng bối rối, thất vọng. Nhiều nhà thiết kế web coi thanh điều hướng là một phần của tiêu đề hơn là một thành phần riêng lẻ, nhưng đó không phải là một yêu cầu; Nội dung chínhMột khu vực lớn ở trung tâm chứa hầu hết nội dung độc đáo của một trang web nhất định, ví dụ: video bạn muốn xem hoặc câu chuyện chính bạn đang đọc hoặc bản đồ bạn muốn xem hoặc tiêu đề tin tức, . Đây là một phần của trang web chắc chắn sẽ thay đổi từ trang này sang trang khác thanh bênMột số thông tin ngoại vi, liên kết, báo giá, quảng cáo, v.v. Thông thường, điều này phụ thuộc vào nội dung có trong nội dung chính (ví dụ: trên trang bài viết tin tức, thanh bên có thể chứa tiểu sử của tác giả hoặc liên kết đến các bài viết liên quan) nhưng cũng có trường hợp bạn sẽ tìm thấy một số yếu tố lặp lại như cuối trangMột dải ở cuối trang thường chứa bản in đẹp, thông báo bản quyền hoặc thông tin liên hệ. Đó là nơi để đặt thông tin chung (như tiêu đề) nhưng thông thường, thông tin đó không quan trọng hoặc thứ yếu đối với chính trang web. Chân trang đôi khi cũng được sử dụng cho mục đích SEO, bằng cách cung cấp liên kết để truy cập nhanh vào nội dung phổ biến Một "trang web điển hình" có thể được cấu trúc như thế này Ghi chú. Hình ảnh trên minh họa các phần chính của tài liệu mà bạn có thể xác định bằng HTML. Tuy nhiên, giao diện của trang được hiển thị ở đây - bao gồm bố cục, màu sắc và phông chữ - đạt được bằng cách áp dụng CSS cho HTML Trong mô-đun này, chúng tôi không dạy CSS, nhưng khi bạn đã hiểu những kiến thức cơ bản về HTML, hãy thử đi sâu vào mô-đun các bước đầu tiên về CSS của chúng tôi để bắt đầu tìm hiểu cách tạo kiểu trang web của bạn HTML để cấu trúc nội dungVí dụ đơn giản hiển thị ở trên không đẹp, nhưng nó hoàn toàn phù hợp để minh họa ví dụ về bố cục trang web điển hình. Một số trang web có nhiều cột hơn, một số phức tạp hơn rất nhiều, nhưng bạn hiểu ý. Với CSS phù hợp, bạn có thể sử dụng khá nhiều phần tử bất kỳ để bao quanh các phần khác nhau và khiến nó trông như ý muốn, nhưng như đã thảo luận trước đây, chúng ta cần tôn trọng ngữ nghĩa và sử dụng phần tử phù hợp cho đúng công việc Điều này là do hình ảnh không nói lên toàn bộ câu chuyện. Chúng tôi sử dụng màu sắc và kích thước phông chữ để thu hút sự chú ý của người dùng sáng mắt vào những phần hữu ích nhất của nội dung, chẳng hạn như menu điều hướng và các liên kết có liên quan, nhưng đối với những người khiếm thị chẳng hạn, họ có thể không tìm thấy các khái niệm như "màu hồng" và "lớn" thì sao? Ghi chú. Khoảng 8% nam giới và 0. 5% phụ nữ mù màu; . Người mù và khiếm thị chiếm khoảng 4-5% dân số thế giới (năm 2015 có 940 triệu người bị giảm thị lực ở một mức độ nào đó, trong khi tổng dân số khoảng 7. 5 tỷ) Trong mã HTML của mình, bạn có thể đánh dấu các phần nội dung dựa trên chức năng của chúng — bạn có thể sử dụng các phần tử đại diện cho các phần nội dung được mô tả ở trên một cách rõ ràng và các công nghệ hỗ trợ như trình đọc màn hình có thể nhận ra các phần tử đó và giúp thực hiện các tác vụ như "tìm phần chính . " Như chúng tôi đã đề cập trước đó trong khóa học, có một số hậu quả của việc không sử dụng đúng cấu trúc phần tử và ngữ nghĩa cho đúng công việc Để thực hiện đánh dấu ngữ nghĩa như vậy, HTML cung cấp các thẻ chuyên dụng mà bạn có thể sử dụng để thể hiện các phần đó, ví dụ:
học tích cực. khám phá mã cho ví dụ của chúng tôiVí dụ của chúng tôi nhìn thấy ở trên được thể hiện bằng đoạn mã sau (bạn cũng có thể tìm thấy ví dụ trong kho lưu trữ GitHub của chúng tôi). Chúng tôi muốn bạn xem ví dụ trên, sau đó xem qua danh sách bên dưới để xem phần nào tạo nên phần nào của hình ảnh
Hãy dành chút thời gian để xem qua mã và hiểu nó — các nhận xét bên trong mã cũng sẽ giúp bạn hiểu mã đó. Chúng tôi không yêu cầu bạn làm nhiều việc khác trong bài viết này, bởi vì chìa khóa để hiểu bố cục tài liệu là viết một cấu trúc HTML hợp lý, sau đó trình bày nó bằng CSS. Chúng tôi sẽ đợi điều này cho đến khi bạn bắt đầu nghiên cứu bố cục CSS như một phần của chủ đề CSS Các yếu tố bố cục HTML chi tiết hơnThật tốt khi hiểu chi tiết ý nghĩa tổng thể của tất cả các thành phần phân đoạn HTML — đây là điều bạn sẽ làm dần dần khi bắt đầu có thêm kinh nghiệm phát triển web. Bạn có thể tìm thấy rất nhiều chi tiết bằng cách đọc tài liệu tham khảo phần tử HTML của chúng tôi. Hiện tại, đây là những định nghĩa chính mà bạn nên cố gắng hiểu
Có thể nhấp vào từng phần tử nói trên để đọc bài viết tương ứng trong phần "Tham khảo phần tử HTML", cung cấp thêm chi tiết về từng phần tử Trình bao bọc phi ngữ nghĩaĐôi khi bạn sẽ gặp tình huống không thể tìm thấy yếu tố ngữ nghĩa lý tưởng để nhóm một số mục lại với nhau hoặc bọc một số nội dung. Đôi khi, bạn có thể chỉ muốn nhóm một tập hợp các phần tử lại với nhau để tác động đến tất cả chúng dưới dạng một thực thể duy nhất với một số CSS hoặc JavaScript. Đối với những trường hợp như thế này, HTML cung cấp các phần tử 0 và 2. Bạn nên sử dụng những thứ này tốt nhất với thuộc tính 3 phù hợp, để cung cấp một số loại nhãn cho chúng để chúng có thể dễ dàng được nhắm mục tiêu 2 là một phần tử nội tuyến phi ngữ nghĩa, bạn chỉ nên sử dụng phần tử này nếu bạn không thể nghĩ ra một phần tử văn bản ngữ nghĩa tốt hơn để bọc nội dung của mình hoặc không muốn thêm bất kỳ ý nghĩa cụ thể nào. Ví dụ
Trong trường hợp này, ghi chú của người biên tập được cho là chỉ cung cấp thêm hướng dẫn cho đạo diễn vở kịch; . Đối với người dùng sáng mắt, CSS có lẽ sẽ được sử dụng để tạo khoảng cách giữa ghi chú với văn bản chính một chút 0 là phần tử phi ngữ nghĩa ở cấp độ khối, bạn chỉ nên sử dụng phần tử này nếu bạn không thể nghĩ ra phần tử khối ngữ nghĩa nào tốt hơn để sử dụng hoặc không muốn thêm bất kỳ ý nghĩa cụ thể nào. Ví dụ: hãy tưởng tượng một tiện ích giỏ hàng mà bạn có thể chọn kéo lên bất kỳ lúc nào trong thời gian của bạn trên một trang web thương mại điện tử 4Đây thực sự không phải là một 1, vì nó không nhất thiết phải liên quan đến nội dung chính của trang (bạn muốn nó có thể xem được từ bất cứ đâu). Nó thậm chí không đảm bảo đặc biệt bằng cách sử dụng 9, vì nó không phải là một phần nội dung chính của trang. Vì vậy, một 0 là tốt trong trường hợp này. Chúng tôi đã bao gồm tiêu đề làm biển chỉ dẫn để hỗ trợ người dùng trình đọc màn hình tìm thấy tiêu đề đóCảnh báo. Div rất thuận tiện để sử dụng nên rất dễ sử dụng chúng quá nhiều. Vì chúng không mang giá trị ngữ nghĩa, chúng chỉ làm lộn xộn mã HTML của bạn. Hãy cẩn thận chỉ sử dụng chúng khi không có giải pháp ngữ nghĩa nào tốt hơn và cố gắng giảm mức sử dụng chúng xuống mức tối thiểu nếu không bạn sẽ gặp khó khăn trong việc cập nhật và duy trì tài liệu của mình Ngắt dòng và quy tắc ngangHai yếu tố mà bạn sẽ thỉnh thoảng sử dụng và sẽ muốn biết về chúng là 9 và 80
|