Tự học HTML: HTML ngữ nghĩa(semantic)

Tự học HTML: HTML ngữ nghĩa(semantic)

Rate this post

HTML ngữ nghĩa giới thiệu ý nghĩa cho code chúng ta viết. Trước khi có HTML ngữ nghĩa, các phần tử không có bất kỳ ý nghĩa nào về chức năng của nó hoặc nội dung chứa trong nó. Một phần tử chẳng hạn <div>đã được sử dụng như một phần tử có mục đích chung để tạo mọi thứ từ đầu trang đến chân trang cho đến bài viết. Với HTML ngữ nghĩa, chúng tôi đã được giới thiệu với các phần tử cho các nhà phát triển và trình duyệt biết chính xác chức năng của nó và nội dung nên đi kèm trong đó.

Các bài viết liên quan:

Giới thiệu về HTML ngữ nghĩa

Khi xây dựng các trang web, chúng tôi sử dụng kết hợp HTML không ngữ nghĩa và HTML ngữ nghĩa. Từ ngữ nghĩa có nghĩa là “liên quan đến ý nghĩa”, vì vậy các yếu tố ngữ nghĩa cung cấp thông tin về nội dung giữa thẻ mở và thẻ đóng.

Bằng cách sử dụng HTML ngữ nghĩa, chúng tôi chọn các phần tử HTML dựa trên ý nghĩa của chúng chứ không phải dựa trên cách chúng được trình bày. Các phần tử như <div>và <span>không phải là phần tử ngữ nghĩa vì chúng không cung cấp ngữ cảnh về những gì bên trong các thẻ đó.

Ví dụ: thay vì sử dụng một <div>phần tử để chứa thông tin tiêu đề của chúng ta, chúng ta có thể sử dụng một <header>phần tử, được dùng làm phần đầu đề. Bằng cách sử dụng <header>thẻ thay vì thẻ <div>, chúng tôi cung cấp ngữ cảnh về thông tin bên trong thẻ mở và thẻ đóng.

Tại sao sử dụng HTML ngữ nghĩa?

Khả năng truy cập: HTML ngữ nghĩa giúp các trang web có thể truy cập được cho thiết bị di động và cả người khuyết tật. Điều này là do trình đọc màn hình và trình duyệt có thể diễn giải mã tốt hơn.

SEO: Nó cải thiện SEO trang web, hoặc Tối ưu hóa công cụ tìm kiếm , là quá trình tăng số lượng người truy cập trang web của bạn. Với SEO tốt hơn, các công cụ tìm kiếm có khả năng xác định nội dung trang web của bạn tốt hơn và sắp xếp nội dung quan trọng nhất một cách thích hợp.

Dễ hiểu: HTML ngữ nghĩa cũng làm cho mã nguồn của trang web dễ đọc hơn đối với các nhà phát triển web khác.

Để hiểu rõ hơn về điều này, bạn có thể nghĩ đến việc so sánh HTML phi ngữ nghĩa với việc đi vào một cửa hàng không có biển hiệu trên lối đi. Vì các lối đi không được dán nhãn nên bạn không biết có những sản phẩm gì trong các lối đi đó. Tuy nhiên, các cửa hàng có biển hiệu cho mỗi lối đi giúp bạn dễ dàng tìm thấy các mặt hàng bạn cần hơn, giống như Semantic HTML.

Các tag HTML Semantic

Header và Navigation

Chúng ta hãy xem xét một số yếu tố ngữ nghĩa hỗ trợ cấu trúc của một trang web. Một <header>là một container thường cho một trong hai liên kết điều hướng hay những nội dung giới thiệu chứa <h1>để <h6>tiêu đề.

Bằng cách sử dụng <header>, mã của chúng tôi trở nên dễ đọc hơn. Việc xác định những gì bên trong các <h1>thẻ mẹ của nó dễ dàng hơn nhiều , trái ngược với một <div>thẻ sẽ không cung cấp thông tin chi tiết về những gì bên trong thẻ.

<header class="header">
    <h1>header hỗ trợ navigation hay nội dung giới thiệu</h1>
</header>

