Headings: Chapter 2

Everything I know about HTML headings tells me that there is at least a
line break before them and one after them.

The line break above must somehow be conditional, otherwise you'd get a
blank line at the top of a document which starts with a header. And
similarly for the one below if the document ends with a header (odd, but
possible).

Does CSS offer any control over these line breaks? I sometimes want to
place some plain text to the right of a header, for example at
http://www.swiftys.org.uk/decisions where I've resorted to my usual
table tricks to get the effect, and also right aligning the text on the
right.

Some of the higher numbered headers in default MS Word documents (and
GML documents, I recall) lack the trailing line break, so become just
some "bold text at the beginning of a paragraph".

If your browser allows you to see the space occupied by certain
elements, then you should find that the table containing the initial H2
at the top of the page had no significant space either above or below
the H2, which is certainly different from an H2 outside a table. The
exact affect is probably slightly different between browsers, but I've
used these sorts of tables precisely because they are fairly consistent
across browsers.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Swifty wrote:

Everything I know about HTML headings tells me that there is at least a
line break before them and one after them.

Actually, the proper terminology is this: HTML headers are block
elements. Block elements (generally) start on their own lines, as
opposed to inline elements which (as their name implies) run in the same
lines.

Does CSS offer any control over these line breaks? I sometimes want to
place some plain text to the right of a header, for example at
http://www.swiftys.org.uk/decisions where I've resorted to my usual
table tricks to get the effect, and also right aligning the text on the
right.

The ideal property would ideally be to change the display attribute to
run-in (indeed, this seems to be its sole purpose). However, Firefox
notably does not support this feature
<https://bugzilla.mozilla.org/show_bug.cgi?id=2056>, and I can't say
about IE. The next-best thing would be to set it to inline, which would
work correctly about 90% of the time.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

On 2009-01-11, Swifty wrote:

Everything I know about HTML headings tells me that there is at least a
line break before them and one after them.

There is no line break. A heading is a block-level element, which
means that it starts on a new line and by default, fill the
available width. If it's the first line on a page, there's nothing
above it (though there may a a margin or padding). The padding and
margin can be controlled with CSS.

The line break above must somehow be conditional, otherwise you'd get a
blank line at the top of a document which starts with a header. And
similarly for the one below if the document ends with a header (odd, but
possible).

Does CSS offer any control over these line breaks? I sometimes want to
place some plain text to the right of a header, for example at
http://www.swiftys.org.uk/decisions where I've resorted to my usual
table tricks to get the effect, and also right aligning the text on the
right.

Look Ma, no tables! <http://cfaj.freeshell.org/testing/head.html>

Some of the higher numbered headers in default MS Word documents (and
GML documents, I recall) lack the trailing line break, so become just
some "bold text at the beginning of a paragraph".

MS Word knows nothing about creating web pages. At best, it uses
HTML to reproduce a paper document.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

In article <V7-dnYqVgOmXwPTUnZ2dnUVZ8jCdnZ2d (AT) brightview (DOT) com>,
Swifty <steve.j.swift (AT) gmail (DOT) com> wrote:

Everything I know about HTML headings tells me that there is at least a
line break before them and one after them.

The line break above must somehow be conditional, otherwise you'd get a
blank line at the top of a document which starts with a header. And
similarly for the one below if the document ends with a header (odd, but
possible).

Does CSS offer any control over these line breaks? I sometimes want to
place some plain text to the right of a header, for example at
http://www.swiftys.org.uk/decisions where I've resorted to my usual
table tricks to get the effect, and also right aligning the text on the
right.

div {float: right;}

and

<div>Version 1.05</div>
<h2>Executive Decision Maker</h2>

should do you.

About line breaks, you can control some things with line-height. About
headings, there are default top and bottom margins you might be seeing.
margin: 0 on the headings to see what is going on.

What's with all the table markup?

--
dorayme

Swifty wrote:

Everything I know about HTML headings tells me that there is at least
a line break before them and one after them.

"Line break" is a vague concept. You probably mean spacing, which may look
like an empty line. Spacing can be described as margin and padding in CSS
terms; moreover, the line-height property may create extra vertical space.

The line break above must somehow be conditional, otherwise you'd get
a blank line at the top of a document which starts with a header. And
similarly for the one below if the document ends with a header (odd,
but possible).

Browsers typically have vertical margins for heading elements by default,
with equal margin above and below (which is regarded as poor typography by
many - a heading should be closer to the text that it is a heading for than
to the preceding text). This can be described in terms of CSS margin
properties, though the feature predates CSS.

