Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Order of heading tags

Featured Replies

Hey

 

I know it's important to order your heading tags in the correct order h1, h2, h3 etc but what I want to know is, if it's ok to have a h1 and a h2 tag in one div and then later on have another h1 and h2 tag...see the code to see what I mean:

 

<div id="content">
<div class="left">
	<h1>Latest News</h1>
	<h2>25 April 2007</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et dolor et magna</p>
</div>
<div class="right">
	<h1>Proin non nisi ornare leo rutrum facilisis</h1>
	<h2>Integer sed orci vestibulum in pede.</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque et dolor et magna</p>
</div>
</div>

 

or is that a complete no-no?

 

Just asking as if it's a no-no I need to create a new style for the latest news title and date but use the same styles as the h1 and h2 tags.

The way I learned it was that H1 tags should describe the entire page and only be used for that purpose, i.e. one topic and therefore one title. If you find yourself wanting to use more than one H1 tag, this is supposed to be a sign that you need to start a new page.

 

Now I don't think Google et al will penalise you for having two H1 tags... just don't use 20. :)

  • Author

it's Ok, thanks for the reply, but I've opted for creating separate styles, but as they duplicate each other, I've combined them like this:

 

h1, .greentitle {
font-size: 100%;
font-weight:bold;
color: #006A71;
margin-bottom: 10px;
}

h2, .greytitle {
font-size: 90%;
font-weight:bold;
color: #999999;
margin: 0;
}

I tend to think to only use on H1 and one H2 but a few H3 and more H4 or H5 etc.

  • 4 weeks later...

I have one h1 tag with the title for the entire page. Then h2 for the main sections where each sections sub section got a h3 tag.

 

on a sidenote, I see you used classnames such as left, right, greentitle and greytitle. that isn't a great practice as it dictates appearance. you'd be better of identifying the purpose of the element and apoint a classname that relates to the content instead. when the layout changes you don't want to change all them classnames.

  • Author

I doubt the layout is going to change and the colours certainly won't as they reflect the company logo so I don't see this as being a big issue...the colours are always going to be relevent regardless of the layout.

I doubt the layout is going to change and the colours certainly won't as they reflect the company logo so I don't see this as being a big issue...the colours are always going to be relevent regardless of the layout.

 

It's just that it defies separating layout from content. Classnames which relates to the content rather than layout make more semantical sence is is generally a better practice.

 

Ref: http://www.w3.org/QA/Tips/goodclassnames

http://microformats.org/wiki/semantic-class-names

  • Author

yeah but if a bit of text is always going to be a title and coloured green - what's wrong in calling the style greentitle? I get what you mean with semantic naming but I really don't think it applied in this instance as within the context of the this website my style names make perfect sense.

yeah but if a bit of text is always going to be a title and coloured green - what's wrong in calling the style greentitle? I get what you mean with semantic naming but I really don't think it applied in this instance as within the context of the this website my style names make perfect sense.

 

Fair enough, whatever works works. Just wanted to highlight the matter.

 

...though... I feel compelled to reply once more in regard to you last reply. If naming classnames in the type of 'green', 'left' etc, relating to the layout because the layout will never change, then B and I elements would be equally valid to use.

The main issue I argue is that a site rarely ever stay the same forever. And avoiding id and class names indicating layout makes it easier when redesign is done, or if you make alternate stylesheets where the names wouldn't fit. It fits better witht he whole concept of separating structure from layout.

But I'll leave it with that. I've taken this thread too much off topic. We all have each our way of doing things. I don't want to appear to be pointing fingers or passing judgement. But I'm allways up for a good discussion, espesially in topics related to webdesign. ;)

  • Author

I totally see your point and agree with it, I just don't think it applies in this case...

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.