Hướng dẫn the nav trong html

Question

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

0 để bọc 1 đoạn văn chỉ vì ta muốn đoạn văn đó có font chữ to ra.

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

0 và

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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ế

Nội dung chính Show

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

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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

<nav>
  <a href="/html/">HTMLa>
  <a href="/css/">CSSa>
  <a href="/js/">JavaScripta>
  <a href="/jquery/">jQuerya>
nav>

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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:

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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ư

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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ẻ

 <aside>
  <h3>More Article About VRh3>
   <ol>
    <li><a href="#">Make a VR Gamea>li>
    <li><a href="#">Learn VR in Unitya>li>
    <li><a href="#">Build Users Interfaces in VRa>li>
   ol>
   <blockquote>
    "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."  
   <footer>
     - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
   footer>
     blockquote>
 aside>

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:

Đố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)

Đố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>
<html>
 <head>
   <title>VR Articletitle>
  head>
  
 <body>
   <div>
     <header>
       <h1>Experience VRh1>
       <p>A simple blog about virtual reality experiencep>
       
       <nav>
         <ul>
          <li><a href="/">Homea>li>
          <li><a href="/#about">Abouta>li>
          <li><a href="/#articles">Articlesa>li>
          <li><a href="/#contact">Contacta>li>
         ul>
        nav>
      header>
      
     <article id="vr-articles">
       <header>
         <h2>VR Article h2>
         <p>By: Harleyp>
         <p>Publish: June 19, 2018p>
       header>
       
       <img src="../../img/vr-user.jpg" alt="User trying a VR headset">
       
       <p>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.p>
       <aside>
        <q>This is a pull quote from the VR Article...q>
       aside>
       <p>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.p>
       <p>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.p>
     article>
     
     <aside>
      <h3>More Article About VRh3>
       <ol>
        <li><a href="#">Make a VR Gamea>li>
        <li><a href="#">Learn VR in Unitya>li>
        <li><a href="#">Build Users Interfaces in VRa>li>
       ol>
       <blockquote>
        "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."  
       <footer>
         - <cite><a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberga>cite>
       footer>
         blockquote>
     aside>
     
    <footer>
     <p>©2018 Experience VR, The Blogp> 
    footer>
  div>
  body>
html>

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,...

programming html

Hướng dẫn the nav trong html

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

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

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

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

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

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

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

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

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

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

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

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