HTML and CSS Reference
In-Depth Information
Listing 5.1. index.html—Application HTML structure
Step 2: Write HTML code for the navigation bar
This code comprises a
<nav>
element with three list items, one for each view in the ap-
plication: Task List, Add Task, and Settings. Add the navigation bar's HTML code in the
next listing within the
<body>
of your HTML document.
Listing 5.2. index.html—Adding a navigation bar
Step 3: Create views with <section> elements
The final part of the HTML page uses
<section>
elements to define the application's
three views. The first view, Task List, contains a search form and a results list, which will
be generated by a JavaScript function. The next view, Add Task, contains a form that al-
lows the user to create a new task and due date. The last view, Settings, contains a form
to set the name and color scheme preference for the application. A class attribute bound to
