HTML5文檔的語義化是指什么？

在HTML5中新增了很多語義標簽概念，使HTMl文檔根據頁面內容結構選擇語義標簽，是頁面結構內容格式化。它有利于清楚的描述HTML文檔的意義給瀏覽器和開發者。下面列舉了一些我們常用到的語義標簽：

創新互聯-專業網站定制、快速模板網站建設、高性價比裕民網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式裕民網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋裕民地區。費用合理售后完善，10余年實體公司更值得信賴。

section元素?表示頁面中的一個內容區?塊,比如章節、頁眉、頁腳或頁面的其他部分?？梢院蚳1、?h2……等元素結合起來使用，表示文檔結構。例：HTML5中section……/section；HTML4 中div ……/div。

article元素?表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。

aside元素?表示article元素內容之外的、與article元素內容相關的輔助信息。

header元素?表示頁面中一個內容區塊或真個頁面的標題。

hgroup元素?表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

footer元素?表示整個頁面或頁面中一個內容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯系信息。

nav元素?表示頁面中導航鏈接的部分。

figure元素?表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用

figcaption元素為figure元素組添加標題。

到這里你可以能對如何對HTML頁面語義化還是一直半解。下面我們就來通過一個具體的頁面結構進行說明。

今天你的leader興致沖沖地找到你，希望你可以幫他一個小忙，他現在急著要去開會。要幫什么忙呢？你很好奇。

他對你說，公司打算做一個公司主頁，讓你設計下這個頁面的基本結構。

這個任務很簡單嘛！你爽快的答應了，然后你就自己設計出來如下圖所示的頁面基本結構布局。

好了，完工！你自信滿滿。

你的leader過來看了下你的成果。總體來說，他還挺滿意。但是他說從你設計的網頁布局中我們視覺正常的人可以直觀的看到頁面的布局，并獲取頁面的內容信息。

但是屏幕閱讀器或者搜索引擎無法獲取準確獲取頁面的內容信息和內容相互之間的關系。

這樣的設計是正確的但是還可以進行改進。

于是他百忙之中抽出一點時間對你的網頁布局做了改進

??在你的設計的布局中加入了一些HTML5中的語義元素，這樣無論是人還是機器都可以很輕松的從設計布局中讀取到相關信息了。這樣的設計是不是更合理呢？這樣做的好處有：

1、將構造HTML頁面內容語義元素一起使用，可以將HTML內容分成明確的幾個區域。

2、建立區域關系后的頁面，對于人或者機器，都更具有可讀性。而且，這也有利于搜索引擎訪問頁面。

3、建立區域關系后的頁面，也有利于網頁風格的一致性。

這些都是HTML5的基礎知識，在教程網站秒秒學中有很多關于這些知識的講解，推薦你可以去看看。

說一說你對HTML5語義化的理解

本題地址：

語義化意味著顧名思義，HTML5的語義化指的是合理使用語義化的標簽來創建頁面結構，如header,footer,nav，從標簽上即可以直觀的知道這個標簽的作用，而不是濫用div。

例如使用可視化標簽，構建下面的頁面結構：

對于早期不支持HTML5的瀏覽器，如IE8及更早之前的版本，我們可以引入 html5shiv 來支持。

html5中的語義元素是什么意思

HTML5 語義元素

語義= 意義.

語義元素 = 元素的意義.

什么是語義元素?

一個語義元素能夠為瀏覽器和開發者清楚的描述其意義。

而像 div 和 元素是屬于無語義元素。

語義元素實例: form , t able, and img - 清楚的描述了元素所代表的內容。

瀏覽器對語義元素的支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持語義元素。

注意: Internet Explorer 8及更早IE版本不支持該語義元素，但是文章底部提供了兼容的解決方法。

HTML5中新的語義元素

許多現有網站都包含以下HTML代碼： div id="nav" ,

, 或者

, 來指明導航鏈接, 頭部, 以及尾部.

HTML5提供了新的語義元素來明確一個Web頁面的不同部分:

header

nav

section

article

aside

figcaption

figure

footer

HTML5元素

section 標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分。

根據W3C HTML5文檔: section 包含了一組內容及其標題。

html5的語義化標簽有哪些

1.header：標簽定義“網頁”或“section”的頁眉。

通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。

2.nav：定義導航鏈接的部分。

3.footer標簽：代表“網頁”或“section”的頁腳。

通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。

如果footer元素包含了整個節，那么它們就代表附錄，索引，提拔，許可協議，標簽，類別等一些其他類似信息。

4. hgroup元素：“網頁”或“section”的標題

當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

5.section標簽：定義文檔中含有標題和段落的區域。（強調分段或分塊）

6.article：代表獨立、完整、可獨自被外部引用的內容（博客或報刊中的文章、一遍論壇帖子、一段用戶評論或獨立的插件、或任何獨立的內容）;（強調的是獨立性！可含有完整的標題、內容、腳注)

7. aside標簽：表示當前頁面或文章的附屬信息部分，可包含于當前頁面或主要內容相關的引用、側邊欄、廣告、導航條、以及其他類似的有別于主要內容的部分。

8. figure標簽：規定獨立的流內容（圖像、圖表、照片、代碼等等）。

figcaption標簽：用于元素定義figure的標題。

1）.一個figure元素內最多只允許放置一個figcaption元素，其他元素可無限放置。

2）.figcaption 元素應該被置于 figure元素的第一個或最后一個子元素的位置。

9. time標簽：定義時間或日期

10. address標簽：代表區塊容器，必須是作為聯系信息出現，郵編地址、郵件地址等等,一般出現在footer。

網頁標題：html5語義,html5語義化的意義和作用
轉載來源：http://vcdvsql.cn/article48/dsiedep.html

成都網站建設公司_創新互聯，為您提供Google、自適應網站、微信公眾號、做網站、小程序開發、

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