Elements of <nav> within a <footer> section

I've recently started using HTML5 display elements like header, footer, and nav. While reading about the nav element in particular, I found this interesting information in the HTML5 spec:

The nav element is primarily intended for major navigation blocks on a page. However, not all groups of links need to be within a nav element. For example, footers often have a short list of links such as terms of service, home page, and copyright page. In these cases, the footer element alone is sufficient and using a nav element is usually unnecessary.

Why can't we use nav elements in a footer? Many websites actually have substantial navigation menus in their footers, like StackOverflow with a bigger nav menu in its footer than in its header!

If I choose to include a nav element in a footer, will my site fail HTML5 validation? Or is it just a recommendation from W3C?

html css

Answer №1

Take another look at the text, it clearly states that while it's not prohibited, it is strongly advised against.

One possible explanation for this recommendation is that these additional elements were implemented to enhance the semantic structure of the content, potentially boosting the visibility and relevance of the primary navigation element (possibly for SEO purposes).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to interact with an element in Python Selenium once it has been located?

I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...

python html css python-3.x selenium

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

html css angularjs angular-material

Dynamically switch between doubling Ajax calls in JavaScript

Encountering an issue with a jQuery click function. Triggering the click event on an HTML button dynamically loads styled checkbox and toggle switches based on their stored on/off state in a database. An additional click function is added to each loaded t ...

javascript jquery html ajax

Click on the form to initiate when the action is set to "javascript:void(0)"

I am working on an HTML step form that needs to be submitted after passing validation and ensuring all fields are filled. The form currently has an action controller called register.php, but also includes action="javascript:void(0);" in the HTML form. What ...

javascript html forms

Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Here is a sketch of what I am aiming for: https://i.sstatic.net/SFHSpm.png This is my implementation using Material UI's Accordion component. https://i.sstatic.net/JyhCym.png Below is the code snippet for the AccordionDetails section, which is whe ...

css reactjs material-ui

It's impossible to center text in Bootstrap 5

Creating a website for my school project has been challenging, especially when it comes to centering text. I have been struggling to position the text in the middle of the background picture despite trying various methods. Here is the HTML code: pastebin ...

html css bootstrap-5

Can microdata be applied to an element that embodies a pair of data points?

Can itemprop="name" and itemprop="contentURL" be included in the same element? For example: echo '<li itemscope itemtype="http://schema.org/AudioObject">'; echo ' <a itemprop="name" itemprop="contentURL" href="http://wav ...

html search-engine microdata

Enhancing Image Quality in Microsoft Edge

I'm trying to figure out how to make an image scale with bicubic in MS Edge. Is there a CSS solution or something similar that can change this behavior? Check out this page: On the right side of the page, there are two images with textured backgroun ...

css microsoft-edge

"Creating a user-friendly interface design with two separate divs, each showcasing a

I am looking to create a UI/UX design that includes a logo and two menus, one for language change and one for navigation. My current approach involves two div elements: 1. The first div contains the image and language menu ul. 2. The second div contains ...

html css

Learn the Method Used by Digg to Eliminate "&x=0&y=0" from their Search Results URL

Instead of using a regular submit button, I have implemented an image as the submit button for my search form: <input id="search" type="image" alt="Search" src="/images/searchButton.png" name="" /> However, I encountered an issue in Chrome and Fire ...

javascript html forms digg

How to dynamically set Bootstrap navbar item as active based on current filename?

Currently, as I construct my website using the bootstrap framework, I am facing a minor challenge. I want to activate a menu item based on the filename by utilizing an if statement. For instance, when the filename is "about," the "about" tab should be act ...

javascript html

Attempting to design a form that will trigger a print dialog box displaying all the information entered in the form

I am currently working on developing a form that will allow users to input information such as Name, Age, Gender, Hobbies, Contact details, and Photo in order to create a resume. My goal is to build a simple local HTML-based application that generates a RE ...

javascript php html forms bootstrap-4

Alternate the color over time using CSS

Is there a way to dynamically change the color of a div from black to white every two seconds, and then from white to black, continuously toggling as long as the div is visible? Essentially, I want the div to only be displayed when a user clicks and drag ...

javascript jquery html css colors

Is there a reason why using margin:auto doesn't work for vertically centering items?

I'm having trouble understanding how margin auto functions. In the scenario I'm dealing with, I have a parent div and a child div nested within it, both with specified widths and heights. I attempted to use margin auto in order to center the inne ...

html css margin

Developing an HTML table for room reservations using PHP - a comprehensive booking system

I'm currently working on creating an HTML table for a room booking system, but I've run into a problem trying to figure out how to insert data into cells. Right now, I'm retrieving data from a database (start time and end time for the bookin ...

php html laravel

Can you provide tips on leveraging CSS as a prop for a Vuetify v-tab component?

Currently, I am in the process of updating my website to simplify color palette swapping. We are still experimenting with different colors that work well together. Our stack includes Vue and Vuetify, with SCSS generating our primary CSS file. Most of our c ...

css vue.js sass vuetify.js

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

css mobile

ScrollReveal.js won't function as intended

https://i.stack.imgur.com/SOQEk.png Looking to utilize the popular ScrollReveal.js created by Julian Lloyd (ScrollReveal) Despite following instructions from various sources, the script is not producing the intended effect. Steps taken to make it work: ...

javascript css

PrimeNG - Sticky header feature malfunctioning in the p-table

Hello there, I am currently using PrimeNG p-table which features both horizontal and vertical scrolling. My goal is to implement a sticky header for the table, so far I have attempted two methods: [scrollable]="true" scrollHeight="350px" ...

html css angular primeng

Information extracted from the database without considering any line breaks

When data is stored in my MySQL database, the line breaks of the text input are preserved. However, when retrieving the data, the line breaks disappear and everything is displayed as one continuous string without any <br> tags. Any insights into why ...

php mysql html

CSSer Q&A