干了這么多年的前端，之前面試的時候經常會遇到面試官提問：你是如何理解HTML的語意化的？
說實話，之前遇到這個問題的時候，都是從網上找參考答案，然后記下來，用自己的語言重新組織一下，就變成自己的理解了，
為什么說要重學HTML5的語意化，是因為今年以來，公司安排了一項任務給我，讓我做一個自專案的官網，然后希望能在百度搜索中排名盡可能排到首頁上去，
做官網，對我來說，那是相當容易，我可以說出來好幾種方案，react的，vue的，jquery的，或者什么框架都不用的，都能實作，而且事實上，我也很快就完成了這項作業，但是在后續的百度搜索排名上倒是遇到了一些問題，
其實這個屬于 SEO 的作業范疇了，沒辦法，公司又不可能特意再雇傭一位 SEO 專家來給這個子專案專門做 SEO 的，
我經過查找各種資料，各種博客（推薦：SEO與HTM的聯系），各種論壇，總算最后效果還不錯，
下面說說語意化到底是什么？
1. Headings
Headings 其實就是我們常見的 h1, h2, h3 這些標簽，其中 h1 應該是一個網頁的標題，其實類比到 word 檔案中，就是一個 Word 檔案中的標題，
網頁中的 Headings 數量及結構應該是依次展開的，就像 Word 檔案一樣，標題結構如果清晰的話，那么這個檔案內容一定是易讀的，而網頁的 Headings 如果合理，那么同樣這對于搜索引擎爬蟲來說也是友好的，
2. List
我們做前端的，最喜歡將 ul、ol這些原始的樣式消除掉，搞一些其他的樣式，或者應該用他們的時候，會使用 div 來實作，
最終展示效果可能沒啥區別，但是對于搜索引擎來說，區別大了去了，ol和ul的本意是有序串列和無序串列，搜索引擎在讀到他們的時候，會將他們的子元素都歸為同一級別，屬于同一個 List 的，
3. Nav
我在做這個官網的時候，導航一開始就是用 div 實作的，其實這是不對的，因為用 div 元素是沒有辦法說明這個節點是導航選單節點的，而 Nav 元素則直接語意化了，這個是導航，搜索引擎讀到之后可以快速了解網站的整體結構，
今天的內容先到這邊，還有的部分下一篇繼續~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/36739.html
標籤：HTML5