# Angular 2 開發心得分享 (01)：使用 HTML 自訂元素的注意事項
使用 Angular 2 開發網站跟以前 Angular 1 最不一樣的地方在於「網頁元件化」的觀念，網頁中所有看到的東西都將變成一個個的 directive 元件，當你將現有網頁 HTML 版型變成 Angular 2 的 Directive 元件後，Angular 2 執行時會把這些 HTML 片段編譯過，並且找出這些 HTML 片段中是否含有其他的 Directive 元件，如果有找到，就會初始化這個 Directive 元件。不過當你的 HTML 版型中有用到「自訂的 HTML 元素」或「寫錯的 HTML 元素」，執行時期就會立刻發生錯誤，這問題發生的原因與解決方法，將是本文討論的重點。
Angular 2 在編譯與剖析 HTML 片段時，必須認真看待每一個 HTML 元素 (HTML Element)，只要是 [HTML5 規格](https://www.w3.org/TR/html5/)中定義的 HTML 元素，就會被視為 HTML 範本的一部分，而那些不是 HTML5 規格定義的元素，預設就會被視為一個 Directive 元件，並對此進一步解析成元件。
這裡我們直接透過 [Angular CLI](https://cli.angular.io/) 快速建立一個 Angular 2 專案，並用 [Visual Studio Code](https://code.visualstudio.com/) 開啟該專案：
> ng new demo0920
>
> cd demo0920
>
> code .
>
> ng serve
我們直接修改 AppComponent 的 Template 頁面 ( src/app/app.component.html ) 並加上一個 **[hgroup](http://html5doctor.com/the-hgroup-element/)** 元素，如下圖示：
接著我們來看看網頁執行的情況，你會發現我們加上 **** 元素後，網頁就跑不出來了！
我們按下 F12 開發者工具，切換到 Console 頁籤，此時你會看到完整的錯誤訊息：
我來摘要一下重要的錯誤訊息片段如下：
> zone.js:344Unhandled Promise rejection: Template parse errors:
> 'hgroup' is not a known element:
> 1\. If 'hgroup' is an Angular component, then verify that it is part of this module.
> 2\. If 'hgroup' is a Web Component then add "CUSTOM\_ELEMENTS\_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
上次錯誤訊息寫得非常清楚，他說：「**'hgroup' 並不是一個已知的元素**」！
> **※ 補充說明 ※**
>
> 早期在 HTML5 規格尚未發佈正式版的時候，當時是有 hgroup 元素的，但 HTML5 工作小組在 2013/4/2 的一次[會議結論](http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html)中決定從規格中移除 hgroup 元素，因此請大家不要再用這個 hgroup 元素。
由此可知，Angular 2 在解析網頁版型時，任何自訂的 HTML 標籤，預設都必須為合法的 Directive 元件才行，以我們這個例子來說，最簡單的作法當然就是不要用 hgroup 元素，你可以改寫成