阿嬷都看得懂的文字标签与语意化标签

昨天我们开始写第一支 .html 程序了，不过网页看起来还是太朴素。今天就让我们介绍更多文字标签，让我们的网页看起来更华丽一些吧！

让我们再介绍几个文字经常使用的标签。在呈现文字的时候，除了段落之外，我们应该很常想到标题 (headline) 吧！但是标题有很多种啊，什麽标题一标题二，每个标题的大小都不太一样，那该怎麽办呢？没关系，我们标题标签是有编号的，所以我们标题标签其实是一组，从

• h1, h2, ... , h6 都有喔！长相分别会是像这样：

这是标题一

这是标题二

这是标题三

这是标题四

这是标题五

这是标题六

• 斜体字 (italic)，就是 i 罗！看起来会像这样： Hello, 我是斜体字。 不过，我们还有另个标签，也让文字变成斜体：
• 强调 (emphasized)，标签是 em。奇怪，明明都是画出同个样式，为什麽要搞 2 个标签？这样不是又要记超多东西吗？

你是对的，但是让我们反过来想想，是「斜体字」让我们知道为什麽要把这段文字改变样式，还是「强调」呢？当然是「强调」对吗？各位阿嬷的记忆力都不算太好，有没有可能之後你看见「斜体字」标签，却完全想不起来自己到底在做什麽？没错，em 标签就是提醒我们，这是当初想要强调这段文字。

这种让标签不再只是改变样式，还告诉我们这个标签在干嘛的作法，叫作「语意化标签」(semantic tag)。这样的作法，不只方便我们阅读，也方便搜寻引擎阅读，所以也会让我们的网页出现在搜寻结果中比较前面的位置。

咦，你说为什麽重要？当然是因为网页工程师都很闷骚这样可以提高网页的曝光率啊！这种让网页出现在搜寻结果中比较前面的位置的策略，就是传说中的搜寻引擎优化 (SEO) 罗！这也是网页工程师的管区，会让我们更受业主青睐喔～

接下来，让我们再介绍 4 组会帮我们加上样式的文字标签：

• 粗体字 (bold)，标签是 b。没错，它和之前的 strong 样式相同，但是当然是 strong 才是语意化标签罗，所以我们多用 strong 来取代 b 吧！
• 横杠线 (strikethrough) 和删除 (deleted)，标签分别是 s 和 del，会把包含的文字作出用横杠删除的样子；当然，後者是语意化标签。
• 画底线 (underlined)，标签是 u。底线标签包含的文字，会画上底线；由於这个标签没有语意化的版本，所以强烈建议不要使用，而改采之後使用 CSS 样式的方式来呈现。
• 标注 (marked)，标签是 mark。标注标签包含的文字，预设是加上黄色底色。

今天我们介绍了常见的文字标签，还有语意化标签这个重要的概念。不过，想要让网页排版变得更美，我们还必须使用之前提到的 div 标签，帮我们把这些文字内容打包起来。因此，明天就让我们看看 div 标签怎麽使用，以及开始帮标签穿上 CSS 样式吧！