---
# System prepended metadata

title: "\U0001F3C5 Day 1 - HTML 語意標籤運用"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 1 - HTML 語意標籤運用

歡迎各位參加本次的切版直播班，每日作業主要是將各個知識點作拆分，透過每日練習與補充這些知識點，每日花數分鐘便能與直播課程本身達到良好的協同作用，十分建議同學們能盡量完成，若有任何問題也歡迎在 Discord 做詢問喔~

## HTML 語意標籤運用
語意標籤可以增加可讀性，透過閱讀標籤就了解該區塊的意思，幫助搜尋引擎以及瀏覽器的顯示跟搜尋。

### 基本 HTML 標籤介紹
**h1 ~ h6**
一個網頁一定會有一個 h1 標籤，用來標示網頁中最重要的資訊。其餘 h2 ~ h6 依照重要性依序使用。

**img**
圖片使用 img 標籤，圖片位址放在標籤內 src 屬性中。
將 alt 屬性內補上描述，當圖片失效時可以呈現出文字，讓使用者可以了解原本圖片的意義。

**a**
連結使用 a 標籤，網址連結放在標籤內 href 屬性中。
當目前沒有要連至特定網頁時可以設定為 `<a href="#"> ... </a>`

**p**
一個段落、一句話 .. 都可以使用，
讓文字具有語意。

**ul li、ol li**
ul、ol 的子層只能是 li。
條列式項目、清單、選單、產品陳列等等都可以使用 ul li 列表結構，
若是該列表有順序則可以使用 ol li 結構。

