1. 让代码更加可读:一是要让阅读者更方便阅读,二是让机器容易阅读。对比下面的两种方法。

     <div id="header"></div>
     <div id="sidebar"></div>
     <div id="main-content"></div>
     <div id="footer"></div>
    
     <header></header>
     <aside></aside>
     <section></section>
     <footer></footer>
    
  2. 更多的是用标记 (section,header…),在需要的时候使用 div。
  3. 让老的 IE 支持一些无法解析的标签样式,可以使用 html5shim
  4. 为浏览器提供 HTML 内容的信息 (mircodata):在标签中对内容的属性进行说明。查看 schema.org
  5. 区分标签的方法:在结尾处加入注释。

     <div class="main">
     </div><!-- end of main -->
    
  6. 用 meta 标签来描述网页内容的信息。
  7. 显示版权标志 &copy;
  8. 可编辑的内容。让显示的 HTML 内容可以编辑。

     <p contenteditable="true">this paragraph can be edited.</p>
    
  9. 检查邮件的有效性。使用这种方法并不能保证浏览器都持支。

     <form>
         <label for="email">Email Address</label>
         <input name="email" id="email" type="email">
         <button type="submit">Submit</button>
     </form>
    
  10. Required Form Fields,即必须输入此栏。

    <input name="email" id="email" type="email" required>
    
  11. Validating Patterns,对输入作检查,输入指定格式的内容。用正则表达式来指定格式。查看 html5pattern.com

    <!-- +99(99)9999-9999 -->
    <input name="phone" id="phone" type="text" required pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="please enter a valid email">
    
  12. 社交分享信息提供,有的分享工具可以直接从网页中提取信息,但也可以自己提供。下面是一个示例。

    <meta property="og:title" content="This is a title of article">
    <meta property="og:type" content="blog">
    <meta property="og:image" content=".../pic.jpg">
    <meta property="og:url" content="http://...">
    <meta property="og:description" content="descript here">