473,566 Members | 3,004 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Heading-related HTML issues

http://members.shaw.ca/davepatton/gps.html

In another newsgroup(relat ed to GPS), in regards to
the above page, someone said:
----------------------------------------------------------------------
That page has quite a cryptic title: "CIS: GPS". I saved the URL in my
browser but changed the title to "Patton's GPS pages".

The headings are rather haphazard. For example, the first one ("On
This Page") is a third level heading (an <h3>), which looks strange
because it doesn't fall under an <h2>.

A little distance down the page, "Overview" is a first level heading.
Below that are titles which to me look like they deserve to be
headings, e.g., "GPS resources". However, they're just ordinary text.
I think "Links" definitely should be a heading, since there's a link
at the top of the page to jump to this section.
----------------------------------------------------------------------

The "CIS" refers to the initials of my company, and I agree I should
change it - maybe to something like "Patton"?

The reason for the <h3>On This Page:</h3> being near the top of the
page was that originally the navigation menu was at the bottom of the
HTML, but when viewed without CSS support, it meant the navigation
menu was at the bottom of the page, so I moved it to the top of the
HTML, without making changes to the heading structure :-(

I want to change the first level "Overview" headings that appear on
some of my pages, because, taken by themselves, they don't provide
any context(e.g. to search engine indexing). On the above page,
maybe something like "GPS Information Overview" would be better?

"GPS Resources" is marked up as:
<div class="heading1 "><a name="resources ">GPS Resources</a></div>
rather than, for example, as a second level heading. I can't recall
exactly why I did that, but it was at the time I was learning CSS,
and probably isn't "the correct way to do things".

Anyone care to offer any suggestions, either about the proper
way to structure the page/headings, or anything else on my site?
Thanks

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/
Jul 20 '05 #1
26 2417
Dave Patton wrote:
http://members.shaw.ca/davepatton/gps.html
<snip>Descripti on of page structure</snip>
Anyone care to offer any suggestions, either about the proper
way to structure the page/headings, or anything else on my site?
Thanks


This is easy. Write down, on a piece of paper, the structure you
want for you headings. Write it in a heirachy, so that you can see what
level each heading is at.

Start with the document title, this is heading 1. Then, list all the
section headings below that, indented one level. Then repeat for sub
headings.
For example:

CIS (<h1>)
Overview (<h2>)
Sub Heading 1 (<h3>)
Sub Heading 2 (<h3>)
Global Positioning System (<h2>)
At this Site (<h2>)

This may not be accurate, I didn't read the whole content, so I don't
understand the correct structure. Use it as a guide only.

You can either put the site navigation at the top or bottom. Either
way, be sure to include a skip link to either skip to content or skip to
navigation, depending whether it's at the top or bottom. You can hide
this skip link with CSS, but it's visible when the document is not styled.

After you've worked out you're structure, mark it up using the
correct heading elements. Wrap each heading and its associated content
within a <div>. The CSS Zen Garden does this, and I do it on my site.
So you should end up with some code like this.
<body id="cis">
<div id="container" >
<h1><acronym title="C? I? S?">CIS</acronym></h1>
<!-- Fill in whatever CIS stands for in the title attribute -->
<p>content...
<div>
<h2>Overview</h2>
<p>content... </p>
<div>
<h3>Sub Heading 1</h3>
<p>content... </p>
</div>
<div>
<h3>Sub Heading 2</h3>
<p>content... </p>
</div>
</div>
<div>
<h2>Global Positioning System</h2>
<p>content... </p>
</div>
<div>
<h2>At this Site</h2>
<ul>
<li>menu items...</li>
</ul>
</div>
</div>
</body>

When you're done, validate you're page, with the outline option
selected. The outline should match the way you've structured your
headings. This link will validate you're current site, and show the
heading structure outline at the end.
http://validator.w3.org/check?uri=ht...ne=1&verbose=1

--
Lachlan Hunt
http://www.lachy.id.au/
la**********@la chy.id.au.updat e.virus.scanners

Remove .update.virus.s canners to email me,
NO SPAM and NO VIRUSES!!!
Jul 20 '05 #2
Lachlan Hunt wrote:
Dave Patton wrote:
http://members.shaw.ca/davepatton/gps.html
<snip>Descripti on of page structure</snip>
Anyone care to offer any suggestions, either about the proper
way to structure the page/headings, or anything else on my site?
Thanks

[snip] After you've worked out you're structure, mark it up using the
correct heading elements. Wrap each heading and its associated
content within a <div>. The CSS Zen Garden does this, and I do it on
my site.

[snip]

Interesting. I've never considered wrapping *all* headers+content this way.

However, I often do this for deeper nesting, and I then use the following
rule. It indents the header+content. It works progressively when nested, of
course. It can make it visually clearer what the structure is, without just
relying on different styles for the headers:

div.section {
margin-left: 3em;
}

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #3

"Lachlan Hunt" <la**********@l achy.id.au.upda te.virus.scanne rs> wrote in
message news:on******** ******@news-server.bigpond. net.au...
Dave Patton wrote:
http://members.shaw.ca/davepatton/gps.html
<snip>Descripti on of page structure</snip>
Anyone care to offer any suggestions, either about the proper
way to structure the page/headings, or anything else on my site?
Thanks


This is easy. Write down, on a piece of paper, the structure you
want for you headings. Write it in a heirachy, so that you can see what
level each heading is at.

[snip]
After you've worked out you're structure, mark it up using the
correct heading elements. Wrap each heading and its associated content
within a <div>. The CSS Zen Garden does this, and I do it on my site.
So you should end up with some code like this.
<body id="cis">
<div id="container" >
<h1><acronym title="C? I? S?">CIS</acronym></h1>
<!-- Fill in whatever CIS stands for in the title attribute -->
<p>content...
<div>
<h2>Overview</h2>
<p>content... </p>
<div>
<h3>Sub Heading 1</h3>
<p>content... </p>
</div>
<div>
<h3>Sub Heading 2</h3>
<p>content... </p>
</div>
</div>
<div>
<h2>Global Positioning System</h2>
<p>content... </p>
</div>
<div>
<h2>At this Site</h2>
<ul>
<li>menu items...</li>
</ul>
</div>
</div>
</body>


This makes eminently good sense. It applies a real hierarchical structure to
the page, rather than one that is only implied by the alternation of heading
elements and paragraphs. It lends itself to easy and flexible styling, and
can facilitate the implementation of certain features one might occasionally
want to code in client-side script.

Jul 20 '05 #4
Harlan Messinger wrote:
This makes eminently good sense. It applies a real hierarchical structure to
the page, rather than one that is only implied by the alternation of heading
elements and paragraphs. It lends itself to easy and flexible styling, and
can facilitate the implementation of certain features one might occasionally
want to code in client-side script.


Yes, it is what <div> is for — to indicate structural divisions,
however XHTML 2.0's <section> element is slightly more semantic for the
purpose I demonstrated, leaving <div> for more generic grouping or
dividing of document elements and sections. I like to use <div
class="section" >, in places where I would normally use <section> if I
were writing XHTML 2.0, which helps to distinguish them from more
general uses of <div>. I just omitted that to keep the example simple.
Basically, the idea is to make the transition to XHTML 2.0 in the future
in the future easy, as soon as it becomes a standard and is supported in
Mozilla, Opera and Safari; most likely not IE [1].

Also, the structure helps to see what level heading should be used,
especially when authoring long documents (assuming the indentation has
been kept consistent).

[1] It's already a foregone conclusion that IE won't even be supporting
XHTML 1.0 when Windows Longhorn is released; at least according to Hixie
[1a], so I just don't care about IE any more (not that I ever cared much
anyway). My site won't be supporting it now, except for virtually
unstyled text/html, for backwards compatibility with other older UAs.
[1a] http://ln.hixie.ch/?start=1086158925&order=-1&count=1

--
Lachlan Hunt
http://www.lachy.id.au/
la**********@la chy.id.au.updat e.virus.scanners

Remove .update.virus.s canners to email me,
NO SPAM and NO VIRUSES!!!
Jul 20 '05 #5

"Lachlan Hunt" <la**********@l achy.id.au.upda te.virus.scanne rs> wrote in
message news:F_******** ********@news-server.bigpond. net.au...
Harlan Messinger wrote:
This makes eminently good sense. It applies a real hierarchical structure to the page, rather than one that is only implied by the alternation of heading elements and paragraphs. It lends itself to easy and flexible styling, and can facilitate the implementation of certain features one might occasionally want to code in client-side script.


Yes, it is what <div> is for — to indicate structural divisions,
however XHTML 2.0's <section> element is slightly more semantic for the
purpose I demonstrated, leaving <div> for more generic grouping or


It's not clear to me how "section" is more semantically related to the
*division* of a document into logical *sections* (or the sectioning into
logical divisions) than "div" is.

Jul 20 '05 #6
Harlan Messinger wrote:
"Lachlan Hunt" <la**********@l achy.id.au.upda te.virus.scanne rs> wrote

[snip]
Yes, it is what <div> is for - to indicate structural divisions,
however XHTML 2.0's <section> element is slightly more semantic for
the purpose I demonstrated, leaving <div> for more generic grouping
or


It's not clear to me how "section" is more semantically related to the
*division* of a document into logical *sections* (or the sectioning
into logical divisions) than "div" is.


What I found attractive about "section" was that it didn't require an explicit
statement of the header-level. It simply had a header.

If a section was nested inside a 2nd-level section, its header was equivalent
(in some sense) to a <h3>. Move that section to a position in a 1st-level
section and that header is immediately equivalent to a <h2>. That is a crude
way of thinking about it. But it illustrates that "section" is
context-dependent. And that is semantically important.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #7

"Barry Pearson" <ne**@childsupp ortanalysis.co. uk> wrote in message
news:bk0yc.45$s j7.31@newsfe6-win...
Harlan Messinger wrote:
"Lachlan Hunt" <la**********@l achy.id.au.upda te.virus.scanne rs> wrote [snip]
Yes, it is what <div> is for - to indicate structural divisions,
however XHTML 2.0's <section> element is slightly more semantic for
the purpose I demonstrated, leaving <div> for more generic grouping
or


It's not clear to me how "section" is more semantically related to the
*division* of a document into logical *sections* (or the sectioning
into logical divisions) than "div" is.


What I found attractive about "section" was that it didn't require an

explicit statement of the header-level. It simply had a header.
Ah. I should have gone and looked into the details. Even cooler than I
thought.

If a section was nested inside a 2nd-level section, its header was equivalent (in some sense) to a <h3>. Move that section to a position in a 1st-level
section and that header is immediately equivalent to a <h2>. That is a crude way of thinking about it. But it illustrates that "section" is
context-dependent. And that is semantically important.


Jul 20 '05 #8
Dave Patton <no**@none.co m> wrote:
http://members.shaw.ca/davepatton/gps.html

In another newsgroup(relat ed to GPS), in regards to
the above page, someone said:
----------------------------------------------------------------------
That page has quite a cryptic title: "CIS: GPS". I saved the URL in my
browser but changed the title to "Patton's GPS pages".
That's a quite understandable move; the user probably knows what "GPS"
is, and he wants to distinguish your page from all the other GPS pages he
has bookmarked.

But in a more general perspective, "Patton's GPS pages" isn't informative
enough. What's GPS? I'm pretty sure I could find 42 meanings for that
abbreviation, and I'm sure there are people who do not know any of them.
And Patton _who_? The general?

As the good old HTML 2.0 specification said, "The title should identify
the contents of the document in a global context. A short title, such as
"Introducti on" may be meaningless out of context. A title such as
"Introducti on to HTML Elements" is more appropriate." However, this is
not sufficient; there are, or could be, zillions of pages with the title
"Introducti on to HTML Elements".

I would suggest something like the following:
<title>Global Positioning System (GPS) material, collected by Dave
Patton</title>
The headings are rather haphazard. For example, the first one ("On
This Page") is a third level heading (an <h3>), which looks strange
because it doesn't fall under an <h2>.
Apparently, the table of content should have <h2>. And the <h1> should
describe the page as a whole; "Overview" says remarkably little, and does
not even vaguely describe the _page_. The <title> element's content might
be a good starting point.

By the way, if you use CSS positioning to set the ToC on the right, it
would probably be better to put it _last_ in HTML markup. That way it
would not disturb people using text browsers, speech browsers, and other
linearizing browsers too much. (They don't want to see or hear the menu
each and every time they move from one page to another on your site.)
The "CIS" refers to the initials of my company, and I agree I should
change it - maybe to something like "Patton"?
Spelling out what it stands for (maybe followed by "(CIS)") would be OK.
This would associate the site with a company (maybe a small one) rather
than a private person.
The reason for the <h3>On This Page:</h3> being near the top of the
page was that originally the navigation menu was at the bottom of the
HTML, but when viewed without CSS support, it meant the navigation
menu was at the bottom of the page, so I moved it to the top of the
HTML, without making changes to the heading structure :-(


If it were a 3rd level heading, it should have <h3> irrespectively of its
placement. But it's really 2nd level. And I think the move was wrong,
except perhaps on the _main_ page. When entering a main page, the user
_might_ wish to hear the table of content first; when entering a subpage,
oh no, people don't want to hear again and again what other pages there
are.

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

Jul 20 '05 #9
Tim
On Sat, 12 Jun 2004 15:41:09 +0000 (UTC),
"Jukka K. Korpela" <jk******@cs.tu t.fi> posted:
By the way, if you use CSS positioning to set the ToC on the right, it
would probably be better to put it _last_ in HTML markup. That way it
would not disturb people using text browsers, speech browsers, and other
linearizing browsers too much. (They don't want to see or hear the menu
each and every time they move from one page to another on your site.)


This is something that I've been playing with recently. With it at the
top, you can float it to the right, and it positions fairly well in all
browsers, and doesn't end up with text drawing over the top of text (things
flow around each other). But if it's at the bottom and you try and
reposition it at the top, that doesn't work in various browsers (they
ignore the positioning), you have to use absolute positions and sizes
(which you can't do for text, because text is an unpredictable size), and
you have to deliberately make a blank space for it in some other way, so
that it doesn't get dumped over the top of the text on the page.

You're stuck choosing between two bad options, and I've found the first one
to be less of a problem for most browsers.

--
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.
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
1505
by: duncan.lovett | last post by:
I want to generate dynamic heading images, but I won't be able to use the GD Library, ImageMagick or any other plug-in to generate an image on the fly due to hosting restrictions. I have seen, in the past, sites that generate headings from a set of Gif images, each corresponding to a letter in the string that is being turned into a...
0
2158
by: hxin | last post by:
Hi all, Just a quick question here. May I know how to get a result without heading in Mysql (like "set heading off" in Oracle) ? Thanks and regards, Helen
2
2268
by: John B. | last post by:
I'm using <h1>MY HEADING</h1> to display a title, however I would like to show one short line of text beside it<p>The short line of text</p>, and then go back to normal. Here's an example of how it keeps displaying now: ====================== MY HEADING The short line of text
1
1470
by: Tony Carnell | last post by:
Hi, Now here's an interesting (and highly annoying) thing! I'm working on a webpage, and am having a display 'glitch' when viewed in IE6 (oh no, not that non-standards compliant piece of rubbish I hear you cry). Believe me, if IE6 didn't account for 9x% of the Web browser market I'd forget it but it does so it would be good to correct it....
1
1981
by: Larry R Harrison Jr | last post by:
I have Javascript called in HTML which runs a slide show. One thing that the HTML does is it has a "heading" just over the picture that never changes. I'd like to be able to have this heading be replaced with some other value to match the slide. The slides are run with code like this; this is just part of it: <select name="slide"...
5
5666
by: Charles Law | last post by:
I have a document in the following style 1 Introduction 2 Next Heading 2.1 Sub-section Some text ... 2.2 Another Sub-section 2.2.1 Getting deeper 3 Another Major Heading ....
3
1673
by: dennist685 | last post by:
Format text as a heading I'm progressing through a walkthrough on DetailsView control Early on it says Type Edit Employees, select the text, and then format the text as a heading. I clicked format, then styles, but nowhere found how to make selected text a heading.
5
3327
by: MaxiWheat | last post by:
Hi, I would like to expose a situation that I would like to have informations about. Let's suppose I have a table that looks like this : <table cellspacing="0" cellpadding="0" border ="0"> <tr> <td><h1>Heading Something</h1></td>
1
1796
by: satya.mahesh | last post by:
Hi All, I am working on a problem which "eliminates blank lines in export (between headings and when a heading is empty)". I want a macro which will do this job for me. For e.g: Heading1 Heading2
0
1417
by: xavier.boneu | last post by:
Hi! I beg you to give me a hand on the following issue. I would like to know how could I read the field's heading (not the field name) using standard SQL. I created a new table and each field has its name, data type *and* heading.
0
7673
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7893
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8109
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7953
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6263
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5485
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3643
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1202
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
926
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.