HTML ngữ nghĩa là gì?

Question

Có hơn một tỷ trang web trên Internet. Nhiều trong số chúng được tạo từ lâu và chưa được cập nhật các tính năng HTML. Do đó, các công cụ tìm kiếm sẽ bỏ qua các trang web này và người xem thấy các trang web này khó đọc

Nội dung chính Show

Bố cục trang HTML ngữ nghĩa
dẫn đường
Nội dung chính
Nội dung bổ sung
phần bên cạnh
Số liệu
Lưu đồ phần tử HTML5
vi dữ liệu
Hỗ trợ trình duyệt
Tài nguyên bổ sung
Phần kết luận
Thẻ ngữ nghĩa trong HTML là gì?
H1 có phải là HTML ngữ nghĩa không?
HTML ngữ nghĩa là gì và tại sao lại sử dụng nó?
div có phải là thẻ ngữ nghĩa không?

Một trong 2 3 4 5 6 7 8 9 10 11 12 13 14 15 162 3 4 5 6 7 8 9 10 11 12 13 14 15 16

1<html> <head> <title>Exampletitle> head> <body> <header> Here goes logo, navigation, etc. header> <main> A place for website's main content main> <footer> Footer information, links, etc. footer> body> >html>

0 bạn có thể sử dụng thẻ

1<html> <head> <title>Exampletitle> head> <body> <header> Here goes logo, navigation, etc. header> <main> A place for website's main content main> <footer> Footer information, links, etc. footer> body> >html>

1 .

Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng các thẻ HTML5 ngữ nghĩa mới trong việc tạo trang web và cách làm cho nội dung có nhiều thông tin hơn cho máy móc

Bố cục trang HTML ngữ nghĩa

Trước tiên hãy xem xét một mẫu trang HTML cơ bản, được viết bằng HTML phi ngữ nghĩa

1<html>
2    <head>
3        <title>Exampletitle>
4    head>
5    <body>
6        <div id="header">
7            Here goes logo, navigation, etc.
8        div>
9        <div id="main-content">
10            A place for website's main content
11        div>
12        <div id="footer">
13            Footer information, links, etc.
14        div>
15    body>
16html>

HTML

Bây giờ hãy xem xét ví dụ về HTML ngữ nghĩa được hiển thị bên dưới

1<html>
2    <head>
3        <title>Exampletitle>
4    head>
5    <body>
6        <header>
7            Here goes logo, navigation, etc.
8        header>
9        <main>
10            A place for website's main content
11        main>
12        <footer>
13            Footer information, links, etc.
14        footer>
15    body>
16html>

HTML

Sự khác biệt chính. chúng tôi đã thay thế thẻ div bằng 3 thẻ mới. tiêu đề, chính và chân trang. ______0_______1 ,

1<html>
2    <head>
3        <title>Exampletitle>
4    head>
5    <body>
6        <header>
7            Here goes logo, navigation, etc.
8        header>
9        <main>
10            A place for website's main content
11        main>
12        <footer>
13            Footer information, links, etc.
14        footer>
15    body>
16html>

3 và . Đây là những thẻ mô tả nhiều hơn các thẻ div khiến việc phân vùng các trang web thành các phần hữu hình trở nên khó khăn. tags are semantic because they are used to represent different sections on an HTML page. These are more descriptive than div tags which make partitioning webpages into tangible sections difficult.

dẫn đường

Trong HTML5, có thẻ điều hướng, thẻ này thay thế cho thẻ đa năng trước đây, div, để bọc các liên kết tạo menu điều hướng. Chẳng hạn, menu điều hướng có thể được chèn trong phần tiêu đề

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

HTML

Nói chung, menu điều hướng có thể được đặt ở bất kỳ đâu trên trang, nó chỉ cần được bao bọc bởi. Tuy nhiên, nó không nên được đặt bên trong ____0_______3 , trừ khi điều hướng dành riêng cho trang đó. Hạn chế này tồn tại vì các phần tử ______0_______3 chỉ nên dành riêng cho trang, trong khi

1<html>
2    <head>
3        <title>Exampletitle>
4    head>
5    <body>
6        <header>
7            Here goes logo, navigation, etc.
8        header>
9        <main>
10            A place for website's main content
11        main>
12        <footer>
13            Footer information, links, etc.
14        footer>
15    body>
16html>

1 and

