Headings (h1, h2, h3, etc.) Specifications

Michael Hill

Hi, folks.

I am wondering what the HTML standard says regarding the headings
specifiers (h1, h2, h3, etc.). Specifically, I would like to know if
these tags have the browser include a blank line above and below text
included between the, say, <h2></h2> tags.
I have looked through at least three books that discuss the h-tags but
none of them mention what the standard says.

Just for a test, I wrote a dummy page that included a chapter heading
such as <h2>Chapter Test #1</h2>.
I notice that when used to label the heads of table columns
(i) Microsoft IE adds a blank line below "Chapter Test #1";
(ii) Mozilla and Opera do NOT add a blank line below "Chapter Test
#1".

Somebody please let me know what the standard says.

A related question: how can I control this feature; I want to ensure
NO extra spacing below the headings.

Thanks in advance for any advice.

Michael

C A Upsdell

"Michael Hill" <mh*****@netzero.net> wrote in message
news:71**************************@posting.google.c om...

Hi, folks.

I am wondering what the HTML standard says regarding the headings
specifiers (h1, h2, h3, etc.). Specifically, I would like to know if
these tags have the browser include a blank line above and below text
included between the, say, <h2></h2> tags.
I have looked through at least three books that discuss the h-tags but
none of them mention what the standard says.

Just for a test, I wrote a dummy page that included a chapter heading
such as <h2>Chapter Test #1</h2>.
I notice that when used to label the heads of table columns
(i) Microsoft IE adds a blank line below "Chapter Test #1";
(ii) Mozilla and Opera do NOT add a blank line below "Chapter Test
#1".

Somebody please let me know what the standard says.
The standard says nothing specific about this. Each browser maker is free to
do what they think most suitable.
A related question: how can I control this feature; I want to ensure
NO extra spacing below the headings.

Use CSS, e.g. 'h1 { margin-bottom:0; padding-bottom:0; }', but remember that
some legacy browsers are CSS-deficient, so results are not certain.

Harlan Messinger

"Michael Hill" <mh*****@netzero.net> wrote in message
news:71**************************@posting.google.c om...

Hi, folks.

I am wondering what the HTML standard says regarding the headings
specifiers (h1, h2, h3, etc.). Specifically, I would like to know if
these tags have the browser include a blank line above and below text
included between the, say, <h2></h2> tags.
It's not a "blank line", it's a non-zero margin. There is no standard for
these. The default margins of these or any other HTML element are determined
by the default styles applied to those elements by the browser in question.

[snip]

A related question: how can I control this feature; I want to ensure
NO extra spacing below the headings.

Override the default margins with your own in a stylesheet.

Andy Dingley

On 7 Jun 2004 09:34:18 -0700, mh*****@netzero.net (Michael Hill)
wrote:

Somebody please let me know what the standard says.

Go and read the damn thing.
http://www.w3.org/TR/html4

And it isn't a blank line, it's a margin spacing. Try Lie and Bos for
a decent CSS introduction book.

--
Smert' spamionam

Andrew Fedoniouk

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2i************@uni-berlin.de...

It's not a "blank line", it's a non-zero margin. There is no standard for
these. The default margins of these or any other HTML element are determined by the default styles applied to those elements by the browser in

question.

Appendix D. Default style sheet for HTML 4.0
(This appendix is informative, not normative.)

http://www.w3.org/TR/CSS21/sample.html

Regards.

Andrew Fedoniuouk.
http://terrainformatica.com

Harlan Messinger

"Andrew Fedoniouk" <ne**@terrainformatica.com> wrote:

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2i************@uni-berlin.de...
It's not a "blank line", it's a non-zero margin. There is no standard for
these. The default margins of these or any other HTML element are

determined
by the default styles applied to those elements by the browser in

question.

Appendix D. Default style sheet for HTML 4.0
(This appendix is informative, not normative.)

http://www.w3.org/TR/CSS21/sample.html

Not a standard, but interesting. Thanks for the tip.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

JotM

Andy Dingley wrote:

On 7 Jun 2004 09:34:18 -0700, mh*****@netzero.net (Michael Hill)
wrote:
Somebody please let me know what the standard says.

Go and read the damn thing.
http://www.w3.org/TR/html4