### 題目
請複製此 [Codepen](https://codepen.io/hexschool/pen/OJQGKPY?editors=1000) ，修正 HTML 標籤運用。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/hexschool/pen/jOZRgLM -->
<!-- Ray 文章：https://israynotarray.com/html/20230613/61882704/ -->


回報區
--- 
|  #  |      Discord      |                                  CodePen / 答案                                  |
|:---:|:-----------------:|:--------------------------------------------------------------------------------:|
|  1  |       7Lun        |     [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/QwbBLdW?editors=1000)     | 
|  2  |       小趴        |                [Codepen](https://codepen.io/papa2415/pen/ByNPBOa)                | 
|  3  |      jchunnn      |                [Codepen](https://codepen.io/jchunnn/pen/azOjoRq)                 | 
|  4  |      禹成林       |                [Codepen](https://codepen.io/useirin/pen/OPVwJyy)                 | 
|  5  |    Joseph_Kyuu    |          [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/OPVwJXM)          | 
|  6  |      Q幽冥Q       |               [Codepen](https://codepen.io/YouminLiou/pen/YPXjzpm)               | 
|  7  |      pastor       |               [Codepen](https://codepen.io/peter_hung/pen/yyNqLvK)               |
|  8  |       老屠        |   [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/QwbBWRm?editors=1000)   | 
|  9  |       Katie       |       [Codepen](https://codepen.io/Katiekatiehsu/pen/ogXMXgo?editors=1100)       | 
| 10  |    Klaus Chen     |        [Codepen](https://codepen.io/Klaus-Chen/pen/RNPBPwy?editors=1000)         | 
| 11  |      登登登       |                [Codepen](https://codepen.io/Duncanin/pen/jEPKGBW)                | 
| 12  |     那個貓貓      |          [Codepen](https://codepen.io/zorakao/pen/xbGJGWp?editors=1000)          | 
| 13  |      esther       |  [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/zxGLGWd?editors=1000)   | 
| 14  |       Fan        |          [Codepen](https://codepen.io/btsihioy-the-reactor/pen/JodBYRw)          | 
| 15  |        Qoo        |               [Codepen](https://codepen.io/OrangJuic/pen/VYLBvQw)                | 
| 16  |        Hao        |          [Codepen](https://codepen.io/Howell/pen/XJbBmxo?editors=1000)           | 
| 17  |      Sylvie       |              [Codepen](https://codepen.io/shuping-xiao/pen/dPojGZN)              | 
| 18  |       Kiku        |          [Codepen](https://codepen.io/Li-Kusa/pen/ByNPNpE?editors=1000)          |
| 19  |       小懿        |              [Codepen](https://codepen.io/YT-the-vuer/pen/VYLBjpJ)               | 
| 20  |      Leonard      |     [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/OPVwRXO?editors=1000)     | 
| 21  |    Chris Wang     |        [Codepen](https://codepen.io/Wang-Chris/pen/RNPBGzM?editors=1000)         | 
| 22  |       地瓜        |    [Codepen](https://codepen.io/Chippy-YU-Xippyyyyy/pen/pvJZNKb?editors=1000)    | 
| 23  |       Peggy       |          [Codepen](https://codepen.io/Peggy_C/pen/emNjBVg?editors=1000)          | 
| 24  |     柔術小子      |  [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/KwpBaNq?editors=1100)  | 
| 25  |       Star        |                [Codepen](https://codepen.io/Hsin-Wu/pen/yyNqgqK)                 | 
| 26  |     NellyGuo      |   [Codepen](https://codepen.io/iizqdzgh-the-scripter/pen/qEdyrOE?editors=1000)   | 
| 27  |    carrie0416     |              [Codepen](https://codepen.io/Hong-Carrie/pen/ogXMZYx)               | 
| 28  |  社子畢卡索(Lu)   |                [Codepen](https://codepen.io/pen?template=MYwBpbL)                | 
| 29  |        CBK        |           [Codepen](https://codepen.io/BK-C-the-styleful/pen/ogXMZWL)            | 
| 30  |       Mumu        |                 [Codepen](https://codepen.io/ztz_mu/pen/PwqBpjO)                 | 
| 31  |        Zhi        | [Codepen](https://codepen.io/aneeiitk-the-typescripter/pen/RNPBpBL?editors=1000) | 
| 32  |      Lauren       |             [Codepen](https://codepen.io/Huang-Yi-Ping/pen/dPPgWGE)              | 
| 33  |        Wen        |                 [Codepen](https://codepen.io/wenlol/pen/xbGJdyY)                 | 
| 34  |    LouisaFish     |        [Codepen](https://codepen.io/Louisa-Fish/pen/myJjwwy?editors=1000)        | 
| 35  |       力文        |        [Codepen](https://codepen.io/liwenchiou/pen/NPqBYVa?editors=1000)         | 
| 36  |      Jerome       |         [Codepen](https://codepen.io/qsc002163/pen/raVrvaP?editors=1000)         | 
| 37  |       Hugh        |               [Codepen](https://codepen.io/Hugh-Chen/pen/bNdjMYM)                | 
| 38  |      Calvin       |    [Codepen]([連結](https://codepen.io/CalvinChang/pen/ByNPPBy?editors=1000))    | 
| 39  |    Phyllida_17    |              [Codepen](https://codepen.io/Phyllida-Yeh/pen/ZYGjjmR)              | 
| 40  |        PK         |                [Codepen](https://codepen.io/Percy-Ku/pen/gbpjdNz)                | 
| 41  |       冠翔        |       [Codepen]([連結](https://codepen.io/hsrfcdrx-the-bold/pen/OPVwBbr))        | 
| 42  |        EF         |        [Codepen](https://codepen.io/Effie-Huang/pen/VYLBEvr?editors=1000)        | 
| 43  |       西娜        |    [Codepen](https://codepen.io/Sheena-the-encoder/pen/ByNPqeB?editors=1100)     | 
| 44  |     EricChung     |               [Codepen](https://codepen.io/Chung-Eric/pen/PwqBxzw)               | 
| 45  |      suemma       |             [Codepen]([連結](https://codepen.io/suemma/pen/yyNqQvP))             | 
| 46  |     nora_zizi     |          [Codepen](https://codepen.io/Nora-Ch/pen/LEVBXwP?editors=1010)          | 
| 47  |       Jenna       |         [Codepen](https://codepen.io/abiscc14/pen/myJjarR?editors=1000)          | 
| 48  |      JiaMori      |                [Codepen](https://codepen.io/jiamori/pen/qEdyLqE)                 | 
| 49  |       ahga        |           [Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/pvJZYOp)            | 
| 50  |       YUCCC       |          [Codepen](https://codepen.io/taroooo/pen/YPXjMeN?editors=1000)          | 
| 51  |       Celia       |                [Codepen](https://codepen.io/Cindy-Ho/pen/QwbBPeo)                | 
| 52  |       Tetsu       |                [Codepen](https://codepen.io/ttgchang/pen/xbGJNrd)                | 
| 53  |      Evelyn       |       [Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/yyNqWgy)        | 
| 54  |      cbs9007      |          [Codepen](https://codepen.io/wasdjk/pen/QwbBRrW?editors=1000)           | 
| 55  |     PAgaNiNi      |                [Codepen](https://codepen.io/PA-OTTER/pen/azOjgBK)                | 
| 56  |     cks40660      |     [Codepen]([連結](https://codepen.io/CKS40660/pen/KwpxqGv?editors=1000))      | 
| 57  |       Forma       |            [Codepen]([連結](https://codepen.io/2085-XD/pen/zxGJdxy))             | 
| 58  |        zhe        |               [Codepen](https://codepen.io/dotheright/pen/OPVojBz)               | 
| 59  |       Saika       |         [Codepen](https://codepen.io/saika4501/pen/LEVJjaZ?editors=1000)         |
| 60  |        Ken        |         [Codepen](https://codepen.io/softpmdm-the-flexboxer/pen/vEOzpwZ)         | 
| 61  |     Space key     |         [Codepen](https://codepen.io/uuajlwse-the-selector/pen/Eajeozj)          | 
| 62  |        TY         |           [Codepen](https://codepen.io/Ted-Y/pen/ogXPqvy?editors=1000)           | 
| 63  |       Poppy       |           [Codepen](https://codepen.io/Poppy-the-scripter/pen/wBaEQJB)           | 
| 64  |       RUDY        |         [Codepen](https://codepen.io/Rudy-crw/pen/Jodaxbb?editors=1000)          |
| 65  |   Doreen翠翠翠    |      [Codepen](https://codepen.io/cuei-sian-Wang/pen/WbvgWYy?editors=1000)       |
| 66  |       随縁        |        [Codepen](https://codepen.io/anki0072011/pen/gbpBYNZ?editors=1000)        |
| 67  |       Wafa        |          [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ogXaXRE)          |
| 68  |        QoQ        |         [Codepen](https://codepen.io/fabusolq-the-styleful/pen/emNPEGP)          |
| 69  |    Huang Eagle    |                  [Codepen](https://codepen.io/YuCi/pen/ogXaerx)                  |
| 70  |     Clove_墨      |      [Codepen](https://codepen.io/CloveTseng1026/pen/LEVgzwO?editors=1000)       |
| 71  |     Sam.S.T.Y     |   [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/GgJYxqP?editors=1000)   |
| 72  |     Yanchen16     |          [Codepen](https://codepen.io/keyrtlij-the-reactor/pen/jEPeZKo)          |
| 73  |     Hana Chou     |               [Codepen](https://codepen.io/CHOU-HANA/pen/YPXJaRg)                |
| 74  |      Chia__       |            [Codepen](https://codepen.io/Chia-the-encoder/pen/QwbZzzm)            |
| 75  |    kashiwatei     |        [Codepen](https://codepen.io/kashiwatei/pen/LEVXEwV?editors=1010)         |
| 76  |       Satar       |         [Codepen](https://codepen.io/SatarKuo/pen/XJbybWw?editors=1000)          |
| 77  |        Min        |   [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/gbpQMvy?editors=1000)    |
| 78  |       立花        |        [Codepen](https://codepen.io/kj25940858/pen/KwprQRJ?editors=1000)         |
| 79  |        博         |         [Codepen](https://codepen.io/Girl-Lee/pen/Jodexog?editors=1000)          |
| 80  |       Fancy       |           [Codepen](https://codepen.io/Fancy-the-lessful/pen/XJbxbLp)            |
| 81  |      Elvina       |    [Codepen](https://codepen.io/Elvina-the-selector/pen/QwbzLVZ?editors=1000)    |
| 82  |     Geno Chen     |           [Codepen](https://codepen.io/kai-chen-the-sans/pen/zxGyEob)            |
| 83  |   kate_bearchou   |         [Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/MYwZqRQ)          |
| 84  |        孟         |               [Codepen](https://codepen.io/Mengru0503/pen/jEPXejQ) |
| 85  |       Yan*        |           [Codepen](https://codepen.io/Yan-L/pen/dPowBQd?editors=1000) |
| 86  |   主委加碼啦幹    |    [Codepen](https://codepen.io/popbob-the-bashful/pen/WbvLZBa?editors=1000) |
| 87  |     york08283     |               [Codepen](https://codepen.io/York-Chou/pen/azOXdEY) |
| 88  |       Zong        |                 [Codepen](https://codepen.io/BAY71/pen/EajrmyO) |
| 89  |     Michelle      |        [Codepen](https://codepen.io/bastar_dize/pen/jEPdzwd?editors=1000) |
| 90  |        An         |   [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/xbGMjKr?editors=1000) |
| 91  |        yin        |               [Codepen](https://codepen.io/berry-Liu/pen/ZYGwqwV)  |
| 91  | tges0017          |   [Codepen]                                                                      |
| 92  |      飛飛飛       |          [Codepen](https://codepen.io/ttdzmjpn-the-lessful/pen/OPVqVNM) |
| 93  |      Scrooge      |          [Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/YPXgXGm) |
| 94  |    tanuki_狸貓    |         [Codepen](https://codepen.io/tanuki320/pen/myJoeyW?editors=1000) |
| 95  |       Fang        |     [Codepen](https://codepen.io/Fang-the-encoder/pen/RNPdpRB?editors=1000) |
| 96  |      牛奶嘎       |               [Codepen](https://codepen.io/Joyce-Niu/pen/XJbGRKq) |
| 97  |    _ Chris._.     |          [Codepen](https://codepen.io/Chris-Chang-the-sans/pen/xbGBrPw) |
| 98  |       加菲        |          [Codepen](https://codepen.io/DOU-CF/pen/gbpExbd?editors=1000) |
| 99  |      Alyssa       |               [Codepen](https://codepen.io/AlyssaYen/pen/qEdvpVp) |
| 100 |     茶裡狗狗      |           [Codepen](https://codepen.io/bei-bay-the-solid/pen/yyNwpxa) |
| 101 |        Bry        |      [Codepen](https://codepen.io/weichengliao220/pen/ogXVEON?editors=1000) |
| 102 |        vivian        |      [Codepen](https://codepen.io/fkfteton-the-bashful/pen/MYwxVwP) |
| 103 |  World  | [Codepen](https://codepen.io/HexschoolVuePujols/pen/QwboreE) |
| 104 |  teresa  | [Codepen](https://codepen.io/teresa150029/pen/gbpEQmR) |
| 105 |  andy  |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/raVRPdK) |
| 106 |  Leohasfriends  |[Codepen](https://codepen.io/leohasfriends/pen/azOMrya) |
| 107 |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/wBaZvOx?editors=1000)
| 108 |  ella  |[Codepen](https://codepen.io/e_ella/pen/qEdwOVO) |
| 109 |  中年危機  |[Codepen](https://codepen.io/Weiwei2025/pen/XJbQpwJ?editors=1000) |
| 110 |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/ogXOZxw?editors=1010) |
| 111 |  李大維  |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/yyNrgBj?editors=1000) |
| 112 |  Eva  |[Codepen](https://codepen.io/cnbhiapb-the-scripter/pen/XJbQMzj?editors=1010) |
| 113 |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/emNovxg) |
| 114 |  SilviaLin |[Codepen](https://codepen.io/Silvia-Lin/pen/azOxWEj)
| 115 |    EK     |[Codepen](https://codepen.io/A-Kai-the-builder/pen/RNPOVXW)|
| 116 |    俐涵     |[Codepen](https://codepen.io/WLH1999/pen/emNovBp?editors=1010)|
| 117 |ja4071|[Codepen](https://codepen.io/SHAO-L/pen/QwbPxXM)|
| 118 |Chase|[Codepen](https://codepen.io/SHAO-L/pen/NPqoXNK)|
| 119 |Hsun|[Codepen](https://codepen.io/tsxdpjfh-the-animator/pen/pvJmwQO?editors=1000)|
| 120 |Antonio|[Codepen](https://codepen.io/gwhvusel-the-builder/pen/YPXbEqK)|
| 121 |Mini|[Codepen](https://codepen.io/MingYu-Cheng/pen/Wbvqexe?editors=1010)|
| 122 |Va|[Codepen](https://codepen.io/lichenValin/pen/qEdzWdP)|
| 123 |YUN|[Codepen](https://codepen.io/sant220210/pen/yyymGBO?editors=1000)|
| 124 |Ryckie|[Codepen](https://codepen.io/14172/pen/vEOqyLj?editors=1000)|
| 125 |嫩嫩|[CodePen](https://codepen.io/bpfeykkl-the-flexboxer/pen/bNdPYVp?editors=1000)|
| 126 |平平|[CodePen](https://codepen.io/ypinpin/pen/XJbvbbX)|
| 127 |伊迪|[CodePen](https://codepen.io/eku10rei/pen/dPoxgNz?editors=1000)|
| 128 |小瑜|[CodePen](https://codepen.io/dfwjzisf-the-scripter/pen/OPVKQEd)|
| 129 |Bee|[CodePen](https://codepen.io/Bee-Lu/pen/bNVbZOE)|
| 130 | Ching | [Codepen](https://codepen.io/huangching/pen/LEpPKNe) |
| 131 | 阿鍋 | [Codepen](https://codepen.io/YING-TING-KUO/pen/NPGWbmo) |
| 132 | Sam | [Codepen](https://codepen.io/lee-wei-hong/pen/YPyzELJ) |
| 133 | B | [Codepen](https://codepen.io/Babel777/pen/ogjNOLJ) |
| 134 | cindy | [Codepen](https://codepen.io/a50134/pen/XJmJPLP) |
| 135 | 雅潔 | [Codepen](https://codepen.io/MOMOYA/pen/pvjJvBW) |
| 136 | Lika | [Codepen](https://codepen.io/wlyvctff-the-solid/pen/YPyXYjg?editors=1010)|
| 137 | water | [Codepen](https://codepen.io/wateruby/pen/VYvLXGr)|
| 138 | 無名 | [Codepen](https://codepen.io/IngridLee97/pen/ZYbzWdO)|
| 139 | Hsin | [Codepen](https://codepen.io/Anny-Chang/pen/EaVVmxL?editors=1000)|
| 140 | Lucy | [Codepen](https://codepen.io/dvnuqsdl-the-encoder/pen/YPyyVvP?editors=1000)|
| 141 | SAM1206 | [Codepen](https://codepen.io/vivaoranje/pen/WbbWJJz) |
| 142 | Richard | [Codepen](https://codepen.io/dick90012000/pen/zxvrRyJ)|
| 143 | cheryl | [Codepen](https://codepen.io/katrina-the-decoder/pen/myeVxqR?editors=1000)|
| 144 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/jEbrQyB?editors=1000)|
|  145 |       大頭祐祐        |     [Codepen](https://codepen.io/Big_Head_YK/pen/xbwEYXq)     |
146  | Midy Wu| [Codepen](https://codepen.io/work-wu/pen/VYvmWxg)|
|  147 |       maerc        |     [Codepen](https://codepen.io/Lu-Liangyu/pen/zxvNZvj?editors=1000)     |
|  148 |       Tou        |     [Codepen](https://codepen.io/Datou-Huang/pen/azvpMeY?editors=1000) |
|  149 |       ryan_lan        |     [Codepen](https://codepen.io/Ryan-Lan/pen/ByowgxR) |
|  150 |       mark        |     [Codepen](https://codepen.io/markbi/pen/XJmRdwv?editors=1100) |
| 151 | 4ping | [Codepen](https://codepen.io/928Libra/pen/ZYbrWvG)|
| 152 | 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/WbQLzjG?editors=1000)|