1<html>
2    <head>
3        <title>Exampletitle>
4    head>
5    <body>
6        <header>
7            Here goes logo, navigation, etc.
8        header>
9        <main>
10            A place for website's main content
11        main>
12        <footer>
13            Footer information, links, etc.
14        footer>
15    body>
16html>

4 are generally shareable among similar pages.

Nội dung chính

Để thêm một số nội dung vào phần ____0_______3 , chúng ta có thể sử dụng các thẻ HTML5 mới, chẳng hạn như . Các thẻ này đơn giản hóa cấu trúc của and

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

1. These tags simplify the structure of ____0_______3 , làm cho nó giống như.

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

HTML

Thẻ

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

0 được sử dụng để bọc một nội dung độc lập trên một trang. Một nội dung là độc lập nếu nó có thể được gỡ bỏ khỏi trang và đưa vào một số trang khác. Thẻ

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

0 có thể chứa nhiều thẻ

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

1 bên trong thẻ, chẳng hạn như trong . Một ______7_______0 thực sự là một người tự trị

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

1 .

Thẻ

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

1 tương tự như thẻ

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

9 . g. một chương của bài báo). Thẻ ______7_______1 cũng có thể được sử dụng để bọc chính mạo từ đó, nhưng chúng ta có thẻ

1<header>
2    <img src="logo.png" alt="logo"/>
3    <nav>
4        <a href="index.html">Homea>
5        <a href="services.html">Servicesa>
6        <a href="contact.html">Contacta>
7        <a href="about.html">About Usa>
8    nav>
9header>```
10
11but, it also can be added after the _header_ section:
12
13```HTML
14<header>
15    <img src="logo.png" alt="logo" />
16header>
17<nav>
18    <a href="index.html">Homea>
19    <a href="services.html">Servicesa>
20    <a href="contact.html">Contacta>
21    <a href="about.html">About Usa>
22nav>

0 tag for that purpose.

Nội dung bổ sung

phần bên cạnh

Một nội dung bổ sung, không quan trọng để hiểu bài viết, nhưng liên quan đến bài viết, có thể được chèn vào phần

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

2 . Chẳng hạn, đó có thể là thông tin về số lượng người đọc bài báo, ai là tác giả của bài viết, v.v. Trong trường hợp đó, mã HTML của bài viết sẽ có cấu trúc như sau.

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>  
17        <aside>
18            <p>Viewed by 1503 peoplep>
19            <p>Author: John Smithp>
20        aside>
21    article>
22main>

HTML

Như đã thấy ở trên, ____16_______2 cho phép công cụ tìm kiếm nhanh chóng lấy thông tin như tác giả, lượt xem và ngày tháng. Thẻ này cũng có thể được sử dụng để đính kèm nội dung bổ sung có liên quan đến toàn bộ trang, không chỉ một bài viết cụ thể. Ví dụ: ______16_______2 có thể bọc thanh bên, quảng cáo, chú thích cuối trang, v.v.

Số liệu

Các phần tử hình trên trang web có thể được đính kèm với

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

5 và

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

6 tags.

Thẻ

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

5 được sử dụng để đánh dấu ảnh, khối mã, sơ đồ, biểu đồ, hình minh họa và nội dung đồ họa khác. Nói chung, thẻ này bao gồm nội dung có thể được chuyển đi vào phụ lục. Chỉ những hình ảnh liên quan đến nội dung của trang mới được nằm trong thẻ ____16_______5 (e. g. một hình ảnh logo). Do đó, những hình ảnh như quảng cáo biểu ngữ không nên ở bên trong thẻ đó. Tuy nhiên, có một cách để thêm ngữ nghĩa vào quảng cáo biểu ngữ mà chúng tôi sẽ trình bày trong phần Dữ liệu vi mô của hướng dẫn này.

Thẻ

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

6 đại diện cho chú thích hoặc chú thích cho một hình. Nó là tùy chọn và có thể được bỏ qua. Chỉ một thẻ

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

6 có thể được lồng vào thẻ

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

5 . Ngay cả khi a ______16_______5 chứa nhiều hình ảnh thì chỉ có thể có một

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

6 .

Ví dụ: ảnh của những người thích bài viết có thể được đính kèm với thẻ ____16_______5 . Vì thông tin đó không quan trọng đối với chức năng của trang web nên nó có thể được lồng vào phần

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

