Building the User Interface by Using HTML5: Organization ... - server
Building the User Interface by Using HTML5: Organization ... - server
Building the User Interface by Using HTML5: Organization ... - server
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Building</strong> <strong>the</strong> <strong>User</strong> <strong>Interface</strong> <strong>by</strong> <strong>Using</strong> <strong>HTML5</strong>: <strong>Organization</strong>, Input, and Validation | 59<br />
Figure 3-4<br />
An HTML document with a<br />
header, footer, and section<br />
This markup would display in a Web page as shown in Figure 3-4.<br />
Header<br />
LICENSED PRODUCT NOT FOR RESALE<br />
Sections<br />
Footer<br />
Figure 3-5<br />
Simple links using <strong>the</strong> nav<br />
element<br />
2. Save <strong>the</strong> file as L3-MyPage.html.<br />
3. Validate <strong>the</strong> document using <strong>the</strong> W3C Markup Validation Service at http://validator.<br />
w3.org. If you need help doing so, refer to Lesson 2.<br />
4. Leave <strong>the</strong> editing tool and Web browser open if you continue to <strong>the</strong> next exercise<br />
during this session.<br />
THE NAV ELEMENT<br />
The nav element defines a block of navigation links. The nav element is useful for creating<br />
a set of navigation links as your document’s primary navigation, a table of contents, breadcrumbs<br />
in a footer, or Previous-Home-Next links.<br />
The W3C mentions that you don’t have to use tags for all navigation links, just major<br />
blocks of links. Because tags are interpreted <strong>by</strong> screen reader software for <strong>the</strong> visually<br />
challenged, <strong>the</strong> software can determine if it should make <strong>the</strong> navigation links available to <strong>the</strong><br />
user immediately or not, depending on <strong>the</strong>ir importance.<br />
The following example shows <strong>the</strong> tag in use:<br />
<br />
Hip-Hop<br />
Modern<br />
Swing<br />
Tap<br />
<br />
The links would display in a Web page as shown in Figure 3-5.
Change language