A <nav>được sử dụng để xác định một khối liên kết điều hướng như menu và mục lục. Điều quan trọng cần lưu ý là <nav>có thể được sử dụng bên trong <header>phần tử nhưng cũng có thể được sử dụng riêng. Ví dụ sử dụng navigation tag trong điều hướng.

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Trang chủ</a></li>
        <li class="crumb"><a href="#">liên hệ</a></li>
        <li class="crumb">Dịch vụ</li>
    </ol>
</nav>

Main và Footer

Hai yếu tố cấu trúc nữa là <main>và <footer>. Các phần tử này cùng với <nav>và <header>giúp mô tả vị trí của một phần tử dựa trên các tiêu chuẩn phát triển web thông thường.

<main>
    <p>Main content <em>so</em> đây là nội dung chính</p>
</main>

Phần tử <main>được sử dụng để đóng gói nội dung chủ đạo trong một trang web. Thẻ này tách biệt với <footer>và <nav>của một trang web vì các phần tử này không chứa nội dung chính. Bằng cách sử dụng <main>trái ngược với một <div>phần tử, trình đọc màn hình và trình duyệt web có thể xác định tốt hơn rằng bất cứ thứ gì bên trong thẻ đều là phần lớn nội dung.

<footer>
    <p>© copyright websitehcm.com</p>
</footer>

Nội dung ở cuối thông tin chủ đề được gọi là footer , được biểu thị bằng <footer>phần tử. Chân trang chứa thông tin như:

  • Thông tin liên lạc
  • Thông tin bản quyền
  • Điều khoản sử dụng
  • Sơ đồ trang web
  • Tham chiếu đến các liên kết đầu trang

Section và article

Bây giờ chúng ta đã trình bày phần nội dung của HTML ngữ nghĩa, chúng ta hãy tập trung vào những gì có thể diễn ra trong phần nội dung. Hai yếu tố chúng ta sẽ tập trung vào bây giờ là <section>và <article>.

<section>xác định các phần tử trong tài liệu, chẳng hạn như các chương, tiêu đề hoặc bất kỳ khu vực nào khác của tài liệu có cùng chủ đề. Ví dụ: nội dung có cùng chủ đề, chẳng hạn như các bài viết về cricket có thể thuộc một chủ đề duy nhất <section>. Trang chủ của một trang web có thể được chia thành các phần để giới thiệu, các mục tin tức và thông tin liên hệ.

Đây là một ví dụ về cách sử dụng <section>:

<section>
  <h2>đây là chủ đề của bài viết</h2> 
</section>

Trong đoạn mã trên, chúng tôi đã tạo một <section>phần tử để đóng gói mã. Trong <section>chúng tôi đã thêm một <h2>phần tử làm tiêu đề.

Phần <article>tử tự chứa nội dung có ý nghĩa. <article>có thể chứa nội dung như bài báo, blog, nhận xét, tạp chí, v.v. <article>Thẻ sẽ giúp ai đó sử dụng trình đọc màn hình hiểu được nội dung bài viết (có thể chứa kết hợp văn bản, hình ảnh, âm thanh, v.v.) bắt đầu và kết thúc ở đâu.

<article >
    <h1>chủ đề 1</h1>
    <article class="chude">
        <h2>03 March 2021</h2>
        <p>Moutain</p>
    </article>
    <article class="chude">
        <h2>04 March 2021</h2>
        <p>Gió</p>
    </article>
    <article class="chude">
        <h2>05 March 2021</h2>
        <p>Sông</p>
    </article>
</article>

Aside

Phần <aside>tử được sử dụng để đánh dấu thông tin bổ sung có thể nâng cao phần tử khác nhưng không bắt buộc để hiểu nội dung chính. Phần tử này có thể được sử dụng cùng với các phần tử khác như <article>hoặc <section>. Một số cách sử dụng phổ biến của <aside>phần tử là để:

  • Thư mục
  • Chú thích
  • Bình luận
  • Kéo báo giá
  • Thanh bên biên tập
  • Thông tin thêm
<aside>
    <p>TThông tin bổ sung</p>
</aside>

Hình và Hình vẽ

