- HTML5 Multimedia Development Cookbook
- Dale Cruse Lee Jordan
- 355字
- 2021-04-02 19:27:37
Applying the outline algorithm
Luckily for us, HTML5 now has a method of assembling an outline of our pages in browsers, so search engines as well as accessibility technologies can make better sense of them. We're going to make use of the HTML5 Outliner at: http://gsnedders.html5.org/outliner
Getting ready
To use the HTML5 Outliner, we can use HTML stored on our local computer or code visible via a URL. Make sure to save the code we've been creating locally or upload it to a publicly accessible web server for this step.
How to do it...
Let's make sure to save this document either on a local hard drive or remote server. We'll visit http://gsnedders.html5.org/outliner to create our outline.
Using our previous code example, we can generate the following code outline:
- Roxane is my name.
- Untitled Section
- About
- Work
- Contact
- What I'm Reading
- Elsewhere
- All rights reserved. Copyright Roxane.
How it works...
"It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk." - WHATWG
There's more...
It's assumed that content following any heading is related to that heading. Therefore we can use many of the new HTML5 tags like <section> to explicitly demonstrate the beginning and ending of related content.
Are you sure?
If the HTML5 Outliner tool displays messages like "Untitled Section" you should rethink how you're using each of your tags and ensure your approach matches the intent of the specification.
An exception
"Untitled Section" messages should be treated as warnings instead of errors. While <section> and other new HTML5 tags require a heading tag, it's perfectly valid not to have one for <nav> areas.
See also
The http://html5doctor.com site is a terrific interactive reference written by seven thought leaders including Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.
- Vue.js框架與Web前端開發從入門到精通
- Moodle 2 for Teaching 4/9 Year Olds Beginner's Guide
- 中文版CorelDRAW X7基礎培訓教程（移動學習版）
- Solid Works 2021產品設計標準教程
- CorelDRAW服裝設計實用教程（第四版）
- COSPLAY的后期藝術：Lightroom+Photoshop修圖技法攻略
- PHP應用開發與實踐
- 深入理解OpenCV：實用計算機視覺項目解析（原書第3版）
- MATLAB 2022a從入門到精通
- 中文版Photoshop CC2018從入門到精通（第4版）
- 碼上學會：中文版Creo 3.0機械設計全能一本通（雙色版）
- PostgreSQL 9.0 High Performance
- Photoshop CC 2019 平面設計實例教程
- 剪映短視頻剪輯從入門到精通：宣傳短片+電商視頻+產品廣告+活動慶典
- 構筑敏捷的開發團隊：微軟Visual Studio 2010實戰兵法