: Correct element for rendered page title? For SEO reasons, I've understood that it is important that the pages top most h1 is descriptive of the page's actual content. If one also wishes to
For SEO reasons, I've understood that it is important that the pages top most h1 is descriptive of the page's actual content. If one also wishes to have the site title at the top most part of the page, what element would this be put in? For example, take a simple blog. If one wishes to have the blog post header to be the top most h1, but want to have the blog name visible at the top of each post, in what element would this best be put? My guess is that it could be put within a span or p, but this would make a span or p be placed above the first header of the page, which perhaps could be argued to be bad semantics.
Any ideas?
More posts by @Berumen354
4 Comments
Sorted by latest first Latest Oldest Best
In addition to @Rincewind42 's answer, you may also make use of the <hgroup>-element to group the website- and page-title.
You mustn't use two heading's, it is also possible to combine an <h1> and <p> or whatever within one <hgroup>:
<hgroup>
<h1><a href="/">overall website title</a></h1>
<h2 id="slogan">Subtitle, or maybe pagetitle</h2>
</hgroup>
See: html5doctor.com/the-hgroup-element/
The solution to your semantics problem is to write the page in HTML5 which supports using multiple <h1> tags on a page. The page header is marked up inside tags and the main blog article is marked up in <article> tags. In this way the search engines can understand the true relationship of the h1 tag and the content of the site.
If you want to stick to HTML4 then you can only use the <h1> tag once in the page. So it would be best to use that tag only for the article's title rather than the site title. You should mark up the site title using a suitably lower order header tag ( <h2>, <h3>, etc.) or in a <p> tag. You should not use a <span> as that is an inline tag and you need a block level tag to surround it.
If you desperately don't want to have a <p> tag at the top of the html code there is something you can do. If you use css positioning, you can position the site title at the top of the page while locating the html further down the page. I used to do this for some of my sites where I wanted the article to be first in the html and the nav and headers at the bottom of the html. I could then use css positioning to put the nav on the left and the header at the top of the visible page.
The title of the page is hopefully already in the <title> tag in your <head>. Therefore, no tag exists for the purpose of showing your page's title. Putting it in a <p> or <span> as you suggest yourself would be perfectly fine.
As an example, just look at this page's source:
<div id="hlogo">
<a href="/">Pro Webmasters</a>
</div>
Additionally, there's no SEO rules or anything stating that no text can be before your first headers. As another example, menus, welcome-notes, etc. are often before the first article on a blog anyway.
I'm not exactly sure what you mean by "what element would this be put in". <h1> tags are a block element. This mean they can only go in other block level elements. If you place it in an inline element then your HTML is invalid.
The <h1> tag can go anywhere in your HTML although it usually is close to the top since it acts like the page's visible title. But this isn't always the case due to design considerations (i.e. floating elements, login boxes, etc). If your <h1> tag falls far down into your page's HTML then you've probably made an error or your page can be coded in a better way.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.