iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0

標籤語意的重要性

在瀏覽器的世界,雖然很多元素的視覺效果可能很像,可是針對網站的每個不同內容下好的元素很重要。它會幫助瀏覽器讀取文檔,讓網路體驗更優化。

進到好想工作室traing之前,元素雖然會用,可是並沒有注意到它們的語意。雖然有些元素在瀏覽器上看起來都一樣,而且講到看起來的樣子,CSS指定樣式更可以做到一樣的效果,可是對瀏覽器的讀取來說就會有不同的意思。不能只管元素看起來怎樣,更要去知道元素的意涵,寫出對瀏覽器來說好懂的標籤,會讓它運行得更好。未來若要成為前端工程師,不能不去關心標籤的語意。

接下來的HTML元素筆記,除了元素的用法,也會盡量提到它們的語意,而有些元素並沒有特殊的語意。

那我們就開始囉!/images/emoticon/emoticon08.gif

昨天講了版本宣告、<head>裡引入的元數據,接著就在<body>裡輸入今天要練習的內容吧。

再用瀏覽器打開該HTML檔,就可以看到成果。

或是用codepen練習~點擊左上角的pen就會進入練習的頁面。

耶~好方便!

<h1>~<h6>

heading元素是用來裝標題用的。

heading元素除了作為文章的標題外(看起來比較大、字體粗、行高較高),在元素的語意上,它們跟網頁中的關鍵字也有關係,會關乎到SEO(搜尋引擎優化)。heading有整個網頁的首要標題、次要標題、更次要標題的特性,<h1>是整個網頁中最重要的關鍵字,它最容易被搜尋引擎找到。舉例Mac的官方網頁,放入<h1>的就會是"mac"這個詞。

*SEO的影響因素很多,對網頁內容下好的語意標籤只是其中一個。

<h1>我是最大的標題</h1>
<h2>我是第二大的標題</h2>
<h3>我是第三大的標題</h3>
<h4>我是第四大的標題</h4>
<h5>我是第五大的標題</h5>
<h6>我是第六大的標題</h6>

<p>

paragraph元素是用來包一篇文章的每個段落。或是當你的網頁內容文字雖然很短不成段落,但又不想放入語意強的heading元素裡,也可以用<p>。

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio laborum enim nostrum ipsam aliquam doloremque, exercitationem asperiores assumenda earum? Sequi quia accusamus aut quam aspernatur dolorem vel ipsam excepturi consectetur.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, recusandae. Saepe natus iusto possimus, at repellendus sit sequi. Iusto esse commodi perspiciatis dolor cumque voluptatibus magnam culpa quisquam dolorum voluptas!
</p>

<em>與<i>

<em>我被em了</em>
<i>我被i了</i>

  • 這兩個元素在效果上都是斜體。
  • <em>元素元素原意是emphasis(意思是:重點、強調語氣)。
  • <b>元素的原意是italicize(意思是:斜體的,只是樣式上顯示為斜體)。

所以就元素的語意上,<em>元素更強調所包住的內容。另外眼尖的人也發現了吧?它們兩個都是inline元素,所以都在同一行。

<strong>與<b>

<p>我是<strong>段落</strong>我是<b>段落</b>我是段落我是段落我是段落</p>

  • 這兩個元素在效果上都是粗體。
  • <strong>元素語意很明顯有加強的意味。
  • <b>元素的原意是bold(意思是:粗體的,只是樣式上顯示為粗體)。

*基本上粗體或斜體樣式都可以在CSS指定,不太需要用到<b>或是<i>,除非有要強調某個內容,才用語意更多一層的<strong>和<em>。

<ul>/<ol>以及<li>

<ul>
  <li>香蕉</li>
  <li>芭樂</li>
  <li>蓮霧</li>
</ul>

<ol>
  <li>香蕉</li>
  <li>芭樂</li>
  <li>蓮霧</li>
</ol>
  • <ul>跟<ol>都是列表元素,<li>則是列表內的條列。
  • <ul>是無序列表元素。
  • <ol>是有序列表元素。

<table>、<tr>、<td>

<table>
  <tr>
    <td>name</td>
    <td>age</td>
  </tr>
  <tr>
    <td>Max</td>
    <td>21</td>
  </tr>
  <tr>
    <td>Lily</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>36</td>
  </tr>
</table>

為了更清楚看出它是表格,偷偷套一下CSS樣式給大家看

  • <table>為表單元素
  • <tr>為列(block元素)
  • <td>為欄(inline元素)

以前的網頁結構很多都是用表格元素來做,像史萊姆的第一個家的網頁結構就是用<talbe>元素堆起來的。為了能夠區分表單內的資料身份,<table>相關元素相對複雜,而延伸出如<thead>、<tbody>、<tfoot>(表單的頭、身體、腳),讓表單元素內的資料更具語意身份。

更多<table>元素的用法見mdn

<span>與<div>

  • 這兩個元素通常都被當容器使用,容器是中性的,沒有進一步的語意,但在切版時就很需要,像是要把<h1>跟<p>包起來給CSS套樣式時,就會需要用到容器元素。

  • <span>是inline元素。用法舉例:

    <p>比起香蕉,我更愛<span>芭樂</span>喲!</p>
    

  • <div>是block元素。用法舉例:
    <div>包住數個內容,再用CSS做樣式。

取代以往用<table>來切網頁的區塊,<div>做為容器元素在切版上,可以讓畫面的區塊更為靈活。而<div>作為網頁區塊的容器,並沒有特殊的語意,HTML5推出了新的語意化標籤,將會在之後介紹。

今天的筆記告一段落,明天見。/images/emoticon/emoticon41.gif

*\有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day6 動手寫HTML(1)
下一篇
Day8 動手寫HTML(3)
系列文
從門外漢到前端新手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
RURU Tseng
iT邦新手 2 級 ‧ 2019-09-22 14:18:40

超仔細的過程介紹,推推~

JinWen iT邦新手 5 級 ‧ 2019-09-22 19:54:29 檢舉

耶,謝謝!>///<

0
OK : )
iT邦新手 5 級 ‧ 2019-10-17 10:39:19

這兩個元素在效果上都是斜體。
<em>元素元素原意是emphasis(意思是:重點、強調語氣)。
<b>元素的原意是italicize(意思是:斜體的,只是樣式上顯示為斜體)。
所以就元素的語意上,<em>元素更強調所包住的內容。另外眼尖的人也發現了吧?它們兩個都是inline元素,所以都在同一行。

這一段有打錯唷
這段落是討論i,你打成b了唷~

我要留言

立即登入留言