Ngữ nghĩa các phần tử trong HTML5

  • Nguyễn Lê Điệp
  • 16-01-2017
  • 260
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Ngữ nghĩa các phần tử trong HTML5 là chúng ta đi tìm hiểu một từ hoặc cụm từ trong một ngôn ngữ. Các phần ngữ nghĩa bằng với phần tử với một ý nghĩa nhất định.

    Phần tử ngữ nghĩa là gì?

    Một phần tử ngữ nghĩa sẽ mô tả rõ ràng ý nghĩa của nó đối với các trình duyệt và các nhà phát triển. Và chúng ta có hai loại ngữ nghĩa khác nhau đó là:
    Phần tử phi ngữ nghĩa: <div> và <span> - Nói chung về một nội dung.
    Phần tử ngữ nghĩa: <form>, <table>, và <article> - Nói rõ ràng về nội dung trong đó.

    Các trình duyệt hỗ trợ

    Chrome Edge Firefox Safari Opera

    Hầu như các trình duyệt sở hữu phiên bản đều hỗ trợ ngôn như HTML5. Đồng thời bạn cũng có thể fix để các trình duyệt hiểu được ngôn ngữ mới này thông qua bài Trình duyệt đối với HTML5

    Các phần tử ngữ nghĩa mới

    Nhiều trang web có chứa mã HTML như: <div id="nav">, <div class="header"> <div id="footer"> để xác định thanh menu, phần đầu và phần cuối của một trang web.
    Với HTML5 nó cung cấp cho chúng ta các phần tử ngữ nghĩa với các phần khác nhau trong một trang web như:
    <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
    <header>
    <nav>
    <section> <aside>
    <article>
    <footer>

    Phần tử section

    Với phần tử này được định nghĩa cho một phần của trang web. Một trang web có nhiều phần tử section khác nhau để phân biệt các phần trong một trang web.
    <section>
      <h2>Đoạn văn thứ nhất</h2>
      <p>Đây là nội dung của đoạn văn thứ nhất. Đây là nội dung của đoạn văn thứ nhất. Đây là nội dung của đoạn văn thứ nhất. Đây là nội dung của đoạn văn thứ nhất. Đây là nội dung của đoạn văn thứ nhất</p>
    </section>
    Xem ví dụ

    Phần tử article

    Với phần tử này được định nghĩa cho một nội dung của bài viết. Nó là một phần tử độc lập trong một trang web và thông thường phần tử article sẽ nằm trong phần tử section
    <article>
      <h2>Đoạn văn</h2>
      <p>Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn</p>
    </article>
    Xem ví dụ

    Phần tử header

    Với phần tử này sẽ nêu rõ một tiêu đề hoặc đầu đề của một văn bản. Phần tử header nên sử dụng trong phần giới thiệu của một đoạn văn nào đó đồng thời bạn cũng có thể dùng nhiều header trong một trang web.

    <header>
      <h2>Đoạn văn</h2>
    </header>
      <p>Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn. Đây là nội dung của đoạn văn.</p>
    Xem ví dụ

    Phần tử footer

    Với phần tử này được được sử dụng ở phần chân của một trang web và thường chứa các nội dung như mạng xã hội, bản quyền, thông tin liên hệ,...
    <footer>
      <p>Bài được đăng bởi: Nguyễn Lê Điệp</p>
      <p>Liên hệ: <a href="mailto:nguyenlediep.it@gmail.com">
      nguyenlediep.it@gmail.com</a>.</p>
    </footer>
    Xem ví dụ

    Phần tử nav

    Với phần tử này thường chứa các nội dung với các liên kết tới các phần chính của một trang đơn nào đó trong web hoặc bên ngoài trang và thường gọi là menu.
    <nav>
      <a href="/topic/hoc-html/">Học HTML</a> - 
      <a href="/topic/hoc-css/">Học CSS</a> - 
      <a href="/topic/hoc-php/">Học PHP</a>
    </nav>
    Xem ví dụ

    Phần tử aside

    Xác định một nội dung ngoài lề của bài viết chính và thường nó sẽ được sử dụng cột bên của trang web.
    <p>Đây là nội dung của văn bản</p>
    <aside>
      <h4>Nội dung aside</h4>
      <p>Đây là đoạn văn của nội dung aside</p>
    </aside>
    Xem ví dụ

    Phần tử figcaption

    Với phần tử này thường dùng để ghi chú, chú thích, giải thích cho một nội dung đó là hình ảnh.
    <figure>
      <img src="/home/images/icon.png" alt="Icon" width="200" height="200">
      <figcaption>Đây là icon trang web</figcaption>
    </figure>
    Xem ví dụ
    Chúc các bạn học tốt!laugh
    Từ khóa:

    Ngữ nghĩa các phần tử trong HTML5

    Ngữ nghĩa các phần tử trong HTML5

    Ngữ nghĩa các phần tử trong HTML5

    Ngữ nghĩa các phần tử trong HTML5
    Ngữ nghĩa các phần tử trong HTML5
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    421
    - Hôm qua:
    643
    - Tuần này:
    4.685
    - Tuần trước:
    4.927
    - Tháng này:
    13.794
    - Tháng trước:
    42.741
    - Năm này:
    196.588
    - Năm trước:
    17.373
    - Tổng cộng:
    213.961