Với <aside>, chúng tôi đã học được rằng chúng tôi có thể đặt thông tin bổ sung bên cạnh một phần nội dung chính, nhưng nếu chúng tôi muốn thêm hình ảnh hoặc minh họa thì sao? Đó là nơi <figure>và <figcaption>đến.

<figure> là một phần tử được sử dụng để đóng gói phương tiện như hình ảnh, hình minh họa, sơ đồ, đoạn mã, v.v., được tham chiếu trong luồng chính của tài liệu.

<figure>

  <img src="image.jpg"/>

</figure>

Trong đoạn mã này, chúng tôi đã tạo một <figure>phần tử để chúng tôi có thể đóng gói <img>thẻ của mình. Trong <figure>chúng tôi đã sử dụng <img>thẻ để chèn một hình ảnh vào trang web. Chúng tôi đã sử dụng src thuộc tính trong <img>thẻ để có thể liên kết nguồn của hình ảnh.

Có thể thêm chú thích vào hình ảnh bằng cách sử dụng <figcaption>.

<figcaption>là một phần tử được sử dụng để mô tả phương tiện trong <figure>thẻ. Thông thường, <figcaption>sẽ đi vào bên trong <figure>. Điều này khác với việc sử dụng một <p>phần tử để mô tả nội dung; nếu chúng tôi quyết định thay đổi vị trí của <figure>, thẻ đoạn văn có thể bị thay thế khỏi hình trong khi a <figcaption>sẽ di chuyển theo hình. Điều này rất hữu ích để nhóm một hình ảnh với chú thích.

<figure>

  <img src="image.jpg">

  <figcaption>hình ảnh chú thích image</figcaption>

</figure>

Audio và Properties

Bây giờ chúng ta đã tìm hiểu về nội dung dựa trên văn bản, hãy cùng tìm hiểu <audio>! Chắc chắn mọi người cần — <audio>bạn sẽ nghe nhạc hip hop Hàn Quốc của mình bằng cách nào khác?

Phần <audio>tử được sử dụng để nhúng nội dung âm thanh vào tài liệu. Giống như <video>, <audio>sử dụng src để liên kết nguồn âm thanh.

<audio>

  <source src="audio.mp3″ type="audio/mp3″>

</audio>

Trong ví dụ này, chúng tôi đã tạo một <audio>phần tử. Sau đó, chúng tôi tạo một <source>phần tử để đóng gói liên kết âm thanh của chúng tôi. Trong trường hợp này, audio.mp3là tệp âm thanh của chúng tôi. Sau đó, chúng tôi chỉ định loại bằng cách sử dụng type và đặt tên cho loại âm thanh đó. Mặc dù không phải lúc nào cũng cần thiết nhưng chúng tôi khuyên bạn nên nêu rõ loại âm thanh vì nó giúp trình duyệt xác định nó dễ dàng hơn và xác định xem loại tệp âm thanh đó có được trình duyệt hỗ trợ hay không.

Chúng tôi đã liên kết tệp âm thanh của mình với trình duyệt nhưng bây giờ chúng tôi cần cấp quyền điều khiển cho nó. Đây là nơi các thuộc tính xuất hiện. Các thuộc tính cung cấp thông tin bổ sung về một phần tử.

Các thuộc tính cho phép chúng tôi thực hiện nhiều việc khác nhau đối với tệp âm thanh của mình. Có nhiều thuộc tính cho <audio>nhưng hôm nay chúng ta sẽ tập trung vào controls và src.

  • Controls: tự động hiển thị các điều khiển âm thanh vào trình duyệt như phát và tắt tiếng.
  • src: chỉ định URL của tệp âm thanh.

Như bạn có thể nhận thấy, chúng tôi đã sử dụng src thuộc tính này. Hầu hết các thuộc tính nằm trong thẻ mở của <audio>. Ví dụ: đây là cách chúng tôi có thể thêm cả chức năng tự động phát và điều khiển âm thanh:

<video controls
    width="200"
    height="150"
    muted>
    <source src="/media/audio1.webm"
            type="video/webm">
    <source src="/media/audio2.mp4"
            type="video/mp4">
    This browser does not support the HTML5 video element.
</video>

Video và Nhúng