2 của bài viết.

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smithp>
4    <figure>
5        <img src="John Doe.png" alt="John Doe"/>
6        <img src="Maggie Smith.png" alt="Maggie Smith"/>
7        <img src="Tom Hardy.png" alt="Tom Hardy"/>
8        <figcaption>People who liked the articlefigcaption>
9    figure>
10aside>

HTML

Biểu trưng trong phần ____0_______1 phải được đính kèm với ____16_______5 tag, as well, so our

1<html>
2    <head>
3        <title>Exampletitle>
4    head>
5    <body>
6        <header>
7            Here goes logo, navigation, etc.
8        header>
9        <main>
10            A place for website's main content
11        main>
12        <footer>
13            Footer information, links, etc.
14        footer>
15    body>
16html>

1 section will finally have the following code:

1<header>
2    <figure>
3        <img src="logo.png" alt="logo"/>
4    figure>
5    <nav>
6        <a href="index.html">Homea>
7        <a href="services.html">Servicesa>
8        <a href="contact.html">Contacta>
9        <a href="about.html">About Usa>
10    nav>
11header>

HTML

Lưu ý cách phân vùng trong trang làm cho mã dễ hiểu hơn và có thể cải thiện việc phân tích cú pháp nội dung của trình duyệt và công cụ tìm kiếm

Lưu đồ phần tử HTML5

Nếu bạn không chắc nên sử dụng thẻ ngữ nghĩa nào trong một trường hợp cụ thể, bạn luôn có thể làm theo lưu đồ tuyệt vời này do các tác giả của HTML5Doctor thực hiện

vi dữ liệu

Vi dữ liệu cung cấp thông tin bổ sung về nội dung của trang web và giúp các công cụ tìm kiếm cũng như trình đọc màn hình hoạt động trên trang web. Microdata có thể được thêm làm thuộc tính cho bất kỳ thẻ HTML nào. Chẳng hạn, hãy thêm một số dữ liệu về tác giả của bài báo trong ví dụ của chúng tôi. Phần

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

2 của bài viết sẽ có đoạn mã sau.

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smith, Senior Software Developer at Google, Mountain View, Californiap>
4aside>

HTML

Với vi dữ liệu được bao gồm, mã HTML của phần

1<main>
2    <article>
3        <h1>JavaScript Basicsh1>
4        <p>JavaScript is a rich and expressive language...p>
5        <section>
6            <h2>Syntax Basicsh2>
7            <p>Understanding statements, variable naming, whitespace...p>
8        section>
9        <section>
10            <h2>Operatorsh2>
11            <p>Operators allow you to manipulate values...p>
12        section>
13        <section>
14            <h2>Conditional Codeh2>
15            <p>Sometimes you only want to run a block of code under certain conditions...p>
16        section>
17    article>
18main>

2 sẽ là.

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p itemscope itemtype="http://schema.org/Person">
4        Author:
5        <span itemprop="name">John Smithspan>,
6        <span itemprop="jobTitle">Senior Software Developerspan>
7        at
8        <span itemprop="worksFor" itemscope itemtype="https://schema.org/Corporation">
9            <span itemtype="name">Googlespan>,  
10        span>
11        <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
12            <span itemprop="addressLocality">Mountain Viewspan>,
13            <span itemprop="addressRegion">Californiaspan>
14        span>
15    p>
16aside>

HTML

Mã trên rõ ràng có nhiều dữ liệu hơn so với mã trước, nhưng cũng có nhiều thông tin hơn cho máy móc. Như bạn có thể nhận thấy, chúng tôi đã sử dụng các thuộc tính vi dữ liệu sau. ______41_______1 ,

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smithp>
4    <figure>
5        <img src="John Doe.png" alt="John Doe"/>
6        <img src="Maggie Smith.png" alt="Maggie Smith"/>
7        <img src="Tom Hardy.png" alt="Tom Hardy"/>
8        <figcaption>People who liked the articlefigcaption>
9    figure>
10aside>

2 và ______41_______3 . Vậy, tất cả những thuộc tính này có ý nghĩa gì?. So, what do all these attributes mean?

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smithp>
4    <figure>
5        <img src="John Doe.png" alt="John Doe"/>
6        <img src="Maggie Smith.png" alt="Maggie Smith"/>
7        <img src="Tom Hardy.png" alt="Tom Hardy"/>
8        <figcaption>People who liked the articlefigcaption>
9    figure>
10aside>

