Divitis, how to cure it

HTML & CSS
21

Also, I find it a slightly strange Alex suggested adding emphasis within a H2 when a H2 is already considered ‘emphasised’ but in a weird way I understand what he is getting at or his point of view.

For special styling, where some of the text stands out waaaaay more than the rest, even in a header, I’d consider doing it how Alex did, sure.

In a logo where I had three different styles I made use (abuse?) of the small tag (as bylines are often typographically small for a content reason anyway) and then two spans with class names for the styling. But whenever you think you can semantically use another element besides a span, it’s nice as it lightens up the CSS and the class-osis.

22

ok i have been thinking on Alex’s example of

<h2><em>A Company</em> Presents <strong>Exclusive</strong> <span>Stuff</span></h2>

and it simply is not working, logically speaking the 2 parts

<em>A Company</em> Presents <strong>

<strong>Exclusive</strong> <span>Stuff</span>

need to be kept close to each other, yet separated, it is not supposed to be indexed by search engines as one sentence.
so if it was a average html situation i would write it as

<h1><em>A Company</em> Presents <strong></h1>
<h2><strong>Exclusive</strong> <span>Stuff</span></h2>

but the problem is that “Exclusive Stuff” is the main title (and should be the main h1) of the page, not the “A Company Presents”, a company presents is supposed to be in smalltype above the main heading.

so writing this is more correct in terms of content priority


<h2><strong>Exclusive</strong> <span>Stuff</span></h2>
<h1><em>A Company</em> Presents <strong></h1>

but as
xhtmlcoder and cooper.semantics mentioned, this is wrong.

so what is the correct way to handle this?
am i supposed to take


<h1><strong>Exclusive</strong> <span>Stuff</span></h1>
<h2><em>A Company</em> Presents <strong></h2>

and reverse that positioning using css???

23

Looking at your code, I would say it’s fine, and no need to worry about abusing <div>s.

It’s 100% appropriate to use a <div> to wrap around a section of the page such as header, content or footer - that’s exactly the kind of thing they are intended for. When HTML5 comes along and starts being widely accepted, you will be able to use <header> and other elements instead, but for now, <div>s are the right tools for the job.

“Divitis” (or divosis, or whatever we are calling it) usually comes about when someone tries to faithfully recreate a complex table-based layout without the tables, and ends up nesting <div>s several levels deep, and with <div>s used arbitrarily rather than for genuinely grouping related content. Typically, this is because they are simply replicating a layout rather than looking at how the content can be semantically marked up and reconsidering the relationship between layout and content.

24

I would say that the whole sentence is the main heading, and should be wrapped in a single <h1> element. You might want to put “A company presents” in <small> to de-emphasise it, or to wrap a <strong> around “Exclusive stuff!” to show its importance, but either way, it makes sense to have it all in the <h1>.

Maybe in HTML5, it would work as

<header>
<p>A company presents...</p>
<h1>Exclusive stuff!</h1>
</header>

,
but my question would be, why don’t you want the company name to be part of the heading element?

25

so writing this is more correct in terms of content priority
Code:

<h2><strong>Exclusive</strong> <span>Stuff</span></h2>
<h1><em>A Company</em> Presents <strong></h1>

but as
xhtmlcoder and cooper.semantics mentioned, this is wrong.

so what is the correct way to handle this?
am i supposed to take
Code:

<h1><strong>Exclusive</strong> <span>Stuff</span></h1>
<h2><em>A Company</em> Presents <strong></h2>

and reverse that positioning using css???

Well, or mark up the first thing as h1 and second one as h2…
however neither of those “sentence fragments” make sense as headers, or bits of a header…

It might be good to hear why the googles are supposed to take the things as separate fragments rather than an entire full sentence.

Even if you had, say, multiple pages where

“Joe’s Garage presents”
“MOTORCYCLE MADNESS!!!1111LOL”

and another with
“Joe’s Garage presents”
“CHAMPION LEMON RACING!!!”

and
“Joe’s garage presents”
“MOTOR OIL CHUG!!!”

those are all considered single sentences…
however I wonder if you are thinking of a typical thing done with series…
you may have heard of a “series” called “Alfred Hitchcock presents”?
Underneath is a new movie title.

However, in that context then the name of the series is
<h1>Alfred Hitchcock (possibly <small>)presents</small></h1>
(the small really is iffy in this case as the text was originally smaller for presentational purposes and to enhance the name “Alfred Hitchcock”)

and so the name of the movie would be an h2
<h2>THE BIRDS</h2>

However, let’s say we’re on a page dedicated to The Birds. Now The Birds should be a main title, an H1.