Như đã trình bày trong bài tập trước, nội dung phương tiện có thể là một bổ sung hữu ích cho một trang web. Bằng cách sử dụng một <video>phần tử, chúng tôi có thể thêm video vào trang web của mình. Các <video>yếu tố làm cho nó rõ ràng rằng một nhà phát triển đang cố gắng để hiển thị một đoạn video cho người dùng.

Một số thuộc tính có thể thay đổi quá trình phát lại video bao gồm:

  • controls: Khi được thêm vào, nút phát / tạm dừng sẽ được thêm vào video cùng với điều khiển âm lượng và tùy chọn toàn màn hình.
  • autoplay: Thuộc tính dẫn đến video tự động phát ngay sau khi trang được tải.
  • loop: Thuộc tính này dẫn đến video liên tục phát lặp lại.

Dưới đây là một ví dụ về <video>việc được sử dụng với thuộc tính điều khiển:

<video src="coding.mp4" controls>Video not supported</video>

Trong đoạn mã trên, một tệp video có tên coding.mp4 đang được phát. “Video không được hỗ trợ” sẽ chỉ hiển thị nếu trình duyệt không thể hiển thị video.

Một thẻ khác có thể được sử dụng để kết hợp nội dung phương tiện vào một trang là <embed>thẻ, có thể nhúng bất kỳ nội dung phương tiện nào bao gồm video, tệp âm thanh và gif từ nguồn bên ngoài. Điều này có nghĩa là các trang web có nút nhúng có một số dạng nội dung phương tiện có thể được thêm vào các trang web khác. Các <embed>thẻ là một thẻ tự đóng, không giống như các <video>phần tử. Lưu ý rằng <embed>là một thẻ lỗi thời và lựa chọn thay thế khác, chẳng hạn như <video>, <audio>và <img>, nên được sử dụng ở vị trí của nó, nhưng đã được dạy cho các mục đích di sản.

Dưới đây chúng ta sẽ xem xét <embed>việc được sử dụng trong thực tế.

<embed src="download.gif"/>

Trong ví dụ trên, <embed>đang được sử dụng để thêm gif từ tệp cục bộ được gọi là download.gif. Embed có thể được sử dụng để thêm các tệp cục bộ cũng như nội dung phương tiện trực tiếp từ một số trang web khác.

Ôn tập

Chúc mừng bạn đã hoàn thành bài học này về HTML ngữ nghĩa! Bây giờ bạn đã biết những lợi ích của HTML ngữ nghĩa và cách sử dụng nó, bạn có thể kết hợp các yếu tố ngữ nghĩa vào trang web của mình để làm cho nó dễ truy cập hơn và làm cho mã dễ đọc hơn.

Hãy cùng xem lại một số chủ đề mà chúng ta đã đề cập trong suốt bài học:

  • HTML ngữ nghĩa giới thiệu ý nghĩa của một trang thông qua các phần tử cụ thể cung cấp ngữ cảnh về những gì ở giữa các thẻ.
  • HTML ngữ nghĩa là một tiêu chuẩn hiện đại và làm cho một trang web có thể truy cập được đối với những người sử dụng trình đọc màn hình để dịch trang web và cải thiện SEO cho trang web của bạn.
  • <header>, <nav>, <main>Và <footer>tạo ra các cấu trúc cơ bản của trang web.
  • <section> xác định các phần tử trong tài liệu, chẳng hạn như chương, tiêu đề hoặc bất kỳ khu vực nào khác của tài liệu có cùng chủ đề.
  • <article> tự giữ nội dung có ý nghĩa, chẳng hạn như các bài báo, blog, nhận xét, v.v.
  • <aside> chứa thông tin liên quan đến nội dung chính, nhưng không bắt buộc để hiểu thông tin chi phối.
  • <figure> đóng gói tất cả các loại phương tiện truyền thông.
  • <figcaption>được sử dụng để mô tả phương tiện truyền thông trong <figure>.
  • <video>, <embed>và <audio>các phần tử được sử dụng cho các tệp phương tiện.

Bây giờ, hãy áp dụng kiến ​​thức này để trở thành một Nhà phát triển web giỏi hơn.

Leave a Reply