• Hi!

    In HTML5 each <nav> must have header, e.g. h1. Fortunately custom menu allowes one to define header but there is no info how to show it?

    `<nav id="navigation-secondary" role="navigation">
    <h1><?php // How to print "secondary" menu header here? ?></h1>
    <?php wp_nav_menu(array('theme_location' => "secondary")); ?>
    </nav>`

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Sorry, but that is completely wrong. In HTML5 <nav> doesn’t require headers. In fact, that is semantically incorrect. <nav> is used for one thing, header tags for others. Your source is incorrect.

    https://www.w3schools.com/html5/tag_nav.asp

    Thread Starter ciantic

    (@ciantic)

    Harrison O, it does require it

    Chrome HTML5Outliner throws me “untitled nav”, and here is a link for HTML5 SPEC with headers.

    Also it makes sense for accessibility to have a name for each navigation “Main menu”, “Subpages menu” etc.

    Though I found a way:


    <nav id="navigation-secondary" role="navigation">
    <?php
    $locations = get_nav_menu_locations();
    $menu = wp_get_nav_menu_object($locations['secondary']);
    ?>
    <h1 class="assistive-text"><?php echo esc_html($menu->name); ?></h1>
    <?php wp_nav_menu(array('theme_location' => "secondary")); ?>
    </nav>

    Thread Starter ciantic

    (@ciantic)

    Apologies the spec does not require header, but it makes sense if one has several <nav> elements in the page (like I happen to have).

    Sorry, but please point me to where in that document you read that.
    I checked that whole document and also the explanation of the <nav> tag https://www.w3.org/TR/2012/WD-html5-20120329/the-nav-element.html#the-nav-element and I can’t find anything related.
    I am interested to learn about that because it conflicts with their own idea behind HTML5 semantics and also SEO which you should not use more than one <H1> per page.
    It’s not that I’m doubting you, but I am unclear of this rule which breaks other purposes.

    I see you posted before me while I was reading and writing. Anyway, if yo want to add the header tags, use the <h4> so you don’t damage the page’s SEO. It’s usually recommended in SEO to use only one <H1> per page.

    Thread Starter ciantic

    (@ciantic)

    Harrison O., oh you don’t know HTML5 outlines? See Mozilla examples about it. In HTML5 h1 can be anywhere. E.g. article, section, nav… Try HTML5Outliner. SEO can handle HTML5 outlines.

    Indeed it makes more sense to have H1 in a parts of content that is not related. (For instance if you write an article, you cannot know if it’s embeded in list, so article writer can always use H1)

    Thread Starter ciantic

    (@ciantic)

    Web HTML5Outliner, and for web devs Chrome HTML5outiner Plugin, really awesome.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to print / get Custom Menu header?’ is closed to new replies.