HTML5 Body 元素错误

Question

当我运行此页面的 W3C 验证程序时：http://getinjuryanswers.com/practice-areas/dog-bites/，大纲视图告诉我：

Body 没有标题的元素，
没有标题的导航元素，并且
没有标题的部分元素

我无法为这些区域添加 H 标签。有没有办法更改 Genesis/Wordpress 中的 HTML5 以便这 3 个区域不会注册为大纲的一部分？

谢谢。

W3C：https://validator.w3.org/nu/?doc=http%3A%2F%2Fgetinjuryanswers.com%2Fpractice-areas%2Fdog-bites%2F&showoutline=yes

抱歉所有代码，但下面是 BODY 代码、导航代码和第一篇文章。

<body class="page page-id-31 page-child parent-pageid-25 page-template page-template-practice-areas-template page-template-practice-areas-template-php header-image header-full-width content-sidebar" itemscope="itemscope" itemtype="http://schema.org/WebPage"><div class="site-container"><header class="site-header navbar navbar-fixed-top" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader" id="header"><div class="container"><div class="title-area navbar-brand"><p class="site-title" itemprop="headline"><a href="http://getinjuryanswers.com/" title="San Diego Personal Injury Attorney"><img src="http://getinjuryanswers.com/wp-content/themes/start/images/logo.png" alt="San Diego Personal Injury Attorney" title="San Diego Personal Injury Attorney"></a></p></div><div class="mobile_menu navbar-default" role="navigation"><button type="button" class="navbar-toggle toggled" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><i></i></button></div><nav class="nav-secondary navbar-collapse pull-right in" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><p class="tel hidden-xs hidden-sm"><a href="tel:6195257007">(619) 525-7007</a></p><ul id="menu-home-menu-2" class="menu genesis-nav-menu menu-secondary nav navbar-nav pull-right"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39"><a href="/">Home</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-40"><a href="http://getinjuryanswers.com/about-us/">About us</a><ul class="sub-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://getinjuryanswers.com/about-us/curtis-quay/">Curtis Quay</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://getinjuryanswers.com/about-us/vikas-bajaj/">Vikas Bajaj</a></li></ul></li><li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-45"><a href="http://getinjuryanswers.com/practice-areas/">Practice Areas</a><ul class="sub-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://getinjuryanswers.com/practice-areas/boating-accidents-attorneys/">Boating Accidents</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://getinjuryanswers.com/practice-areas/car-accidents/">Car Accidents</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="http://getinjuryanswers.com/practice-areas/child-injuries-attorneys/">Child Injuries</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://getinjuryanswers.com/practice-areas/construction-accidents-attorneys/">Construction Accidents</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-31 current_page_item menu-item-50"><a href="http://getinjuryanswers.com/practice-areas/dog-bites/">Dog Bites</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://getinjuryanswers.com/practice-areas/elder-abuse-attorneys/">Elder Abuse</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://getinjuryanswers.com/practice-areas/san-diego-motorcycle-accident-attorney/">Motorcycle Accidents</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://getinjuryanswers.com/practice-areas/san-diego-pedestrian-accident-lawyer/">Pedestrian Accidents</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://getinjuryanswers.com/practice-areas/slip-and-fall-attorney/">Slip and Fall Accidents</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://getinjuryanswers.com/practice-areas/toxic-exposure-attorneys/">Toxic Exposure</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://getinjuryanswers.com/practice-areas/wrongful-death/">Wrongful Death</a></li></ul></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://getinjuryanswers.com/blog/">Blog</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://getinjuryanswers.com/contact-us/">Contact Us</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134"><a href="http://getinjuryanswers.com/abogado-de-lesiones-personales-en-san-diego/">Español</a></li></ul></nav></div></header><section id="hero-dog-bites" class="hero-wrapper section_wrapper"><div class="hero"><article class="hero"><img class="hero-article-img" src="/wp-content/uploads/2015/07/san-diego-dog-bites-attorney.jpg" width="1584" height="477" alt="san diego dog bite attorney"><div class="info"><div class="container"><div class="table-grid"><div class="table-row"><div class="column column-one"><div class="cell"><p class="h2">Are you a<br><strong>dog bite victim?</strong></p><p class="large"><strong>Let us help you get compensation<br> for your injury.</strong></p><p class="hero-button"><a class="btn btn-info btn-lg" href="/contact-us/">Start your <strong>FREE</strong> consultation</a></p><p class="hero-button visible-xs"><a class="btn btn-info btn-lg" href="tel:6193877497">Call us</a></p></div></div><div class="column column-two"><div class="cell visible-xs visible-sm visible-lg"></div></div></div></div></div></div></article></div></section><div class="site-inner"><div class="content-sidebar-wrap"><div class="container"><div class="row"><main class="content col-xs-12 col-sm-12 col-md-7" role="main" itemprop="mainContentOfPage"><div class="breadcrumb" itemprop="breadcrumb"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://getinjuryanswers.com" rel="v:url" property="v:title">ITL Home</a> / <span rel="v:child" typeof="v:Breadcrumb"><a href="http://getinjuryanswers.com/practice-areas/" rel="v:url" property="v:title">Our Practice Areas</a> / <span class="breadcrumb_last">Dog Bites</span></span></span></span></div>

