Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Changing H1 tags usage to make html output semantically correct #76

Closed
wants to merge 1 commit into from

6 participants

@ashfame

Right now H1 tag is being abused and there are multiple instances of H1 on many pages, which is semantically incorrect, as every page can only have a single H1 tag.

I have changed the H1 tags usage so that they are output only once, as per the context and WordPress's Frontpage settings under Reading sub-settings section of Settings.

What things are fixed?

  • Site title and description uses H1 & H2 tag only when on homepage
  • Page / Post titles are H1 on their individual pages, and not on archive pages
  • Assistive text are not H1 anymore
  • Widget titles are not H1 anymore

Tested with WordPress defaults and custom settings for Frontpage display, and now this outputs optimal markup in terms of semantics.

Since this will make pages output semantically correct data, this will also help in improving SEO.

@ashfame

I see some reference to H1 being used as assistive text in small-menu.js:

$masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

But I don't understand what exactly it is doing, because without them, things appear to work just fine.

@kovshenin
Owner

It's an HTML5 semantics thing. @ianstewart has a neat response to why sections have h1 headings right here: #66 (comment)

It's also not "semantically incorrect" to have multiple h1's per page, and "every page can only have a single H1 tag" is also not true. It's just a couple of assumptions that SEO "experts" tend to make ;)

@ashfame

Interesting! I can swear I read this from a very authorative source, that one should have only single H1 tag on a page, as that represents what the page is about. I see, this has changed in HTML5 standards.

Found a good explanation here - http://www.seomoz.org/q/multiple-h1-tags-are-ok-according-to-developer-i-have-my-doubts-please-advise

And Matt Cutts also says its ok to have multiple H1 tags but not too much - http://www.youtube.com/watch?v=GIn5qJKU8VM

But still we are using a lot of H1(s) here. So, you think its OK to have that many H1 tags? I personally would still avoid the widget titles and assistive texts as such. Thoughts?

@shawnsandy

Lets put the "semantics" aside for a while, view your theme with styles turned off, what your see is a lot of "headlines". That's what the search engines and basic browsers see, I just don't like it, semantics or not it makes no sense!!!

@corvannoorloos

According to whatwg.org: "Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style."

Having said that, I have to agree with @ianstewart's previous reply on this matter here.

@philiparthurmoore
Collaborator

See also: #8 (comment)

@ianstewart
Owner

Closing this one as we know it's not semantically incorrect.

@ianstewart ianstewart closed this
@ashfame ashfame deleted the unknown repository branch
@marksantiago marksantiago referenced this pull request from a commit
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 9, 2012
  1. @ashfame
This page is out of date. Refresh to see the latest.
View
4 comments.php
@@ -36,7 +36,7 @@
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav role="navigation" id="comment-nav-above" class="site-navigation comment-navigation">
- <h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
+ <div class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></div>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-before .site-navigation .comment-navigation -->
@@ -56,7 +56,7 @@
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav role="navigation" id="comment-nav-below" class="site-navigation comment-navigation">
- <h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
+ <div class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></div>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-below .site-navigation .comment-navigation -->
View
6 content-page.php
@@ -9,7 +9,11 @@
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
- <h1 class="entry-title"><?php the_title(); ?></h1>
+ <?php if ( is_front_page() ) { ?>
+ <div class="entry-title"><?php the_title(); ?></div>
+ <?php } else { ?>
+ <h1 class="entry-title"><?php the_title(); ?></h1>
+ <?php } ?>
</header><!-- .entry-header -->
<div class="entry-content">
View
2  content.php
@@ -7,7 +7,7 @@
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
- <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', '_s' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
+ <div class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', '_s' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></div>
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
View
4 functions.php
@@ -90,8 +90,8 @@ function _s_widgets_init() {
'id' => 'sidebar-1',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
- 'before_title' => '<h1 class="widget-title">',
- 'after_title' => '</h1>',
+ 'before_title' => '<div class="widget-title">',
+ 'after_title' => '</div>',
) );
}
add_action( 'widgets_init', '_s_widgets_init' );
View
11 header.php
@@ -47,12 +47,17 @@
<?php do_action( 'before' ); ?>
<header id="masthead" class="site-header" role="banner">
<hgroup>
- <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
- <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
+ <?php if ( is_front_page() ) { ?>
+ <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+ <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
+ <?php } else { ?>
+ <div class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></div>
+ <div class="site-description"><?php bloginfo( 'description' ); ?></div>
+ <?php } ?>
</hgroup>
<nav role="navigation" class="site-navigation main-navigation">
- <h1 class="assistive-text"><?php _e( 'Menu', '_s' ); ?></h1>
+ <div class="assistive-text"><?php _e( 'Menu', '_s' ); ?></div>
<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
View
2  inc/template-tags.php
@@ -23,7 +23,7 @@ function _s_content_nav( $nav_id ) {
?>
<nav role="navigation" id="<?php echo $nav_id; ?>" class="<?php echo $nav_class; ?>">
- <h1 class="assistive-text"><?php _e( 'Post navigation', '_s' ); ?></h1>
+ <div class="assistive-text"><?php _e( 'Post navigation', '_s' ); ?></div>
<?php if ( is_single() ) : // navigation links for single posts ?>
View
4 sidebar.php
@@ -15,14 +15,14 @@
</aside>
<aside id="archives" class="widget">
- <h1 class="widget-title"><?php _e( 'Archives', '_s' ); ?></h1>
+ <div class="widget-title"><?php _e( 'Archives', '_s' ); ?></div>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
</aside>
<aside id="meta" class="widget">
- <h1 class="widget-title"><?php _e( 'Meta', '_s' ); ?></h1>
+ <div class="widget-title"><?php _e( 'Meta', '_s' ); ?></div>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
Something went wrong with that request. Please try again.