HTML – HTML Tags & Semantic HTML 语义化 HTML

前言

HTML tag 有 100 多个, 有些是功能形的, 非用不可, 有些是为了语义化对 screen reader 友好 (给眼睛有残缺的人也可以获取清晰的网站信息).

语义化是很重要的, 有些人写 HTML 满满都是 div, 出来的效果用眼睛看确实没有区别. 但是用 screen reader 读就完了, SEO 也 not friendly.

要记得, 网页设计和平面设计很大的不同是, 网页是需要被机器读的, 不然为什么要搞 HTML 结构 ? canvas 渲染这么快.

但也不是说要做到完美无瑕. 就类似 RWD 那样, mobile friendly, 只是 "friendly" 而已, 不是生死之交.

这篇会对它们进行分类, 巩固记忆. 我不会把 100 多个写到完, 只会写比较常用到或看到的.

资源:

参考:

W3Schools – HTML Element Reference

MDN – HTML elements reference

Stop using so many divs! An intro to semantic HTML

What is semantic HTML5? (must read)

Youtube – HTML 5 Semantics

Youtube – HTML5 Semantic Elements Tutorial

Youtube – ARIA HTML Tutorial

工具:

Chorme 插件 – HTML5 Outliner

Chrome 插件 – Screen Reader

Semantic HTML5 markup inspector

最基本的 HTML 结构 Tag

= head

