言
曾幾何時,前端的頁面布局一直采用div,但是div本身并沒有實際的意義,它只是定義了一個區域,而且這個區域是做什么的瀏覽器并不知道,不利于頁面的SEO優化。
因此HTML5中新增的語義化標簽就很好的解決了這個問題,當然它還有其他一些好處,接下來我們就一起來看看吧。
HTML5
語義化標簽的優點
即使在沒有CSS的支持下,瀏覽器依然能呈現出良好的內容結構。
有利于SEO,語義化的標簽更有利于爬蟲去解析更多有效信息。
跨設備體驗,不同設備都支持語義化標簽,那么即使在不同設備下依然可以有無縫體驗。
便于代碼開發和維護,語義化可以增加代碼的可讀性,讓團隊成員可以更好理解彼此的代碼意圖。
HTML5新增的語義化標簽
那么在HTML5中新增了哪些利于頁面布局的HTML5標簽呢?
我們先通過以下這張圖來看看。
HTML5新增語義化標簽
header標簽
header標簽表示頁面或一個區域(section)的頁眉部分,通常在里面包含h1-h6標簽來使用。
我們直接通過代碼來看看在瀏覽器上的效果。
header標簽效果
footer標簽
footer標簽和header標簽類似,表示頁面或一個區域(section)的頁腳部分,通常會將網站的證書,許可,版權協議等內容放在這塊。
footer標簽
hgroup標簽
hgroup標簽一般用于h1-h6標簽的組合,比如主標題,副標題,三級標題的組合情況。
我們通過以下代碼段來看看其代碼組織形式。
hgroup標簽
需要注意的一點是,如果需要使用hgroup標簽則保證在hgroup標簽里至少有兩個h標簽,如果只有一個h標簽,則應該去掉hgroup標簽。
nav標簽
nav標簽主要用于定義頁面的導航部分,例如頁面或者section中的側邊目錄欄。
其使用方式如下代碼段所示。
nav標簽
aside標簽
aside標簽一般會指定網頁的相關內容,友情鏈接等附注性的東西,類似于廣告也可以使用aside標簽。
main標簽
main標簽定義一個頁面的主要內容,在一個頁面中只能使用一次。
article標簽
article標簽表示的是一個獨立完整的內容區域,比如一張報紙的某個獨立版塊。
在article標簽內部可以包含其他語義化標簽,其基本使用如下所示。
article標簽
section標簽
section標簽表示的是文檔中內容的分節或分段,上述的article,nav或者aside其實都可以看做特殊的section標簽,如果能用article,nav,aside標簽,最好不要用section標簽。
section標簽與與article標簽可以互相嵌套,需要視具體情況而定。
結束語
如果你的布局還是只有div,那么看完了今天這篇文章后完全可以嘗試下新的HTML5標簽噢。
感興趣的同學可以加下我自己創建的Q群,大家相互學習交流,我也會盡力維護好群環境,群號如下所示。
號碼
程序員web前端分享常見html5語義化標簽,我們知道,創建結構清晰的頁面可以建立良好的語義化基礎,也降低了使用css的難度,下面總結了一些常用的語義化標簽,有空慢慢更新,歡迎大家補充
語義化HTML:用最恰當的HTML元素標記的內容。
優點:1 提升可訪問性; 2 SEO; 3 結構清晰,利于維護;
(HTML5舊的行內元素都被歸類為短語內容)
通用容器:div——塊級通用容器;span——短語內容無語義容器。
如果語義不合適,也不要霸王硬上弓,=。。 =老實的用div吧。
< title></title>:簡短、描述性、唯一(提升搜索引擎排名)。
搜索引擎會將title作為判斷頁面主要內容的指標,有效的title應該包含幾個與頁面內容密切相關的關鍵字,建議將title核心內容放在前60個字符中。
<hn></hn>:h1~h6分級標題,用于創建頁面信息的層級關系。
對于搜索引擎而言,如果標題與搜索詞匹配,這些標題就會被賦予很高的權重,尤其是h1。
<header></header>:頁眉通常包括網站標志、主導航、全站鏈接以及搜索框。
也適合對頁面內部一組介紹性或導航性內容進行標記。
<nav></nav>:標記導航,僅對文檔中重要的鏈接群使用。
Html5規范不推薦對輔助性頁腳鏈接使用nav,除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要鏈接。
<main></main>:頁面主要內容,一個頁面只能使用一次。如果是web應用,則包圍其主要功能。
<article></article>:包含像報紙一樣的內容= =||是這么理解的,表示文檔、頁面、應用或一個獨立的容器。
article可以嵌套article,只要里面的article與外面的是部分與整體的關系。
<section></section>:具有相似主題的一組內容,比如網站的主頁可以分成介紹、新聞條目、聯系信息等條塊。
如果只是為了添加樣式,請用div!
<aside></aside>:指定附注欄,包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。
如果放在main內,應該與所在內容密切相關。
<footer></footer>:頁腳,只有當父級是body時,才是整個頁面的頁腳。
<small></small>:指定細則,輸入免責聲明、注解、署名、版權。
只適用于短語,不要用來標記“使用條款”、“隱私政策”等長的法律聲明。
<strong></strong>:表示內容重要性。
<em></em>:標記內容著重點(大量用于提升段落文本語義)。
<mark></mark>:突出顯示文本(yellow),提醒讀者。
在HTML5中em是表示強調的唯一元素,而strong則表示重要程度。
<b></b>:出于實用目的提醒讀者的一塊文字,不傳達任何額外的重要性
<i></i>:不同于其他文字的文字= =|||這個翻譯真的是······
<figure></figure>:創建圖(默認有40px左右margin)。
<figcaption></figcaption>:figure的標題,必須是figure內嵌的第一個或者最后一個元素。
<cite></cite>:指明引用或者參考,如圖書的標題,歌曲、電影、等的名稱,演唱會、音樂會、規范、報紙、或法律文件等。
只用于參考源本身,而不是從中引述。
<blockquoto></blockquoto>:引述文本,默認新的一行顯示。
<q></q>:短的引述(跨瀏覽器問題,盡量避免使用)。
可以對blockquoto和q元素使用cite屬性(不是cite元素!),對搜索引擎自動化工具有用。cite=“URL”引述來源地址。
<time></time>:標記時間。datetime屬性遵循特定格式,如果忽略此屬性,文本內容必須是合法的日期或者時間格式。
不再相關的時間用s標簽。
<abbr></abbr>:解釋縮寫詞。使用title屬性可提供全稱,只在第一次出現時使用就ok。
abbr[title]{ border-bottom:1px dotted #000; }
<dfn></dfn>:定義術語元素,與定義必須緊挨著,可以在描述列表dl元素中使用。
<address></address>:作者、相關人士或組織的聯系信息(電子郵件地址、指向聯系信息頁的鏈接)。
如果提供整個頁面的作者聯系信息,一般放在頁面級footer里。不能包含文檔或者文檔等其他內容。
<del></del>:移除的內容。
<ins></ins>:添加的內容。
少有的既可以包圍塊級,又可以包圍短語內容的元素。
<code></code>:標記代碼。包含示例代碼或者文件名 (< < > >)
<pre></pre>:預格式化文本。保留文本固有的換行和空格。
<meter></meter>:表示分數的值或者已知范圍的測量結果。如投票結果。
例如:<meter value="0.2" title=”Miles“>20%completed</meter>
<progress></progress>:完成進度。可通過js動態更新value。
著互聯網技術的發展,網頁內容變得越來越豐富。HTML5 作為標記語言的最新標準,不僅提供了更多的功能,還引入了一系列語義化標簽。這些標簽使得網頁內容的結構更加清晰,有助于搜索引擎優化(SEO),并提高了網站的可訪問性。
語義化標簽通過提供更具描述性的元素名稱,使得文檔內容的結構更加明確。這樣做有幾個明顯的優勢:
下面,我們將通過幾個例子來展示如何使用HTML5的語義化標簽來構建網頁。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 語義化標簽示例</title>
</head>
<body>
<article>
<header>
<h1>HTML5 的新特性</h1>
<p>發布日期:2023-12-17</p>
<p>作者:張三</p>
</header>
<section>
<h2>引入了新的語義化標簽</h2>
<p>HTML5 定義了一系列新的元素,用于更好地描述文檔的不同部分...</p>
</section>
<section>
<h2>表單控件的增強</h2>
<p>HTML5 提供了更多的表單控件,如 date、time、email 等...</p>
</section>
<footer>
<p>版權所有 ? 2023 張三</p>
</footer>
</article>
</body>
</html>
在這個示例中,我們使用了<article>、<header>、<section>和<footer>等標簽來構建一個文章的基本結構,使得文章的主體、標題、各個章節和尾注的語義更加明確。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>導航菜單示例</title>
<style>
/* 重置ul和li的默認樣式 */
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
text-align: center;
}
nav ul li {
display: inline-block;
}
/* 設置鏈接的基本樣式 */
nav ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: white;
font-weight: bold;
}
/* 鼠標懸停時的樣式 */
nav ul li a:hover {
background-color: #555;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯系我們</a></li>
<li><a href="#about">關于我們</a></li>
</ul>
</nav>
</body>
</html>
使用<nav>標簽定義導航鏈接集合,這有助于搜索引擎和輔助技術確定頁面中的導航部分。
在這個示例中,做了以下幾點樣式設置:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>側邊欄示例</title>
<style>
/* 設置側邊欄的基本樣式 */
aside {
width: 250px; /* 側邊欄寬度 */
padding: 20px; /* 內邊距 */
background-color: #f4f4f4; /* 背景色 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 陰影效果 */
position: fixed; /* 固定位置 */
top: 0; /* 頂部對齊 */
left: 0; /* 左側對齊 */
height: 100%; /* 高度100% */
}
/* 設置標題的樣式 */
aside h2 {
color: #333; /* 字體顏色 */
margin-bottom: 20px; /* 與下方內容的間距 */
}
/* 重置列表的默認樣式,并設置列表項樣式 */
aside ul {
list-style: none; /* 移除列表項的默認樣式 */
padding: 0; /* 移除默認內邊距 */
margin: 0; /* 移除默認外邊距 */
}
aside ul li {
margin-bottom: 10px; /* 列表項之間的間距 */
}
/* 設置鏈接的基本樣式 */
aside ul li a {
text-decoration: none; /* 移除下劃線 */
color: #333; /* 字體顏色 */
font-weight: bold; /* 字體加粗 */
}
/* 鼠標懸停時的樣式 */
aside ul li a:hover {
color: #007bff; /* 鼠標懸停時的字體顏色 */
}
</style>
</head>
<body>
<aside>
<h2>相關文章</h2>
<ul>
<li><a href="#">HTML5 基礎</a></li>
<li><a href="#">CSS3 新特性</a></li>
<li><a href="#">JavaScript 高級程序設計</a></li>
</ul>
</aside>
</body>
</html>
<aside>標簽通常用于包含頁面主內容之外的內容,如側邊欄,它可以包含相關鏈接、廣告、站點地圖等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>頁腳信息示例</title>
</head>
<body>
<footer>
<p>聯系方式:example@example.com</p>
<p>地址:中國某地某街道123號</p>
<p>版權所有 ? 2023 HTML5前端工程師</p>
</footer>
</body>
</html>
<footer>標簽定義了文檔或節的頁腳,通常包含作者信息、版權信息、聯系信息等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主要內容區域示例</title>
</head>
<body>
<main>
<article>
<h1>HTML5 語義化標簽</h1>
<p>HTML5 提供了許多新的元素,用于更清晰地描述你的內容...</p>
</article>
<article>
<h1>HTML5 表單特性</h1>
<p>HTML5 為表單輸入提供了多種新的類型,如 color、date 等...</p>
</article>
</main>
</body>
</html>
<main>標簽用于指定文檔的主要內容,它應該是文檔中最重要的內容區域,通常不包括那些在整個站點中重復出現的內容(如導航鏈接)。
通過上述示例,我們可以看到HTML5語義化標簽如何使網頁結構更加清晰,并為搜索引擎優化和可訪問性提供了支持。隨著技術的發展,我們有責任編寫更高質量的代碼,不僅為了自己,也為了創建一個更好的網絡環境。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。