And then go to /struct/global.html#edef-H1:
<quote>
There are six levels of headings in HTML with H1 as the most important
and H6 as the least. Visual browsers usually render more important
headings in larger fonts than less important ones.
</quote>

That is what the recommendation has to say about markup of the Hx
heading tags.

Cheers,

Jaap
--

/************************************************** **************************
JotM aka Jaap van der Heide
Remove ".XXXnospamXXX" for a valid return address
Please reply to a news message in the group where the message was posted
************************************************** **************************/

Neal

On Tue, 08 Jun 2004 14:18:27 +0200, JotM <me*******************@planet.nl>
wrote:

Andy Dingley wrote:
On 7 Jun 2004 09:34:18 -0700, mh*****@netzero.net (Michael Hill)
wrote:
Somebody please let me know what the standard says.

Go and read the damn thing.
http://www.w3.org/TR/html4

And then go to /struct/global.html#edef-H1:
<quote>
There are six levels of headings in HTML with H1 as the most important
and H6 as the least. Visual browsers usually render more important
headings in larger fonts than less important ones.
</quote>

That is what the recommendation has to say about markup of the Hx
heading tags.

Which means that the specs don't determine how hX is rendered. As well
they shouldn't.

Do look at http://www.w3.org/TR/CSS21/sample.html for "typical" ways a
graphical UA might render various elements. Even given this document,
there is no stricture on UA's on precisely how to render these elements.

Tim

On Tue, 08 Jun 2004 16:43:10 -0400,
Neal <ne*****@yahoo.com> posted:

Do look at http://www.w3.org/TR/CSS21/sample.html for "typical" ways a
graphical UA might render various elements. Even given this document,
there is no stricture on UA's on precisely how to render these elements.

There's one very common aspect of h element rendering that has always
seriously annoyed me (as someone reading pages, more than authoring), and
it's still recommended in that sample:

h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }

What idiot thought that it'd be a good idea for some headings to be smaller
than the body text? Then to make matters worse, to make it smaller by
*that* much?!

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

JotM

Neal wrote:

On Tue, 08 Jun 2004 14:18:27 +0200, JotM
<me*******************@planet.nl> wrote: ...
On 7 Jun 2004 09:34:18 -0700, mh*****@netzero.net (Michael Hill)
wrote:

Somebody please let me know what the standard says.

<quote>
There are six levels of headings in HTML with H1 as the most important
and H6 as the least. Visual browsers **USUALLY** render more important
headings in larger fonts than less important ones.
</quote>

.... Do look at http://www.w3.org/TR/CSS21/sample.html for "typical" ways a
graphical UA **MIGHT** render various elements. Even given this document,
there is no stricture on UA's on precisely how to render these elements.

The W3C recommendation (de-facto standard, allthough not a real
standard) only states the relative importance of Hx elements; it only
gives non-normative samples of ways to achieve that with _visual_ browsers.

So every page author and every browser-maker is free to "design" his or
her typographic layout. Typically where CSS comes in. So fup set to ciwas.

JotM.
--

/************************************************** **************************
JotM aka Jaap van der Heide
Remove ".XXXnospamXXX" for a valid return address
Please reply to a news message in the group where the message was posted
************************************************** **************************/

Jukka K. Korpela

Tim <ti*@mail.localhost.invalid> wrote:

There's one very common aspect of h element rendering that has always
seriously annoyed me (as someone reading pages, more than authoring),
and it's still recommended in that sample:

h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }

What idiot thought that it'd be a good idea for some headings to be
smaller than the body text?
Who knows? But it has created many "interesting" features like making
entire paragraphs h5 or h6 just in order to make them smaller!

A think the big idea was that h5 was supposed to appear in italic,
h6 in bold, or something like that - and somebody thought that italic
text looks more prominent than normal text even when the italic text has
smaller font size. This is questionable especially for sans-serif fonts.
Then to make matters worse, to make it
smaller by *that* much?!

There's a goog old principle in typography that changes in font size
should be clearly noticeable so that it does not look like an error.
For example 10pt vs. 11pt are probably too close to each other;
10pt vs. 12pt works better. In terms of relative changes, this means
that .83em is not such a bad idea typographically _if_ you go below basic
font size and the font tolerates size reduction. Getting even below that
is debatable, partly because any size clearly below .83em tends to become
very hard to read.