</p> <p><link></p> <p><style></p> <p><script></p> <p><body></p> <h3>介绍</h3> <p>!DOCTYPE > html > head + body 整体结构</p> <p><meta> 常用来写 description (SEO), og (social media), width=device-width (RWD)</p> <p><base> 是 </p> <p><title> 整个网站的主题 (SEO)</p> <p><link> 加载 CSS style</p> <p><style> inline CSS</p> <p><script> 加载或 inline JS</p> <h2>常见的 HTML Tag</h2> <p><div></p> <p><span></p> <p><button></p> <p><iframe></p> <p><embed></p> <p><template></p> <p><noscript></p> <p><pre>, <code></p> <p><hr></p> <h3>介绍</h3> <p><strong><div>, <span></strong> 是完全没有语义的, <div> 是 block element 的代表, <span> 是 inline element 的代表.</p> <p><iframe> 用来嵌套其它网站</p> <p><embed> 以前用来嵌套 flash, 插件等, 现在几乎废弃了, 改用 <iframe>, <video>, <audio>, <picture>.</p> <p><template> template 不会被渲染, 它是给 JS 调用, 做动态 append 用的.</p> <p><noscript> 是当 browser 不支持 / disabled JS 的时候会显示的.</p> <p><strong><pre>, <code></strong> 用来插入代码. 比如写技术的文章, 通常要 show 一些 code, 就会用到 <pre> 和 <code>. 参考: stackoverflow</p> <p><hr> 是画直线, 通常用在隔离段落, 有点像 Angular Material 的 divider.</p> <h2>Semantic HTML Tag (结构类)</h2> <p><header></p> <p><nav></p> <p><main></p> <p><section></p> <p><acticle></p> <p><aside></p> <p><footer></p> <h3>介绍</h3> <p><header> 除了用在大 body, 也可以用在 section 里面, 通常 header 里面就包 <h1>...<h6></p> <p><nav> 里面通常配搭 ul > li > a</p> <p><main> 一个 page 应该只有一个 main</p> <p><acticle> 是一个独立的内容, 比如 product, post, 可以用 section 作为 product list 然后里面多个 article</p> <p><aside> 可以放到 section, article, body 里, 表示和主题有关的其它内容, 比如 relate posts, products 等等.</p> <h2>Semantic HTML Tag (细节类)</h2> <p><address></p> <p><blockquote></p> <p><q> = quote</p> <p><cite></p> <p><details></p> <p><summary></p> <p><figure></p> <p><figcaption></p> <p><time></p> <h3>介绍</h3> <p><address> 它和 p 用法一样, 只是里面写的 should be 是个地址 (email address 也算地址), 它会自带斜体效果.<strong> </strong></p> <p><strong><blockquote>, <q>, <cite></strong> 用于引用其它网页的某段内容</p> <p>例子：</p> <pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">blockquote </span><span style="color: rgba(255, 0, 0, 1)">cite</span><span style="color: rgba(0, 0, 255, 1)">="http://stackoverflow.com"</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>Type HTML in the textarea above, <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">q</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">and it will magically appear</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">q</span><span style="color: rgba(0, 0, 255, 1)">></span> in the frame below.<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">blockquote</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">cite</span><span style="color: rgba(0, 0, 255, 1)">><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">="http://stackoverflow.com"</span><span style="color: rgba(0, 0, 255, 1)">></span>reference url<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">cite</span><span style="color: rgba(0, 0, 255, 1)">></span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span></pre> <p>效果:</p> <p></p> <p>有点 p > span 的用法, <q> 会加上引号.</p> <p><strong><details>, <summary></strong> 用于隐藏细节, details > summary + p, <summary> 的内容会显示, <p> 的内容会隐藏, 只有通过点击它才会被 expand 显示出来.</p> <p>效果:</p> <p></p> <p><strong><figure>, <figcaption> </strong>figure > img + figcaption 通常这样搭配来用, 针对 1 张图, 视频, 有一个显示标题, 这种结构就可以用 figure.</p> <p><time> 用来表示时间, 日期, 请参考 MDN 具体用法.</p> <h2>Semantic HTML 一般用法</h2> <p>参考: What is semantic HTML5?</p> <p></p> <p>header + main + footer 作为大框</p> <p>nav 通常在 header 和 main 里头</p> <p>article 作为这一页的主内容区</p> <p>article 内又可以在细分多个 section 和 aside (这个 aside 是和主内容有强关联的)</p> <p>aside 如果和这一页没有太多关联, 则排除在主内容 article 之外.</p> <h2>Semantic HTML Tag 常见问题</h2> <h3>1. div container vs section</h3> <p>做排版经常会有 container > row > col 概念, 不管是 Flex 还是 Grid. 是否用 div 还是把 style 写在 section or article ?</p> <p>它的关键是你得分开看到 style 和 element (语义). 如果你想做一些排版 (比如 Figma 的 Frame), 那么你用 div 是 ok 的, 而不是为了要排版然后硬硬用一个 section.</p> <p>但是如果它本来就是一个 section, 你用 section 是想分组, 在语义上做归类, 那么你用 section 加 style 是 ok 的. </p> <p>当然有些人会统一把排版全部用 div 来做. 我个人觉得这也没有什么不好.</p> <p>参考: </p> <p>Stop using so many divs! An intro to semantic HTML section 的部分</p> <p></p> <p>What is semantic HTML5? HTML5 Semantic Tags Structure 的部分</p> <p></p> <h3>2. sidebar vs aside </h3> <p>看这篇, sidebar != aside.</p> <p>sidebar 是一个 design, aside 是一个表达. sidebar 里面可以有 nav + aside (for relate products/news).</p> <h3>3..section vs article</h3> <p>参考: What is semantic HTML5?</p> <p></p> <p>有时候傻傻分不清, 但不需要纠结太多, 它没有 100% 的答案. 语义上讲 section 比较抽象, 它就是一个部分一个部分, </p> <p>article 是文章, 感觉比较是一个整体, 也就是它们说的 self-contained. </p> <h3>4. home page 许多内容是 section 还是 article ?</h3> <p>参考: Learn When to Use Section, Article, Nav & Aside in HTML5 Websites</p> <p></p> <p>因为 home page 大部分是 summary of 其它 page, 所以用 "部分" 来表达我觉得是对的. 用 article 也不是不能接受啦.</p> <h3>5. main 的范围</h3> <p>参考: What is semantic HTML5?</p> <p></p> <p>它的意思是这样: </p> <p></p> <h3>小结</h3> <p>如果怕错就用简单的结构就好了, 要不然就去看看 apple.com, microsoft.com, tesla.com 我一直觉得它们的 HTML 写的挺好的 (SEO friendly)</p> <h2>Text Tag</h2> <p><h1>...<h6> = heading</p> <p><p> = paragraph</p> <p><br></p> <p><a> = anchor</p> <p><b> = bold</p> <p><i> = italic</p> <p><strong></p> <p><del> = delete</p> <p><mark></p> <p><abbr> = abbreviation</p> <h3>介绍</h3> <p><br> 是在 <p> 里面换行 new line</p> <p><a> 是链接</p> <p><b> 是 text bold</p> <p><i> 是 italic 斜体</p> <p><strong> 是 important text </p> <p><del> 删除线 <-- 看到效果吗? </p> <p><mark> <span style="background-color: rgba(255, 255, 0, 1)">高亮<br></span></p> <p><span style="background-color: rgba(255, 255, 0, 1)"><span style="background-color: rgba(255, 255, 255, 1)"><abbr> 表示缩写字, a</span></span>cronym 也是用这个</p> <h2>List Tag</h2> <p><ul> = unordered list</p> <p><li> = list item</p> <p><ol> = ordered list</p> <p><dl> = description list</p> <p><dt> = description term (key)</p> <p><dd> = description (value)</p> <h3>介绍</h3> <p>list 的内容一般上都是 text, 如果是 list of product, 有图片, 信息, add to cart button 这种通常不用 list, 而是用 section 配多个 article.</p> <h2>Table Tag</h2> <p><table></p> <p><thead> = table header</p> <p><th> = table heading</p> <p><tbody> = table body</p> <p><tr> = table row</p> <p><td> = table data</p> <p><tfoot> = table footer</p> <h3>特色</h3> <p><th> 会自带 bold style 粗体</p> <p><thead> 和 <tfoot> 在打印的时候, 会有 sticky 的效果, 每一页会自动重复.</p> <h2>Media Tag</h2> <p><img> = image</p> <p><map></p> <p><area></p> <p><picture></p> <p><svg></p> <p><i> = italic</p> <p><audio></p> <p><video></p> <p><source></p> <p><canvas></p> <h3>介绍</h3> <p><strong><map>, <area></strong> 是放在 <img> 里面的, 让 img 内容某些部分可以被交互 (比如点击), 参考: W3schools – HTML <map> Tag</p> <p><picture> 是 <img> 的加强版本, 可以看这篇: </p> <p><canvas> 是用 JS 画画</p> <p><source> 用在 <picture>, <audio>, <video> 里</p> <p><svg> 通常 for icon</p> <p><i> 其实是 text italic 斜体, 但是 fontawesome 用 <i> 作为 icon, 参考 stackoverflow 大家的讨论. 只能说 i standard for icon 也不是不可以了解啦...</p> <h2>Form Tag</h2> <p><form></p> <p><fieldset></p> <p><label></p> <p><input></p> <p><textarea></p> <p><select></p> <p><optgroup> = option group</p> <p><option></p> <p><progress></p> <h3>介绍</h3> <p><fieldset> 用来在 form 里面对 input 分组</p> <p><progress> 用来显示 uploading 的进度条.</p> <h2>HTML5 不再支持的 Tag</h2> <p>这些可能看过, 但是不需要去理它了.</p> <p><tt> use CSS instead.</p> <p><strike> use <del> or <s> instead.</p> <p><noframes> -</p> <p><frameset> -</p> <p><frame> -</p> <p><font> use CSS instead.</p> <p><dir> use <ul> instead.</p> <p><center> use CSS instead.</p> <p><big> use CSS instead.</p> <p><basefont> use CSS instead.</p> <p><applet> use <embed> or <object> instead.</p> <p><acronym> use <abbr> instead.</p> <h2>我没有提到的 HTML Tag</h2> <p><data>, <datalist>, <dialog>, <em>, <object></p> <p><legend>, <caption>, <colgroup>, <col>, <track></p> <p><small>, <sub>, <sup>, <var>, <bdi>, <bdo>, <dfn>, <ins>, <kbd>, <meter>, <output>, <param>, <rp>, <rt>, <ruby>, <s>, <samp>, <u>, <wbr></p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid14689-0.html' class='tagbtn' target='_blank'>(新)HTML5</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="/skin/bootstrap.bundle.js"></script> </body> </html>