8 thẻ HTML ngữ nghĩa để làm cho trang web của bạn có thể truy cập, gọn gàng và hiện đại

Trước khi giới thiệu HTML ngữ nghĩa, các nhà phát triển đã sử dụng div để sắp xếp nội dung. Các phần tử div không có ý nghĩa riêng. Chúng chỉ cung cấp cách áp dụng các kiểu và sắp xếp nội dung.

Từ ngữ nghĩa có nghĩa là liên quan đến ý nghĩa. Các phần tử HTML ngữ nghĩa mô tả mục đích nội dung của chúng. Chúng cung cấp ý nghĩa cho nhà phát triển, người dùng, công cụ tìm kiếm và công nghệ hỗ trợ. Dưới đây là danh sách các thẻ HTML ngữ nghĩa phổ biến mà bạn có thể sử dụng trong dự án tiếp theo của mình.

Mục Lục

Div là gì?

Trong HTML, phần tử div (phân chia) là vùng chứa cấp khối. Bạn sử dụng div để nhóm hoặc chia các phần tử HTML thành các phần trên trang web. Cú pháp như hình dưới đây:

 <div></div>

Lợi ích của việc sử dụng các phần tử HTML ngữ nghĩa trên Div

HTML5 đã giới thiệu các phần tử HTML ngữ nghĩa để giúp đọc mã dễ dàng hơn. Các phần tử ngữ nghĩa cung cấp ý nghĩa và cấu trúc cho nội dung trang web.

Chúng làm cho mã của bạn dễ hiểu đối với các nhà phát triển khác. Chúng cũng giúp các công cụ tìm kiếm dễ dàng tìm thấy nội dung của bạn hơn và hướng lưu lượng truy cập đến trang web của bạn. Dưới đây là một số yếu tố ngữ nghĩa mà bạn có thể sử dụng trong các dự án HTML và CSS của mình.

Các thẻ xác định phần tiêu đề trên tài liệu. Thông thường, nó chứa logo trang web, điều hướng và tiêu đề của trang. Đây là phần xuất hiện trên đầu trang web. Bạn có thể tùy chỉnh tiêu đề theo nhu cầu của mình. Cú pháp như sau:

 <body>    <header>
       <h1> Hi There!</h1>
       <p>I am a header</p>
   </header>
</body>

2. <điều hướng>

Các <điều hướng> thẻ chứa các liên kết điều hướng cho trang web. Đây có thể là menu, mục lục hoặc chỉ mục. Nó thường được đặt trong nhãn. Cú pháp như sau:

 <header>    <nav>
        <ul>
            <li>My website links</li>
            <li><a href="#"> Home</a> </li>
            <li ><a href="#"> About Us </a></li>
        </ul>
    </nav>
            <h1>The above is navigation part of my website.</h1>
</header>

Trên trình duyệt nó sẽ như thế này:

Bạn có thể sử dụng các mô hình bố cục CSS chẳng hạn như CSS flexbox để căn chỉnh các phần tử

trên trang web của mình.

3.

Các tag chứa nội dung chính của trang web. Nó tách nội dung khỏi tiêu đề, thanh bên và chân trang. Cái chính thể hiện nội dung chủ đạo của phần.

 <body>    <header> 
        <title> Website facts </title>
    </header>
    <main>
       <p> This website is a short demonstration of how the main tag works.</p>
       <p> It encloses the part of the website with useful content.</p>
    </main>
    <footer>
        <h3> This is a footer </h3>
    </footer> 
</body>

Nó xuất hiện như thế này:

4.

Sử dụng thẻ để xác định các phần độc lập trong tài liệu hoặc trang web. Ví dụ: bạn có thể sử dụng chúng để cấu trúc các bài đăng trên blog, tạp chí hoặc thẻ sản phẩm. Các phần tử có thể bao gồm các phần tử khác bao gồm các bài báo, phần và tiêu đề khác. Các yếu tố kèm theo nên liên quan đến chủ đề bài viết.

 <article>
    <h1>Stranger Than Fiction</h1>        <article>
           <h3>Introduction</h3>
           <p>The events and persons naratted in this book are fictitious.</p>
       </article>
       <article>
           <h3>Chapter One</h3>
           <p> The day was bright and the sun smiled from the sky</p>
       </article>
</article>

Nó xuất hiện như vậy:

5.