1 cho biết một nhóm dữ liệu vi mô mới. Một nhóm dữ liệu vi mô được gọi là ____41_______5 . Các mục chứa các cặp thuộc tính và giá trị. Loại mục được chỉ định bởi ____41_______2 . Đây thực sự là một URL đến một trang web chứa thông tin về mặt hàng đó. Trên trang đó, chúng ta có thể thấy tất cả các thuộc tính mà mặt hàng đó có thể có.

Chúng tôi thường chỉ sử dụng một số thuộc tính để mô tả một mục và chúng tôi xác định những thuộc tính này bằng thuộc tính

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smithp>
4    <figure>
5        <img src="John Doe.png" alt="John Doe"/>
6        <img src="Maggie Smith.png" alt="Maggie Smith"/>
7        <img src="Tom Hardy.png" alt="Tom Hardy"/>
8        <figcaption>People who liked the articlefigcaption>
9    figure>
10aside>

3 . Giá trị của một thuộc tính có thể là

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smithp>
4    <figure>
5        <img src="John Doe.png" alt="John Doe"/>
6        <img src="Maggie Smith.png" alt="Maggie Smith"/>
7        <img src="Tom Hardy.png" alt="Tom Hardy"/>
8        <figcaption>People who liked the articlefigcaption>
9    figure>
10aside>

5 mới (như

1<aside>
2    <p>Viewed by 1503 peoplep>
3    <p>Author: John Smithp>
4    <figure>
5        <img src="John Doe.png" alt="John Doe"/>
6        <img src="Maggie Smith.png" alt="Maggie Smith"/>
7        <img src="Tom Hardy.png" alt="Tom Hardy"/>
8        <figcaption>People who liked the articlefigcaption>
9    figure>
10aside>

9 trong .

Chúng tôi đã đề cập trước đây trong hướng dẫn này rằng một biểu ngữ có thể được mô tả bằng vi dữ liệu. Vì vậy, mã HTML cho điều đó sẽ giống như thế này

1<div itemscope itemtype="https://schema.org/WPAdBlock">
2    <a href="site.com" itemprop="url"><img src="banner.gif" alt="banner" itemprop="image" />a>
3div>

HTML

Có một công cụ rất hữu ích để tạo vi dữ liệu được gọi là trình tạo vi dữ liệu. Nó có thể tiết kiệm thời gian và hướng dẫn bạn cách sử dụng vi dữ liệu đúng cách cho các mặt hàng khác nhau

Hỗ trợ trình duyệt

Theo bảng, các thẻ ngữ nghĩa HTML5 được hỗ trợ tốt trong các phiên bản trình duyệt mới nhất. Đối với một số phiên bản cũ hơn của Internet Explorer, Firefox và Safari, chúng tôi có thể sử dụng HTML5 Shiv hoặc Modernizr (bao gồm cả HTML5 Shiv)

Tài nguyên bổ sung

Để biết thêm thông tin về chủ đề này, bạn có thể đọc những bài viết rất hữu ích này

Cấu trúc HTML5—div, section & article

yếu tố bài báo

Bắt đầu với lược đồ. org sử dụng Microdata

Các phần tử ngữ nghĩa HTML5 và Webflow. hướng dẫn thiết yếu

Phần kết luận

Hướng dẫn này đề cập đến một số ưu điểm của việc sử dụng HTML ngữ nghĩa. Chúng tôi đã tạo bố cục HTML ngữ nghĩa và sử dụng vi dữ liệu để thêm thông tin vào nội dung của trang web

Hy vọng rằng, hướng dẫn này đã giúp bạn hiểu cách HTML ngữ nghĩa có thể cải thiện tương tác của trang web và công cụ tìm kiếm. Và với việc ngày càng có nhiều trình duyệt sử dụng HTML5, các thẻ ngữ nghĩa chắc chắn sẽ trở nên phổ biến hơn, vì vậy việc thành thạo chúng bây giờ có thể mang lại phần thưởng trong tương lai

Thẻ ngữ nghĩa trong HTML là gì?

Thẻ HTML ngữ nghĩa là thẻ xác định ý nghĩa của nội dung mà chúng chứa . Ví dụ: các thẻ như

H1 có phải là HTML ngữ nghĩa không?

Trong HTML, ví dụ, phần tử , phần tử này cung cấp cho văn bản mà nó bao quanh vai trò (hoặc . "