Answer 1

要解决该错误，您应该清除

role attribute.

Answer 2

W3C HTML 检查器的大纲功能纯粹是提供信息（我知道是因为我是添加该功能的人……）。 [body element with no heading] 消息并不表示错误。相反，它只是在陈述一个事实。我认为不显示该消息的唯一方法是不将 h1-h6 元素作为 body 元素的直接子元素。但是因为 HTML 文档而没有 h1-h6 元素作为 body 元素的直接子元素（取决于文档的用途），那么您不必担心。它没有损坏、无效或坏。这不是你需要解决的问题。

Answer 3

这里迟到的答案可能是什么：

使用 the w3 nu validator, Access Assistant tool in Firefox 以及 macOS 和 iOS' Safari 屏幕阅读器验证我的代码后，没有显示任何错误，一切正常。

不确定语义结构与其他尝试有何不同，但这里有一个示例供其他人分析并在需要时尝试：

>>here's a codepen with styling and JS

<!DOCTYPE html>
<html lang="es">

<head>
    <title>Title for browser tabs specific length.</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body style="overflow-x: hidden;">
    <header class="bg-top">
        <div class="dinblock mb pl w75 vertical-al-mid" style="width: 74%;height: 99%;">
            <h1 class="my0 txc1">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="1" y="1" width="100%" height="100%" viewBox="0 0 120 20" preserveAspectRatio="xMinYMin meet" style="width: 100%;height: 100%;" aria-labelledby="svg_titlemanusis" aria-describedby="svg_descmanusis">
                    <title id="svg_titlemanusis">Manualsistemas</title>
                    <desc id="svg_descmanusis">Empresa de estructuras fotovoltacias.</desc>
                    <style>
                        .manualsistemas {
                            fill: currentcolor;
                            font-size: 12px;
                            letter-spacing: .15px;
                            font-weight: 500;
                        }

                        .manuf {
                            fill: currentcolor;
                            font-size: 6px;
                            letter-spacing: .15px;
                        }
                    </style>
                    <text textLength="120" lengthAdjust="spacing" xml:space="preserve" text-anchor="start" x="0.25" y="12" class="manualsistemas orbitron" font-size="12" fill="currentcolor" style="fill:currentcolor;font-size:12px;">manualsistemas</text>
                    <text textLength="119" lengthAdjust="spacing" xml:space="preserve" text-anchor="start" x="0.5" y="18" class="manuf" font-size="6" fill="currentcolor" style="fill:currentcolor;font-size:6px;">manufacturas numéricas del aluminio</text>
                </svg>
            </h1>
        </div>
        <div id="myInput" tabindex="0" aria-haspopup="true" class="dinblock txtcent vertical-al-mid" style="width: 24%;height: 99%;">
            <h2 id="menuelement" class="my0 dinblock txc1" style="width:99%;height: 99%;">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="1" y="1" width="40" height="10" viewBox="1 1 40 10" preserveAspectRatio="xMinYMin meet" style="width: 99%;height: 99%;max-height: 112px;max-width: 125px;" aria-hidden="true">
                    <style>
                        .name {
                            fill: currentcolor;
                            font-size: 10px;
                        }
                    </style>
                    <text xml:space="preserve" text-anchor="middle" x="21" y="7" class="name outw" font-size="10" fill="currentcolor" style="fill:currentcolor;font-size:10px;">menú</text>
                </svg>
            </h2>
            <div class="dinblock out1 txtcent" style="width: 49%;height: 99%;">
                <div id="menuToggle" class="out2" style="width: 99%;height: 99%;max-height: 87px;max-width: 76px;">
                    <input id="dropdown" type="checkbox" title="menu" style="width: 99%;height: 99%;" />
                    <span class="bgc1"></span>
                    <span class="bgc1"></span>
                    <span class="bgc1"></span>
                </div>
            </div>
            <ul class="navul" id="dropdown-content" style="text-align: left!important;" aria-expanded="false">
                <li class="ml navli">
                    <a href="cnc.html">
                        <p>Control numérico informático</p>
                    </a>
                </li>
                <li class="ml navli">
                    <a href="informacion.html">
                        <p>Como contactarnos</p>
                    </a>
                </li>
                <li class="ml navli">
                    <a href="index.html">
                        <p>Nuestra empresa</p>
                    </a>
                </li>
                <li class="mb0 ml navli">
                    <a href="contacto/formpage.html">
                        <p>Datos sobre el aluminio</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="dinblock w100 vertical-al-mid" style="width: 99%;height: 99%;">
            <h3 class="txc1">
                <svg class="pl" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="1" y="1" width="100%" height="100%" viewBox="1 1 161.3 11.6" preserveAspectRatio="xMinYMin meet" style="width: 99%;height: 99%;" aria-labelledby="svg_titleestruct" aria-describedby="svg_descestruct">
                    <title id="svg_titleestruct">Estructuras de aluminio</title>
                    <desc id="svg_descestruct">Estructuras fotovoltaicas en aluminio:</desc>
                    <style>
                        .estruct {
                            fill: currentcolor;
                            font-size: 12px;
                            letter-spacing: 1px;
                        }
                    </style>
                    <text xml:space="preserve" text-anchor="start" x="1" y="12" class="estruct" font-size="12" fill="currentcolor" style="fill:currentcolor;font-size:12px;">Estructuras de Aluminio</text>
                </svg>
            </h3>
        </div>
        <div class="dinblock mt w100" style="width: 99%;height: 99%;">
            <p class="mb0 txc1">
                <svg class="pl" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="1" y="1" width="100%" height="100%" viewBox="1 1 151 8" preserveAspectRatio="xMinYMin meet" style="width: 99%;height: 99%;" aria-labelledby="svg_titlelaca" aria-describedby="svg_desclaca">
                    <title id="svg_titlelaca">Slogan de empresa</title>
                    <desc id="svg_desclaca">La calidad protege nuestro trabajo</desc>
                    <style>
                        .laca {
                            fill: currentcolor;
                            font-size: 6px;
                            letter-spacing: 1.6px;
                        }

                        .fstlet {
                            fill: currentcolor;
                            font-size: 6px;
                            letter-spacing: 1.6px;
                        }
                    </style>
                    <text xml:space="preserve" text-anchor="start" x="1.3" y="7.1" class="laca" font-size="6" fill="currentcolor" style="fill:currentcolor;font-size:6px;">
                        <tspan xml:space="preserve" text-anchor="start" x="1.55" y="7.1" class="laca fstlet orbitron txc2" font-size="6" fill="currentcolor" style="fill:currentcolor;font-size:6px;">l</tspan>a calidad protege nuestro trabajo.
                    </text>
                </svg>
            </p>
        </div>
    </header>


</body>

</html>

任何关于我有点随意的积极结果背后的原因的建设性批评和/或澄清，都非常感谢。

HTML5 Body 元素错误

HTML5 Error on Body Element

html

wordpress

genesis