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?

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

JavaScript function failing to validate password

While engaging in an online game where the objective is to uncover a password by inspecting the page source or element, I encountered a puzzling line: if(el.value == ""+CodeCode+""). My assumption is that el.value represents my guess, and it indicates that ...

Using jQuery's sortable functionality to rearrange rows in a table can cause conflicts with Angular's orderBy feature

In the past, my angular app used a table with orderBy to sort rows based on a specific column. By clicking on a table header, the orderBy arguments would change and the list would be sorted according to the values in that column. Now, I am experimenting w ...

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

CSS <td class="cell"> <a class="opener" id="opener_'.$iterator.'" href="#" rel="#type_dialog_<?= $iterator; ?>">Click here</a> <div id="type_dialog_<?= $iterator; ?>" name="t ...

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...

Issue with background image resizing when touched on mobile Chrome due to background-size property set to cover

My current challenge involves setting a background image for a mobile page using a new image specifically designed for mobile devices. The image is set with the property background-size: cover, and it works perfectly on all platforms except for mobile Chro ...

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

Can two div elements be positioned next to each other without relying on CSS float?

Every time I try to use CSS float to align two elements next to each other on a webpage, IE and Firefox always throw unexpected surprises my way. Is there an alternative method to position two divs side by side on a website without relying on CSS float? ...

The dimensions of a Tumblr video

Hi there! I have a question regarding my tumblr theme. The space allocated for video posts on the home page is perfect, but when I click on the permalink, it becomes too small. I don't want to change the size of the video on the home page, so is there ...

Is there a way to customize the hamburger icon for the navigation bar in Bootstrap 4?

Struggling to update the icon in the Navbar for bootstrap 4. Here's my current HTML: <nav class="navbar fixed-top navbar-expand-md navbar-custom"> <a class="navbar-brand" href="#"> <img src="images/logo.svg" width="60px" style="m ...

Unable to resize images in Firefox

Why is it that resizing doesn't seem to work in Firefox but functions fine in Internet Explorer? I'm struggling to find a way to make it consistent across all browsers. My goal is to resize the width to 800 and height to 475, disable maximizing t ...

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

Struggling to align my overlay accurately by combining absolute and relative positioning

I'm currently tackling a frontend mentor project, and I've hit a roadblock trying to get my image overlay to position itself over the image rather than below it. I've set the parent position to relative and the overlay to absolute, but so fa ...

Dynamic user group system that leverages Ajax technology for seamless integration with an HTML interface, powered by PHP and

I am new to this, so please forgive my lack of knowledge. Currently, I am in the process of creating an Ajax-driven web application for managing user contact groups. This application allows users to store contacts based on assigned groups. Once a user con ...

What is the way to determine the length of a list in a velocity template?

Is there a way to determine the size of a list in a velocity template? I am currently working with version 1.4 of Velocity. List<String> list = new ArrayList<String>(); ...

Manipulate PHP/SQL Form: Add, Remove, or Modify items

I have utilized the following code for managing a football fixtures and results administration website. The issue I am encountering pertains to the delete syntax (I suspect that there may be an error related to [ID]). Apart from that, everything else seems ...

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

My Goal: I am working on a HTML/PHP page that displays the home page of my website. One section on this page is dedicated to highscores, with data retrieved from a database. Users can use a Select box to choose how the highscores are sorted. View the high ...

Unable to execute specific php function using ajax

I have created a script that utilizes an ajax request. This script is triggered when a user clicks a button on the index.php page, like so: Risorse.php <form method='post'> Name <input type='text' name='nome&apo ...

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

Ways to show a corresponding number beneath every image that is generated dynamically

I have a requirement to show a specific image multiple times based on user input. I have achieved this functionality successfully. However, I now need to display a number below each image. For example, if the user enters '4', there should be 4 im ...