Các tag chứa nội dung liên quan đến nội dung chính. Sử dụng thẻ này để tạo thanh bên cho trích dẫn, nhận xét hoặc cảm ơn. làm nổi bật thông tin mà người đọc có thể bỏ lỡ. Nó nổi bật so với phần còn lại của nội dung.

 <!DOCTYPE html><html>
    <style>
        body{
            background-color:#abdbe3;
            }
        aside {
           width: 30%;
           padding-left: 0.5rem;
           margin-left: 1rem;
           flex:left;
           box-shadow: inset 5px 0 5px -5px green;
           font-style: italic;
           color: red;
       }
        aside > p {
           margin: 0.5rem;
    </style>
    <body>
        <main>
            <h1> Weaver Birds</h1>
            <p>Ploceidae is a family of small passerine birds. Many of which are called weavers, weaverbirds, weaver finches and bishops.</p>
            <aside>
               <p>Kingdom: Animalia
             Phylum: Chordata</p>
            </aside>
            <p>In most recent classifications, Ploceidae is a clade, excludes some birds that have historically been placed in the family.Some of the sparrows, but includes the monotypic subfamily Amblyospizinae.</p>
        </main>
    </body>
</html>

6.

Các phần tử chứa một phần của trang không có phần tử ngữ nghĩa cụ thể. Các phần có thể có tiêu đề để giới thiệu nội dung và kèm theo các phần tử HTML khác. đại diện cho các thành phần của trang web như các chương trong sách hoặc blog.

 <!DOCTYPE html><html>
    <body>
        <h1>The Bible</h1>
        <section>
            <h2>Introduction</h2>
            <p>The Bible is a collection of religious scriptures sacred in Christianity, Judaism, Samaritanism. The Bible is an anthology &ndash; a compilation of texts of a variety of forms &ndash; originally written in Hebrew, Aramaic, and Koine Greek.</p>
        </section>
        <section>
           <h2>Chapter one:Genesis</h2>
           <p>The Book of Genesis is the first book of the Hebrew Bible and the Christian Old Testament. Its Hebrew name is the same as its first word, Bereshit. Genesis is an account of the creation of the world, the early history of humanity, and of Israel's ancestors and the origins of the Jewish people</p>
        </section>
    </body>
</html>

Nó xuất hiện như vậy:

7.

Các yếu tố bao vây minh họa khép kín như hình ảnh hoặc sơ đồ. Những minh họa này tham khảo nội dung trên trang chính. Các số liệu đi kèm với chú thích được chỉ định bởi

yếu tố. Các

giải thích hình ảnh nói về cái gì. Các , , và nội dung đại diện cho một đơn vị duy nhất.

 <!DOCTYPE html><html>
    <body>
        <main>
            <section>
                <h1>Parts of a Computer</h1>
                <p> There are several parts that work together to make up a computer</p>
                <figure>
                       <img src="some-url.jpg" alt="computer mouse">
                       <figcaption>This is a computer mouse</figcaption>
               </figure>
            </section> 
        </main>
    </body>
</html>

Nó xuất hiện như vậy:

phần tử hình hiển thị hình ảnh và chú thích

Bạn có thể đi xa hơn và tìm hiểu cách tạo hình ảnh phản hồi trong HTML.

Các Phần tử HTML chứa thông tin ở phần dưới cùng của trang web. Nó trái ngược với yếu tố. Các có thể chứa thông tin về chủ sở hữu của trang. Điều này bao gồm dữ liệu bản quyền hoặc liên kết đến thông tin bổ sung của trang web.

 <!DOCTYPE html><html>
    <body>
       <main>
           <section>
               <h1>Parts of a Computer</h1>
               <figure>
                       <img src="some-url.jpg" alt="computer mouse">
                       <figcaption>This is a computer mouse</figcaption>
               </figure>
           </section>
       </main>
       <footer>
           <p> Manufactured by ComputerTech &copy; 2023</p>
       </footer>
   </body>
</html>

Đoạn mã trên thêm một footer vào Các bộ phận của máy tính trang như thể hiện trong hình ảnh sau đây.

phần tử chân trang tạo chân trang trên trang

Tại sao nên sử dụng các phần tử HTML ngữ nghĩa?

Việc sử dụng các phần tử HTML ngữ nghĩa mang lại ngữ cảnh cho mã. Bất cứ ai nhìn vào mã có thể dễ dàng hiểu nó. Các thẻ giúp tạo kiểu cho các phần tử và cộng tác trên các dự án dễ dàng hơn.

Bạn có thể sử dụng HTML ngữ nghĩa với các thư viện giao diện người dùng và khung. Hầu hết các trình duyệt web hiện đại thích các phần tử HTML ngữ nghĩa hơn các phần tử truyền thống. Bắt đầu sử dụng HTML ngữ nghĩa và xem mã của bạn trông hiện đại, dễ đọc và có thể trình bày được.

8 thẻ HTML ngữ nghĩa để làm cho trang web của bạn có thể truy cập, gọn gàng và hiện đại

Div là gì?

Lợi ích của việc sử dụng các phần tử HTML ngữ nghĩa trên Div

2. <điều hướng>

Leave a Reply Cancel reply

Trang

Div là gì?

Lợi ích của việc sử dụng các phần tử HTML ngữ nghĩa trên Div

2. <điều hướng>

Bài viết liên quan:

Similar Posts

Leave a Reply Cancel reply

Trang