幹了這麼多年的前端，之前面試的時候經常會遇到面試官提問：你是如何理解HTML的語義化的？ 說實話，之前遇到這個問題的時候，都是從網上找參考答案，然後記下來，用自己的語言重新組織一下，就變成自己的理解了。 為什麼說要重學HTML5的語義化，是因為今年以來，公司安排了一項任務給我，讓我做一個自項目的官網 ...
幹了這麼多年的前端，之前面試的時候經常會遇到面試官提問：你是如何理解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 元素則直接語義化了，這個是導航。搜索引擎讀到之後可以快速瞭解網站的整體結構。
今天的內容先到這邊，還有的部分下一篇繼續~