We can't really blame HTML specifications much for this mess. HTML 2.0,
which (somewhat exceptionally) discussed presentation in some detail in
this issue, described _typical_ renderings as follows:

H5
Italic, normal font, indented as H4. One blank line above.
H6
Bold, indented same as normal text, more than H5. One blank line above.

Ref.: http://www.w3.org/MarkUp/html-spec/h..._5.html#SEC5.4

It says "normal font" for H5. Since bold is more striking than italic, it
suggests between the lines that H6 would be smaller than normal text
in "typical renderings".

Note, by the way, that HTML 2.0 said that the elements denote _section_
headings. This is not maximally clear, but it is more informative than
later HTML specifications in this respect. A heading is always a heading
_for_ something (namely a section, at some level of structure), not just
emphatic text.

There's more in the common rendering, which is effectively recommended by
the W3C for graphic browsers. As the sample style sheet shows, there's
_equal_ margin above and below a heading. This violates typographic
practices, since a heading should associate better with the text after it
than with the text before it, so the margin above should be bigger than
the margin below. There's nothing we can do in HTML about this, unless
you count clumsy and unreliable tricks like putting <p></p> before a
heading.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Philipp Lenssen

Jukka K. Korpela wrote:

There's more in the common rendering, which is effectively
recommended by the W3C for graphic browsers. As the sample style
sheet shows, there's equal margin above and below a heading. This
violates typographic practices, since a heading should associate
better with the text after it than with the text before it, so the
margin above should be bigger than the margin below. There's nothing
we can do in HTML about this, unless you count clumsy and unreliable
tricks like putting <p></p> before a heading.

But then again most people's browsers will render our stylesheet so
it's not a big deal if the browser's default stylesheet is broken. I
practically always change my headers, e.g. use something like 140% or
so, a change in color to better differentiate, higher margins on top,
and so on. I sometimes use <p> </p> as separator though mostly I
think my <div class="separator"> </div> makes more sense (and I
dislike <hr />).

--
Google Blogoscoped
http://blog.outer-court.com

Jukka K. Korpela

"Philipp Lenssen" <in**@outer-court.com> wrote:

I practically always change my headers, e.g. use something like 140% or
so, a change in color to better differentiate, higher margins on top,
and so on.
Fine. But it then puzzles me that you use very clumsy and coarse tricks
that are officially frowned upon in HTML specifications:
I sometimes use <p> </p> as separator though mostly I
think my <div class="separator"> </div> makes more sense (and I
dislike <hr />).

Technically the specs only say that authors should not use empty
paragraphs and browsers should ignore them (the empty paragraphs), and
the strictest interpretation is that only <p></p> (perhaps with the end
tag defaulted) is an empty paragraph. But logically <p> </p> is
empty too, and so is <div> </div>. They don't make much sense
semantically, and no specific effect is guaranteed.

If you wish (as I suppose) just draw a horizontal line, why don't you
create it by setting a bottom or top border for a natural, logical
element, instead of introducing an unnecessary dummy element?

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Neal

On Sat, 12 Jun 2004 14:23:13 +0000 (UTC), Jukka K. Korpela
<jk******@cs.tut.fi> wrote:

If you wish (as I suppose) just draw a horizontal line, why don't you
create it by setting a bottom or top border for a natural, logical
element, instead of introducing an unnecessary dummy element?

One reason to do so is when the visual division is needed for usability
regardless of the observance of your CSS rules. There are times when I've
done something like this:
....
<hr>
<div class="specialsection">
<h3>Special Section</h3>
<p>...</p>
</div>
<hr>
<div class="normal">
....

and the style is perhaps like this:

..specialsection {border: 2px solid #ccc;}
/* plus whatever other styles I might use to set this section off */

hr {display: none;}

As a result, in a CSS environment, the style sets off this section as
tangental, perhaps, or whatever it is. Without CSS, the heading plus the
hr's are invoked to communicate this secondary importance to the user, as
well as show how far into the document this special section continues.

Headings (h1, h2, h3, etc.) Specifications

This discussion thread is closed

Similar topics