Cú pháp của một cấu trúc HTML là gì?

Các phần cơ bản của tài liệu

Cá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

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

Liê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;

Mộ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

Mộ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ư

Mộ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 dung

Ví 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ụ:

• tiêu đề.

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  5
• thanh điều hướng.

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  6
• Nội dung chính.

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  7, với các tiểu mục nội dung khác nhau được đại diện bởi các phần tử

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  8,

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  9 và

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  0
• thanh bên.

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  1;
• cuối trang.

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  3

học tích cực. khám phá mã cho ví dụ của chúng tôi

Ví 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

DOCTYPE html>

  
    
    

    My page title
    
    
  

  
    

    
      Header
    

    
      
        Home
        Our team
        Projects
        Contact
      

      

      
        
        
      
    

    
    
      
      
        Article heading

        
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        

        Subsection

        
          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
        

        
          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
        

        Another subsection

        
          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
          soclis natoque penatibus et manis dis parturient montes, nascetur
          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
          facilisis semper ac in est.
        

        
          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
          diam iaculis velit, is fringille sem nunc vet mi.
        
      

      
      
        Related

        
          Oh I do like to be beside the seaside
          Oh I do like to be beside the sea
          Although in the North of England
          It never stops raining
          Oh well…
        
      
    

    

    
      ©Copyright 2050 by nobody. All rights reversed.
    
  

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ơn

Thậ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

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  7 dành cho nội dung duy nhất của trang này. Chỉ sử dụng

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  7 một lần trên mỗi trang và đặt trực tiếp vào bên trong

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  6. Lý tưởng nhất là điều này không nên được lồng trong các yếu tố khác

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  8 bao gồm một khối nội dung liên quan có ý nghĩa riêng của nó mà không cần phần còn lại của trang [e. g. , một bài đăng trên blog]

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  9 tương tự như

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  8, nhưng tốt hơn là nhóm một phần duy nhất của trang lại với nhau để tạo thành một phần chức năng duy nhất [e. g. , một bản đồ thu nhỏ hoặc một tập hợp các tiêu đề và tóm tắt của bài viết], hoặc một chủ đề. Cách tốt nhất là bắt đầu mỗi phần bằng một tiêu đề;

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  1 chứa nội dung không liên quan trực tiếp đến nội dung chính nhưng có thể cung cấp thông tin bổ sung liên quan gián tiếp đến nội dung đó [mục thuật ngữ, tiểu sử tác giả, liên kết liên quan, v.v. ]

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  5 đại diện cho một nhóm nội dung giới thiệu. Nếu nó là con của

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  6 thì nó xác định tiêu đề chung của trang web, nhưng nếu nó là con của

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  8 hoặc

  
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  9 thì nó xác định tiêu đề cụ thể cho phần đó [cố gắng đừng nhầm lẫn điều này với tiêu đề và đề mục]

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  6 chứa chức năng điều hướng chính cho trang. Liên kết phụ, v.v. , sẽ không đi trong điều hướng

• 
    The King walked drunkenly back to his room at 01:00, the beer doing nothing to
    aid him as he staggered through the door
    
      [Editor's note: At this point in the play, the lights should be down low]
    .
  
  

  3 đại diện cho một nhóm nội dung cuối của một trang

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ử

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

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

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

Đây thực sự không phải là một

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

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 ngang

Hai yếu tố mà bạn sẽ thỉnh thoảng sử dụng và sẽ muốn biết về chúng là

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

. phần tử ngắt dòng

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

Nếu không có các phần tử

  There once was a man named O'Dell
  Who loved to write HTML
  But his structure was bad, his semantics were sad
  and his markup didn't read very well.

. yếu tố phá vỡ chủ đề

Các phần tử

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door
  
    [Editor's note: At this point in the play, the lights should be down low]
  .

Sẽ kết xuất như thế này

Lập kế hoạch một trang web đơn giản

Khi bạn đã lên kế hoạch về cấu trúc của một trang web đơn giản, bước hợp lý tiếp theo là cố gắng tìm ra nội dung nào bạn muốn đưa vào toàn bộ trang web, những trang nào bạn cần và cách chúng được sắp xếp và liên kết với nhau . Đây được gọi là kiến ​​trúc thông tin. Trong một trang web lớn, phức tạp, rất nhiều kế hoạch có thể được đưa vào quy trình này, nhưng đối với một trang web đơn giản gồm một vài trang, điều này có thể khá đơn giản và thú vị

1. Hãy nhớ rằng bạn sẽ có một vài yếu tố chung cho hầu hết [nếu không phải tất cả] các trang — chẳng hạn như menu điều hướng và nội dung chân trang. Ví dụ: nếu trang web của bạn dành cho doanh nghiệp, bạn nên cung cấp thông tin liên hệ của mình ở chân trang trên mỗi trang. Ghi lại những gì bạn muốn có chung cho mỗi trang.
2. Tiếp theo, vẽ một bản phác thảo sơ bộ về những gì bạn muốn cấu trúc của mỗi trang trông như thế nào [nó có thể trông giống như trang web đơn giản của chúng tôi ở trên]. Lưu ý mỗi khối sẽ là gì.
3. Bây giờ, hãy động não tất cả nội dung khác [không phổ biến cho mọi trang] mà bạn muốn có trên trang web của mình — viết ra một danh sách lớn.
4. Tiếp theo, hãy thử sắp xếp tất cả các mục nội dung này thành các nhóm, để cung cấp cho bạn ý tưởng về những phần nào có thể tồn tại cùng nhau trên các trang khác nhau. Điều này rất giống với một kỹ thuật gọi là Sắp xếp thẻ.
5. Bây giờ, hãy thử phác thảo sơ đồ trang web thô — có bong bóng cho mỗi trang trên trang web của bạn và vẽ các đường để hiển thị quy trình làm việc điển hình giữa các trang. Trang chủ có thể sẽ ở trung tâm và liên kết đến hầu hết nếu không muốn nói là tất cả những trang khác; . Bạn cũng có thể muốn bao gồm các ghi chú về cách mọi thứ có thể được trình bày.

học tích cực. tạo sơ đồ trang web của riêng bạn

Hãy thử thực hiện bài tập trên cho một trang web do chính bạn tạo ra. Bạn muốn làm một trang web về cái gì?

Ghi chú. Lưu công việc của bạn ở đâu đó;

Tóm lược

Tại thời điểm này, bạn nên có một ý tưởng tốt hơn về cách cấu trúc một trang web/trang web. Trong bài viết cuối cùng của mô-đun này, chúng ta sẽ tìm hiểu cách gỡ lỗi HTML

HTML có cú pháp không?

Thẻ HTML đưa ra cú pháp của nó là gì?

Ví dụ về cấu trúc HTML là gì?