Then it is better to do
<p id=“intro”><strong>Alfred Hitchcock</strong> presents…</p>
<h1>THE BIRDS</h1>

Again, the strong is an idea, depending on if the director’s name really is so important that it should be emphasised… or as HTML5 people call it, “important” (I’d say so, Hitchcock rocked).

26

but my question would be, why don’t you want the company name to be part of the heading element?

because the heading element represents a companies subdivision, where the company itself has little to no interaction with the current website.

like in this way for example
james cameron presents
AVATAR

edit:
oh, didnt see you posting the example, there poes, Thats Exactly what i meant!
so it should be a p? should h1 come before a p?

and yes i agree, Hitchcock rocked

27

Lawlz, cause I ninja’d it in there with an edit later!

I use the same technique for company logos… on the main/home page, the logo is the h1 because the company name is the main page title (and therefore belongs as an h1) however on all the other pages, it’s only a logo and company name, not the title of the page. So on all those other pages, the h1 properly goes on the page title and a p with a special id wraps the logo/company name. I’ve seen other people doing it so I looked at it and decided that’s how I wanted to do it, and it seems to work out nicely.

so it should be a p? should h1 come before a p?

It could be. All those pages who don’t have the main content first have all sorts of things before the h1 (like if there’s a floated sidebar or a header area with logo, main menu, etc before content area).

Also, the above is one of those cases where an h2 before an h1 could be appropriate… if your site makes more sense to have a navigation sidebar or something come before the main page content (sometimes that makes perfect sense) and that navigation has a header, it shouldn’t be an h1 because h1 means Main Page Title or Document Title, so the h2 before some side navigation or other sidebar stuff is appropriate.

There are those who still don’t even like that and so try to always have the content area come first, but I’m of the mind that you should do what makes sense to real human beings in the context of the particular site you’re doing.

28

[ot]What the hell?

Yeah, slight case of dyslexia there; “I understand what he is getting at [and can understand] his point of view.” That might make slightly more grammatical sense. :blush:[/ot]

SMALL: Renders text in a “small” font, yuk. SMALL is “purely presentational markup” (although I don’t think it was the “original” intention of the authors for that to be the case for SMALL).

HTML 4.01 has no element to indicate de-emphasis; CSS equivalent would be; ‘font-size: smaller;’ not really ideal but in rare cases can be used, e.g. possibly like the Book example where you are just recreating special typography.

29

[ot]

SMALL: Renders text in a “small” font, yuk. SMALL is “purely presentational markup” (although I don’t think it was the “original” intention of the authors for that to be the case for SMALL).

Ah, but using HTML for meaning is better than using CSS, which imparts no meaning. My opinion on <small>[/ot]

30

<small> tag in HTML 5 isn’t the same as it is in all previous versions - it has changed its meaning for HTML 5, so can’t really be considered as the same tag being left in.

As for the heading thing, I’d do it all as one heading (h1) with emphasis on the more important part - there is no reason you can’t emphasise something inside a header, it’s all relative to the rest of the text in the header.

31

I rather agree with HTML5’s ideas about small… <fineprint> is a tag we’ve been needing for a while now. How about <fineprint type=“legalese”>?

32

[ot]Yes, SMALL is for legal and/or typographical convention but still it is ‘presentational’ (akin to the B tag) I think SMALL was meant to have been designed like you say on your site, I’d agree… But for some peculiar reason wasn’t - an oversight by the W3C if you will. I not saying you will burn in hell or it has no meaning other than it is “presentational”.

It is one of the reasons why it doesn’t occur in XHTML Basic 1.0 but creeps back into Basic 1.1 (which is a backwards-step). In fact, I think the changes in Basic 1.1 are mainly crap and go against the philosophy). As for HTML5 I don’t keep up-to-date with their ideas.[/ot]

Why not a create a <legal> element?

I am interested though what the effect of a STRONG within a Hx really has; I mean since the Hx is already several levels more emphasized than normal text what would it equate to? Hypothetically maybe: <strong><strong><strong><strong>You will Die more than you Live. (Much More)</strong></strong></strong></strong>

There is probably a sensible answer but at the moment it eludes me.

33
Off Topic:

AJAX IS… stronger than dirt!

34

Just because a header is already emphasised, doesn’t mean that one part of it can’t have more emphasis than the rest, or can’t be more important than the rest. There is no reason at all why you couldn’t have <strong> or <em> inside an <hx> tag, either semantically or syntactically.

35

Heading text markup:
Emphasizing certain text within a heading element gives it higher importance.

Small Tag:
The HTML small tag is used for specifying small text.

HTML5:

