資訊專欄INFORMATION COLUMN
摘要：語義化簡單來說，我們可以理解為用正確的標簽做正確的事情。正確使用語義標簽可以帶來很多好處。一些語義類標簽介紹用于展示介紹性內(nèi)容，通常包含一組介紹性的或是輔助導航的實用元素。表示小時制時間。表示術(shù)語的一個定義。
本文最初于 2018-09-21 發(fā)布于 知乎 ，后在 《重學前端》 專欄的學習中，重新復習整理，發(fā)布于 Github 上，并計劃寫一系列前端學習相關(guān)的文章。歡迎 star 。HTML 語義化
簡單來說，我們可以理解為：用正確的標簽做正確的事情。
例如：
段落用 p 標簽，標題用 h 系列標簽，邊欄用 aside 標簽，主要內(nèi)容用 main 標簽。正確使用語義標簽可以帶來很多好處。
為什么要關(guān)注 HTML 語義化？（為什么要使用語義類標簽？）對人：
增強可讀性，對開發(fā)者更友好，在沒有 CSS 的情況下也能較好地呈現(xiàn)網(wǎng)頁的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)，便于團隊的開發(fā)和維護。
對機器：
有利于 SEO ，可以讓搜索引擎爬蟲更好地獲取到更多有效信息，搜索引擎的爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重，有效提升網(wǎng)頁的搜索量。
支持讀屏軟件，方便其他設(shè)備的解析（如屏幕閱讀器、盲人閱讀器等），利于無障礙閱讀，提高可訪問性。
一些語義類標簽介紹用于展示介紹性內(nèi)容，通常包含一組介紹性的或是輔助導航的實用元素。
表示最近一個章節(jié)內(nèi)容或者根節(jié)點元素的頁腳。通常出現(xiàn)在尾部，包含一些作者信息、相關(guān)鏈接、版權(quán)信息等。
表示跟文章主體不那么相關(guān)的部分，可能包含導航、廣告等工具性質(zhì)的內(nèi)容。
側(cè)邊欄是 aside，aside 不一定是側(cè)邊欄。
aside 和 header 中都可能出現(xiàn)導航 ，header 中的導航多數(shù)是到文章的目錄，而 aside 中的導航多是到關(guān)聯(lián)頁面或者整站地圖。
footer 中可以包含此元素。
容易誤用，并非表示單純的地址，而是表示「文章作者的聯(lián)系方式」。
可以讓作者為它最近的 或者 祖先元素提供聯(lián)系信息。在后一種情況下，它應(yīng)用于整個文檔。
表示標題組。
表示重音。同樣一句話里如果重音不同，表達的意思也許大相徑庭。
表示文本十分重要，一般用粗體顯示。
表示縮寫。
橫向分割線，表示段落級元素之間的主題轉(zhuǎn)換（例如，一個故事中的場景的改變，或一個章節(jié)的主題的改變）。
表示段落級引述內(nèi)容。
表示行內(nèi)的引述內(nèi)容。
表示引述的作品名。
表示24小時制時間。
兩者常配合使用，表示一段獨立的內(nèi)容，并且作為一個獨立的引用單元。
當它屬于主體(main flow)時，它的位置獨立于主體。這個標簽經(jīng)常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉(zhuǎn)移到附錄中或者其他頁面時不會影響到主體。 -- MDN
這是一張圖片。
表示術(shù)語的一個定義。
The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
導航欄、有序列表、無序列表
中的內(nèi)容會保持原有格式。
元素用于標識計算機程序輸出。
表示一段計算機代碼。
對于語義類標簽的使用也許會帶來一些爭議，我們應(yīng)該遵循的原則是：
盡量只用自己熟悉的語義標簽。用對比不用好，不用比用錯好。
提示：
你可以在百度或者谷歌搜索中輸入「標簽名稱」+「MDN」這兩個關(guān)鍵字來查看更加專業(yè)和詳細的解釋。
另外安利一個 HTML 標簽的學習鏈接：
HTML Reference - A free guide to all HTML elements and attributes
（完）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53803.html
摘要：代碼示例語義化語義化語義化語義化語義化年月日小維語義化標簽包括還有等。而沒有語義化的元素如則推薦使用。語義化包含了標簽語義化和命名語義化。 什么是Web語義化 Web語義化是指使用恰當語義的html標簽、class類名等內(nèi)容，讓頁面具有良好的結(jié)構(gòu)與含義，從而讓人和機器都能快速理解網(wǎng)頁內(nèi)容。語義化的web頁面一方面可以讓機器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁的信息，從而可以讀懂網(wǎng)頁的內(nèi)...
摘要：語義化的頁面一方面可以讓機器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁的信息，從而可以讀懂網(wǎng)頁的內(nèi)容，然后將收集匯總的信息進行分析，結(jié)果為人類所用另一方面它可以讓開發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內(nèi)容。 我眼中的Web 語義化 web語義化是什么？ Web語義化，使用語義恰當?shù)臉撕?，可以讓頁面具有良好的結(jié)構(gòu)，頁面元素具有良好的含義，從而讓人和機器都能快速理解。語義化的...
摘要：語義化的頁面一方面可以讓機器在更少的人類干預(yù)情況下收集并研究網(wǎng)頁的信息，從而可以讀懂網(wǎng)頁的內(nèi)容，然后將收集匯總的信息進行分析，結(jié)果為人類所用另一方面它可以讓開發(fā)人員讀懂結(jié)構(gòu)和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內(nèi)容。 我眼中的Web 語義化 web語義化是什么？ Web語義化，使用語義恰當?shù)臉撕?，可以讓頁面具有良好的結(jié)構(gòu)，頁面元素具有良好的含義，從而讓人和機器都能快速理解。語義化的...
摘要：邏輯學的語義學著眼點在于邏輯系統(tǒng)的語義解釋，是一個理想化的模型系統(tǒng)，不直接涉及自然語言。例如，通過幫助臨床研究中的決策，語義技術(shù)將跨機構(gòu)橋接多種形式的生物和醫(yī)學信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程師的招聘中，經(jīng)常有這樣的要求：對Web 語義化有深刻理解。那么到底什么才是深刻理解Web語義化...
閱讀 1262·2021-09-04 16:41
閱讀 2428·2021-09-02 10:18
閱讀 927·2019-08-29 16:40
閱讀 2624·2019-08-29 16:14
閱讀 918·2019-08-26 13:41
閱讀 1311·2019-08-26 12:24
閱讀 742·2019-08-26 10:24
閱讀 2882·2019-08-23 17:54
