關於Web語義化的意義

時間 2019-11-18

標籤關於 web 語義意義欄目 HTML 简体版

原文原文鏈接

隨着如今WEB（網頁）的愈來愈火爆，WEB開發也愈來愈受人們重視。Tim Berners-Lee 可能不會想到它如今會達到的規模以及深刻到咱們生活的那麼多方面。css

其實 HTML 在剛開始設計出來的時候就是帶有必定的「語義」的，包括段落、表格、圖片、標題等等，但這些更多地只是方便瀏覽器等 UA 對它們做合適的處理。但逐漸地，機器也要藉助 HTML 提供的語義以及天然語言處理的手段來「讀懂」它們從網上獲取的 HTML 文檔，但它們沒法讀懂例如「紅色的文字」或者是深度嵌套的表格佈局中內容的含義，由於太多已有的內容都是專門爲了可視化的瀏覽器設計的。html

咱們應該在發佈內容的時候，就用機器可讀的、被普遍承認的語義信息來描述內容，來下降機器處理 Web 內容的難度（HTML 自己就已是朝這個方向邁出的一小步了）。程序員

而人們在WEB開發中使用的最多的標籤<div></div>。div這個標籤無疑很強大，一個div包着一個div，平級就用float，或者用position：absolute給某個div定位去達到開發者要的效果，但這明顯是一個很差的習慣。不得不認可div有其好處，例如沒有ul和li那些前間距，以及醜陋的點，也沒有a標籤那些醜陋的下劃線和點擊效果（雖然這些均可以用一個reset.css文件統一解決）。而一些初學者爲了貪圖方便，幾乎所有使用div進行開發。代碼看起來就是這樣的：web

<html>
	<body>
        //這裏是個列表
        <div class="ul">  
            <div class="li">
            </div>
            <div class="li">
            </div>
            <div class="li">
            </div>
            <div class="li">
            </div>
        </div>
        //這裏是個表格
        <div class="table">  
            <div class="tr">
                <div class="td">
                </div>
                <div class="td">
                </div>
                <div class="td">
                </div>
            </div>
        </div>
        //這裏是換行文本
        <div class="p">
        </div>
    </body>
</html>

這樣子看起來效果也許十分不錯。。可是這樣子其餘標籤的意義呢，不一樣的標籤是爲了讓機器更方便的理解（其次也是爲了讓接手的人看起來更輕鬆）。因此代碼應該是下面這個樣子的纔對：瀏覽器

<html>
	<body>
        //這裏是個列表
        <ul class="ul">  
            <li class="li">
            </li>
            <li class="li">
            </li>
            <li class="li">
            </li>
            <li class="li">
            </li>
        </ul>
        //這裏是個表格
        <table class="table">  
            <tr class="tr">
                <td class="td">
                </td>
                <td class="td">
                </td>
                <td class="td">
                </td>
            </tr>
        </table>
        //這裏是換行文本
        <p class="p">
        </p>
    </body>
</html>

語義化的 HTML 首先要強調 HTML 結構一個網頁就好像一幢房子，HTML 結構就是鋼筋混泥土的牆，一幢房子若是沒有鋼筋混泥土的牆那就是一堆廢磚頭，也就稱不上是房子了。CSS 是裝飾材料，是油漆，是用來裝飾房子的。CSS 若是沒有 HTML 結構那也就什麼都不是了，沒有了實際使用價值。CSS 徹底依靠引用它的 HTML 文檔。若是你想使 CSS 的能力發揮到極致，提供一個既乾淨又有結構的 HTML 是很是必要的。佈局

在 web 標準化過程當中，<ul> 還被更多的用於導航條，原本導航條就是個列表，這樣作是徹底正確的，並且當你的瀏覽器不支持 CSS 的時候，導航連接仍然很好使，只是美觀方面差了一點而已。spa

讓全部的標籤各施其職，讓代碼回到本該呆的位置，我以爲這纔是咱們做爲程序員該作的事情。設計

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。