H1 through H6 are header tags, which have special semantic meaning in
the context of information architecture, but in the realm of Web
design also have structural significance. They have a similar
structure to a P (paragraph) tag or even a DIV. They cannot be used as
inline styling to alter some words and not others. In the HTML sense,
they are block-level tags, and only tags that allow block-level
children (like the DIV) can contain them. The content of an H tag
itself can be any string of text, and/or any inline tag. You can wrap
an H1 around an image, a span, an A (link), etc.
Those inline tags all serve to alter the visual and behavioral meaning
of your H tag, but at the semantic level, the H tag is meant to
introduce what follows in the document structure. It’s very much like
outline mode in PowerPoint or Word, where you can see the points and
sub-points in a tree of descending importance.
So you have:
#H1 the header of all headers, there can only be one
The paragraph(s) that follow this tag are meant to illuminate and
explain that header.
##H2 the second header in the structure, there can be many, these are
“second most important” in the structure of the page, and introduce
sub-topics
The paragraph that follows each second level header further explains
that sub-topic.
###H3 the third-most-important header(s)
The paragraph that explains that third-level sub-topic.
…and so on.
So back to your example, if you had a headline and subhead, but they
were meant to be together, like say “Cheddar, the king of cheese”. And
you wanted to style Cheddar to appear big and bold and the rest to be
a subhead beneath that one big word, you could code it like this:
<h1>Cheddar,<span>the king of cheese</span></h1>
…and then use CSS to style the “subhead” like this:
h1 span {
display: block;
font-size: .6em;
font-style: italic;
font-weight: normal;
}
And that gets you a nice italic subhead without too much extra code to
throw everything off for the machines that are trying to read it and
make sense of it. This is fairly straightforward to do in Freeway,
too. All but the display:block and font-weight:normal part can be done
using the normal controls in the Edit Style dialog, and the other two
can be done using the Extended sub-dialog within the Edit Style dialog.
Understand though, the visual stuff is a gloss – a crutch for the
human reader – and the semantic stuff is there so that search engines
and other knowledge-mining apparatus can discern what relates to what
without the benefit of a lobe or two. Beyond a surface-level job of
Web design (lower-case d intended here) you have to think about these
non-human audiences, and engage the Big D design part of the job to
organize information so that it is palatable and digestible by those
audiences as well.
Walter
On Jan 23, 2011, at 11:09 AM, kitesurfer3 wrote:
Hi all,
I am a Freeway novice trying to improve my chances on the web and
have read about h1 and h2 but not sure if they are applied properly
on my website. www.olympiawindows.com
Can someone please take a look and let me know.
I don’t quite understand how it’s applied (or to what in my case):
1- to the word OLYMPIA? or Windows & Doors?
It can be to both (different fonts) or I am completely confused on
the concept.
2-on every page? to what (in my case)?
Please someone shed some light on this (if possible on plain
english) no HTML please (I know less than nothing-hence Freeway).
Thanks a lot in advance!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options