HTML 缩排与注解

在撰写 HTML 的时候，常常会需要使用“缩排”和“注解”，缩排可以让 HTML 里的不同段落和不同元素更为清楚，注解可以替 HTML 加上说明，这篇教学将会介绍 HTML 里缩排与注解的用法。

所有范例可使用 JS Bin、CodePen 或 JSFiddle 进行线上实作，或使用笔记本编辑，不用安装任何软件 ( 参考：使用 HTML 编辑器 )

缩排

有些程序语言 ( 例如 JavaScript ) 是使用大括号让程序“位于不同的区块，执行各自的程序”，有些语言 ( 例如 Python ) 是使用“缩排”来实现这项功能，然而 HTML 是属于采用“标签”区分不同区块的“标记语言”，就算没有缩排，只要在相同的标签里，就会属于同样的区块或同一个元素。

在撰写 HTML 时，通常会建议使用 2 个空白当作缩排，缩排的好处会让整个编辑版面更加清楚明了，况且现在程序编辑器都有针对缩排做默认的处理，只要按下 Enter 换行，通常就会进行自动缩排。

举例来说，虽然下方的两组 HTML 所呈现的内容一模一样，有缩排的 HTML 就可以很容易得去理解内容架构。

没缩排：

<table><tr><th>title</th><td>hello</td></tr><tr><th>title</th><td>hello</td></tr></table>

有缩排：

<table>
  <tr>
    <th>title</th>
    <td>hello</td>
  </tr>
  <tr>
    <th>title</th>
    <td>hello</td>
  </tr>
</table>

注解

注解是在 HTML 中“不会被显示和执行的内容”，只要是包覆在 <!-- 和 --> 里的内容，都属于注解，注解的功能主要用来辅助说明，或在某些特定情况下，可以透过 JavaScript 来读取注解的内容。

以下方的程序码为例，网页打开后，只有 h1 标签的内容会显示，其他 h2 和 ul 标签的内容都属于注解，不会显示。

<h1>hello world</h1>
<!-- <h2>I am oxxo</h2> -->
<!--
<ul>
  <li>apple</li>
  <li>ball</li>
</ul>
-->

意见反馈