Hướng dẫn the nav trong html

Semantic HTML là cách viết HTML mà sử dụng các thẻ HTML ứng với nội dung được chứa trong nó chứ không phải sử dụng các thẻ theo cách mà chúng ta muốn nội dung trong đó được hiển thị. Ví dụ như không thể sử dụng thẻ

 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
0 để bọc 1 đoạn văn chỉ vì ta muốn đoạn văn đó có font chữ to ra.
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
0 và
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
2 biểu diễn cho các nội dung rất khác nhau nên không thể sử dụng như thế

Một số thẻ HTML để phân chia nội dung trang:

1.Thẻ
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
3

Thẻ section dùng để phân chia các phần riêng biệt của trang HTML, ví dụ trong trang có các phần như About, Contact,... thì các phần này sẽ được bọc trong các thẻ

 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
3

2. Thẻ
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
5

Thẻ article dùng để chứa các nội dung độc lập trong trang. Những nội dung này có thể được cắt ra mang đi nơi khác mà người dùng ở nơi khác đọc vẫn có thể hiểu được, không phụ thuộc vào nội dung chứa trong trang.

Ví dụ như trong trang có chứa phần giới thiệu về 1 quyển sách. Nội dung phần giới thiệu này bao gồm tiêu đề sách, tác giả, tóm tắt, giá,... những nội dung này có thể được trích dẫn ra rồi đem đi trang khác chia sẻ mà người dùng ở trang khác đọc vẫn có thể hiểu được nội dung này là gì. Ở đây, nội dung giới thiệu về trang sách này nên được bọc trong thẻ

 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
5

3. Thẻ
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
7

Thẻ nav khá dễ hiểu, nó dùng để chứa các thẻ

 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
8 dẫn đến những nội dung chính của website, nên lưu ý là của website chứ không phải của trang HTML hiện tại, nav thường được bọc trong
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
9 hoặc
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
0.

Ví dụ:


  HTML
  CSS
  JavaScript
  jQuery

Lưu ý: Trong 1 trang có thể có 2 thẻ nav, 1 thẻ nav dẫn đến nội dung chính của website nằm ở phía trên header. 1 thẻ nav khác nằm ở phía footer, chứa đường link dẫn đến 1 số địa chỉ liên kết với website.

4. Thẻ
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
1

Thẻ aside chứa 1 số thông tin bên lề nội dung chính của trang. Những nội dung chứa trong

Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
1 có thể bị xóa đi mà không làm ảnh hưởng đến nội dung chính của trang. Lưu ý, nếu
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
1 nằm trong thẻ
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
5 thì nội dung nằm trong thẻ
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
1 đó chỉ chứa thông tin bên lề nội dung chính của
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
5 chứ không phải của toàn trang.

Ví dụ ta có 1 trang với nội dung chính là giới thiệu về công nghệ VR, sau đó ta muốn dẫn thêm 1 vài thông tin bên lề về VR cho người xem:

 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 

5. Thẻ
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
7

Thẻ dùng để chứa nội dung chính của trang, nó sẽ không chứa các thông tin như

 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
9,
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
0,
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
1,... hoặc những gì thuộc phần intro,...

Trong 1 trang chỉ có 1 thẻ

Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
7 duy nhất

6. Thẻ
Đối với thẻ ``, nó có thể chứa những thông tin mở rộng cũng cho element chứa nó, tùy thuộc element đó là gì
2

Thẻ

Đối với thẻ ``, nó có thể chứa những thông tin mở rộng cũng cho element chứa nó, tùy thuộc element đó là gì
2 là thẻ không hề có Semantic meaning. Nó chỉ dùng để bọc những nội dung có liên quan đến nhau lại. Khi không tìm được thẻ thích hợp để bọc phần nội dung đó thì ta sẽ sử dụng thẻ div.

Ví dụ như phần intro của trang web, nó không thể nằm trên header cũng không thể nằm trong main, khi ấy ta sử dụng thẻ div để bọc các thông tin đó lại.

Ngoài ra, người ta còn sử dụng thẻ

Đối với thẻ ``, nó có thể chứa những thông tin mở rộng cũng cho element chứa nó, tùy thuộc element đó là gì
4> để bọc những nội dung cần format giống nhau bằng CSS, cũng như tách trang thành từng phần nhỏ, để trình duyệt có thể render từng phần 1, tăng tốc độ hiển thị đến người dùng thay vì phải load toàn bộ trang mới render.

7. Thẻ
 
  More Article About VR
   
    Make a VR Game
    Learn VR in Unity
    Build Users Interfaces in VR
   
   
    "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
   
     - Mark Zuckerberg
   
     
 
9 và
Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
0

  • Thẻ
     
      More Article About VR
       
        Make a VR Game
        Learn VR in Unity
        Build Users Interfaces in VR
       
       
        "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
       
         - Mark Zuckerberg
       
         
     
    
    9 bọc những thông tin giới thiệu về toàn trang web hoặc navigation bar
  • Thẻ
    Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
    
    0 bọc những thông tin về trang web, thẻ footer của toàn trang thường chứa contact information, copyright information,... **Lưu ý về thẻ
     
      More Article About VR
       
        Make a VR Game
        Learn VR in Unity
        Build Users Interfaces in VR
       
       
        "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
       
         - Mark Zuckerberg
       
         
     
    
    9 và
    Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
    
    0: Có thể sử dụng nhiều thẻ
     
      More Article About VR
       
        Make a VR Game
        Learn VR in Unity
        Build Users Interfaces in VR
       
       
        "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
       
         - Mark Zuckerberg
       
         
     
    
    9 và
    Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
    
    0 trong trang theo nhiều trường hợp:
  1. Đối với thẻ ``, nó có thể chứa thông tin giới thiệu về element chứa nó [thường là các section]
    
  2. Đối với thẻ ``, nó có thể chứa những thông tin mở rộng cũng cho element chứa nó, tùy thuộc element đó là gì
    
Ví dụ một trang web cụ thể:
DOCTYPE html>

 
   VR Article
  
  
 
   
     
       Experience VR
       A simple blog about virtual reality experience
       
       
         
          Home
          About
          Articles
          Contact
         
        
      
      
     
       
         VR Article 
         By: Harley
         Publish: June 19, 2018
       
       
       
       
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus urna lacus, ut lacinia elit pretium a. Praesent rutrum ac ipsum vitae rhoncus. Nam non molestie purus.
       
        This is a pull quote from the VR Article...
       
       Nunc imperdiet, dui in varius eleifend, magna enim imperdiet felis, at ultricies magna metus vitae ante. Nulla in porttitor nibh. Mauris non libero in massa porta varius non sed magna. Donec ac mauris mattis, viverra turpis ac, dictum arcu.
       Vivamus molestie laoreet viverra. Ut ac fringilla ex. Donec at nisl semper, commodo mi maximus, fermentum nisi. Duis bibendum gravida ante sit amet consectetur. Curabitur ac est id justo euismod porta quis ac arcu.
     
     
     
      More Article About VR
       
        Make a VR Game
        Learn VR in Unity
        Build Users Interfaces in VR
       
       
        "Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming."  
       
         - Mark Zuckerberg
       
         
     
     
    
     ©2018 Experience VR, The Blog 
    
  
  

Tổng kết:

Trên đây mình đã nói sơ qua về Semantic HTML và cách dùng của một số thẻ nhằm đảm bảo Semantic HTML. Hy vọng qua bài viết này các bạn có thể viết HTML một cách chuẩn mực hơn, không còn sử dụng các tag một cách tràn lan nhằm chỉnh font chữ hay xuống dòng,...

Chủ Đề