How deeply does Web Design Playground, Second Edition cover navigation?

Defines the HTML structure and demonstrates Flexbox, current-page, and hover styling without exploring advanced navigation behavior.

Navigation

As explained in Web Design Playground, Second Edition

A navigation section is a page section containing controls or links for moving among pages or sections of a site.

A navigation section uses the HTML5 nav element to group an unordered list of links to other gallery pages. It is the page’s friendly signpost: click a link, and off you go. section 15.6

A gallery navigation can include:

A nav element containing a ul list. section 15.6
List items containing links to Gallery 1, Gallery 2, Gallery 3, and Gallery 4. section 15.6
Flexbox styling that centers the navigation and lays its links across the page. section 15.6
A current-page span that highlights the page being viewed, plus hover styling for links. section 15.6

Gallery navigation

<nav>\n <ul>\n <li><a href="gallery1.html">Gallery 1</a></li>\n <li><a href="gallery2.html">Gallery 2</a></li>\n <li><a href="gallery3.html">Gallery 3</a></li>\n <li><a href="gallery4.html">Gallery 4</a></li>\n </ul>\n</nav> section 15.6

<nav>
    <ul>
        <li><a href="gallery1.html">Gallery 1</a></li>
        <li><a href="gallery2.html">Gallery 2</a></li>
        <li><a href="gallery3.html">Gallery 3</a></li>
        <li><a href="gallery4.html">Gallery 4</a></li>
    </ul>
</nav>

Browse the complete navigation markup, including its list and four gallery-page links. section 15.6

How Web Design Playground, Second Edition covers it

Cover of Web Design Playground, Second Edition

liveBook manning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

WordPress Power Toolkit: Harness AI to build next-level websitesA WordPress interface element, widget, or block that presents links to site pages and other destinations.
liveBook manning.com

Build a Website with ChatGPTA navigation bar is a page component that provides links or controls for moving among pages or sections of a website.
liveBook manning.com

CSS in Depth, Second EditionA navigation menu is an interface component containing links for moving among sections or destinations.

Compare how 4 books explain navigation →

Related concepts

nav elementimplemented by · The HTML nav element represents a section of a document containing navigation links or other navigation-related content.
hypertext linkhas part · A hypertext link is a reference embedded in digital content that enables navigation to another resource or location.
flyout navigationincludes · Flyout navigation is a user-interface navigation pattern in which a side menu reveals selectable pages that occupy the main display area.
home pageused by · A home page is a website’s primary or default introductory page and an entry point to its main content or sections.
tabincludes · A selectable user-interface item that identifies and switches to a page or a related content view.
browserused by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.