Small print (also referred to as “fine print” or “mouseprint”) usually refers to the part of a document that contains disclaimers, caveats, or legal restrictions, such as copyrights.

I really don’t care for the naming convention of <small> as it conveys presentation regardless of whatever ‘semantics’ the html5 working group establishes.

Heading Hierarchy:
Heading tags must always fall in order, regardless of location in the document.

h1
h2

h2
h3

h2
h3

h2
h3
h4

I wouldn’t advocate a h2 before a h1, because it breaks the document flow.

36

Heading Hierarchy:
Heading tags must always fall in order, regardless of location in the document.

It has been discussed and on the w3 pages they have stated that header tags SHOULD fall in order and that one would like to not skip them.

Here’s a valid reason not to start with h1:


<head.../>
<body>
  <div id="header">
    <p>Joe's Garage<a href="home"> </a></p>
    <ul>
      <li><a href="">home</a></li>
      <li><a href="">about</a></li>
      <li><a href="">contact</a></li>
    </ul>
  </div>
  <div id="sidebar">
    <h2>Products</h2>
    <ul>
      <li><a href="">Motor Oil</a></li>
      <li><a href="">Oily Rags</a></li>
      <li><a href="">Tires</a></li>
      <li><a href="">Boat Shoes</a></li>
    </ul>
    <h2>Services</h2>
    <ul>
      <li><a href="">Snarky comments</a></li>
      <li><a href="">Diagnoses</a></li>
      <li><a href="">High Estimates</a></li>
      <li><a href="">Boat Payments</a></li>
    </ul>
    <p>Call us fer more info</p>
  </div>
  <div id="main>
    <h1>Welcome to the Web Site of Joe's Garage</h1>
    <p id="tagline">Satisfy all yer automotive needs at Joe's!</p>
    
    <p>Text about Joe's...</p>
  </div>
  <div id="footer />
</body>
</html>

Not everyone strives to put content first… in fact that can be annoying when the visitor is more likely to want to use the navigation menu first.

Headers in a sidebar, with HTML4, should not be an h1 just because they come first. It shouldn’t matter where it sits. h1 is the title of the page. h2 is a subcategory of that.

Some people do an h1 there in the sidebar, and also one in the main area, but I don’t, because I don’t see h1 as appropriate for a sidebar heading.

Suppose there were headers in the #header? They are also possibly not h1’s, assuming the h1 is actually over by the content. I’ll not move a #header down in source just to let the h1 come first. That makes much less sense.

Granted, if you know how to make the sidebar come later, and that makes more sense for visitors, then you should do that.

I assume the problem shown above is why HTML5 wanted to allow multiple h1’s on a single page, so that order could always be preserved regardless of which section of a page comes first (regardless of source order).

37

The way I see it, for any developer who cares about their code, should not is equivalent to must not.

As for source ordering, I make my pages so they make sense being read with styles turned off. In the example you pasted, I would argue that it doesn’t make sense to have the document title / main heading half way down the page and to have some irrelevant content first - that should come afterwards!

38

…Like Sitepoint? (no wait, they solve the ordering problem by always making their logo an h1 and making the page title an h2… something I personally disagree with).

Not everyone can absolutely position their headers to the top of the page, just as not everyone can use the negative margin trick to make sidebars etc come after the main content.

39

should not means that in the usual sense it should not be done, but there might be acceptable exceptions,
at least that’s how i understand it,
because they do take care to write it as “should” instead of “must” like they usually do.

40
Off Topic:

I know that you can have emphasis within a header what I was saying; does it actually do anything sensible? Not the fact it “makes sense” in some cases for the fact that it exists and thus alters things. What I meant by what margin is the actual ELEMENT and contents affected. Inheritance if you will - as you can tell I had shut down my brain by then but still… :slight_smile:

Again, I am aware it is hierarchy rather than mainly emphasis - don’t worry I will find-out the answer myself; basically I phrased the philosophical question wrong.

Off Topic:

As for SMALL: http://www.w3.org/TR/html401/present/graphics.html#edef-SMALL Your argument Poes should have been; “It has some semantic value (which nobody disagrees with) though it was probably slightly miscategorised by the W3C.” And your explanation is what you believe it should have been created for. I’ll shut-up on that because it’s Catch-22. :slight_smile:

Regarding Headings; if you want to look at ISO-HTML you would have;

[quote=““ISO HTML””]
The <H1> element shall not be followed by an <H3>, <H4>, <H5> or <H6> element without an intervening <H2> element. […]An <H2> element shall be preceded by an <H1> element.
[/quote]

Albeit quite a lot of ISO-HTML is wacky in my opinion and not necessarily always the case in HTML 4.01 as was stipulated above.