Browsers often suppress those margins in some situations, e.g. the top
margin at the start of a document, as you mention, and also at the start of
a <td> element.

Does CSS offer any control over these line breaks?

Quite a lot, but if you would like to set different margins for different
<h2> elements within a document, for example, it's usually best to use class
attributes and class selectors. Contextual selectors could be used to
express conditions that you allude to, but they are somewhat complicated
and, most importantly, largely not supported by IE 6 and earlier.

For example, the selector
body > h1:first-child
would refer to (only) such an <h1> element that appears at the very start of
the document body without any intervening markup - in practice, right after
the <body> tag. But IE does not recognize it, except in version IE 7 in
"standards" mode.

I sometimes want to
place some plain text to the right of a header, for example at
http://www.swiftys.org.uk/decisions where I've resorted to my usual
table tricks to get the effect, and also right aligning the text on
the right.

Pardon? There are only two heading elements there, and they are illogically
<h2>. (How can you have a second level without having the first level?)

I cannot see what you are referring to. Surely the <h2> elements' spacing
can be handled easily. You can first set the margin properties for h2 as you
like to be applied to the second <h2> element (which is outside the table)
and then margin properties for td h2 if you want the heading in a cell to
have different spacing.

Some of the higher numbered headers in default MS Word documents (and
GML documents, I recall) lack the trailing line break, so become just
some "bold text at the beginning of a paragraph".

The practical way to get that is to use <p><strong
class="h3">...</strong>...</p> and forget attempts at being maximally
logical here. The class attribute (with value to be adjusted as suitable) is
here just to make it easier to style these run-in headings differently at a
later stage if that turns out to be useful.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

On 2009-01-11, Swifty <steve.j.swift (AT) gmail (DOT) com> wrote:

Everything I know about HTML headings tells me that there is at least a
line break before them and one after them.

The line break above must somehow be conditional, otherwise you'd get a
blank line at the top of a document which starts with a header. And
similarly for the one below if the document ends with a header (odd, but
possible).

Does CSS offer any control over these line breaks?

display: run-in is for exactly this, but I don't think it's well
supported.

I sometimes want to
place some plain text to the right of a header, for example at
http://www.swiftys.org.uk/decisions where I've resorted to my usual
table tricks to get the effect, and also right aligning the text on the
right.

You could just make h1 etc. display: inline and use divs as paragraphs.

i.e.

<div>
<h1>heading</h1> text
</div>
<div>
<h1>another heading</h1> text
</div>

On 2009-01-11, Lars Eighner <usenet (AT) larseighner (DOT) com> wrote:
[...]

Since headers are block elements, you can float them.

You can float anything (except table cells/rows/etc.) even if it's not
a block element.

It sort of becomes display: block implicitly if you do though.

dorayme wrote:

What's with all the table markup?

I come from an era where that was all there was to get things where you
wanted them. That, and the 1 pixel transparent gif, which I'm almost
free of these days.

You reach a certain point where, faced with a better way of doing
things, which might not work under some circumstances, and your old way
of doing things, which has never been know to fail, you stick with your
old ways. For me, that they come from around 1987-1990.

I took to the original HTML because it was tag compatible with the GML
that I'd used on mainframes, including tables.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Jukka K. Korpela wrote:

Pardon? There are only two heading elements there, and they are
illogically <h2>. (How can you have a second level without having the
first level?)

Thank you for your answer. I'm slowly getting to grips with padding and
margins, aided by debugging tools that make it graphically obvious.

I'll answer the only question that I noticed:

The H2 is there because, pre-CSS (where I spent most of my life) the H2
was the way to get a heading that was smaller than an H1. It still
works, so why change? (That's rhetorical)

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Swifty wrote:

The H2 is there because, pre-CSS (where I spent most of my life) the
H2 was the way to get a heading that was smaller than an H1. It still
works, so why change? (That's rhetorical)

It has "always" been possible to get a heading smaller than H1 by using a
suitable combination of B (or STRONG), BIG, FONT, BR, and DIV. Admittedly H2
is more semantic, but it also gives wrong semantic information (about
heading level).

It's not a big issue, but I think in 2008, there's no reason to use H2 just
to get the "correct" font size for a heading, instead of using H1 (or, in
this case, maybe CAPTION) together with CSS.

--
Yucca, http://www.cs.tut.fi/~jkorpela/