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