[外掛] Chrome 擴充:HTML5 Outliner 抓取網站標題節元素生成大綱結構
HTML5 Outliner 為一款免費 Chrome 擴充外掛工具套件。使用時它會依據 HTML 5 的「
<article>
、 <section>
、 <aside>
、 <nav>
. . .」幾個大綱標籤及「<h1>
~ <h6>
」標籤,為目前瀏覽的網頁生成樹狀結構,方便設計人員調試網站整體的 HTML 5 語意標籤架構。Chrome 安裝完 HTML5 Outliner 擴充後,在瀏覽器的工具列可以看到 HTML5 Outliner 圖示。預設擴充的圖示為綠色及數個條目加上一個 5,點擊它即可觀察目前瀏覽網頁的 HTML 5 語意標籤結構。
擴充資訊
擴充名稱:HTML5 Outliner擴充性質:Chrome 免費
功能特性:生成一個大綱導航的頁面,標題和節元素樹狀結構導覽。這種擴充是使用 HTML5 的大綱演算法來創建一個目錄。
需要權限:
讀取及變更您造訪過的網站上的所有資料。
操作介紹
使用時,點取工具列的「HTML5 Outliner」圖示,即可生成當前網頁的 HTML5 樹狀結構條目。按下條目中的超連結,可以快速的將畫面拉取至連結的位置,觀察並調整 HTML 5 語意標籤。
外掛下方的 Report bugs 與 outliner source code,則是擴充作者更新的相關資料,可點擊觀察擴充的更新情形。
小結
在使用 HTML5 Outliner 時,可以搭配「結構化資料測試工具」一起調試。另外,如果是在 Blogger 架設網站,由於「<section>
」標籤已經被「版面配置」中的小工具底座「b:section」所佔用;實測時,發現 Blogger 若要設置「<section>
」標籤,HTML 範本會無法儲存,這部份要稍做留意。相關文章
[外掛] Chrome 擴充:META SEO inspector 網站 META SEO 分析工具[外掛] Chrome 擴充:Open SEO Stats 網站 SEO 工具
留言
張貼留言