nesting instead of id ing??

[Tim W]

I am looking at the site template here:
http://www.html5-templates.co.uk/archive/temps/beadysite/
The Nav menu is in the html like this:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">blogs</a></li>
<li><a href="#">arcade</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">forums</a></li>
</ul>
</li>
</ul>

And the Nav has no id but is selected in the css as
#sidebar li li {.... }

I realise the futility of sometimes looking for purpose and design in a
world in which meaning is almost always elusive but here is my question:
Is it normal or common this nesting of lists instead of giving them a
class or an id? I have never seen it before. And Why?

Tim W

 

[richard]

I am looking at the site template here:
http://www.html5-templates.co.uk/archive/temps/beadysite/
The Nav menu is in the html like this:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">blogs</a></li>
<li><a href="#">arcade</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">forums</a></li>
</ul>
</li>
</ul>

And the Nav has no id but is selected in the css as
#sidebar li li {.... }

I realise the futility of sometimes looking for purpose and design in a
world in which meaning is almost always elusive but here is my question:
Is it normal or common this nesting of lists instead of giving them a
class or an id? I have never seen it before. And Why?

Tim W

this is rather common.
the container for the list has the id of #sidebar.
the css now defines further by stating that only the second level of <li>
should have this format.
You might also see something like #diebar li {}, which would give the first
level of <li> an entirely different format.

If you had another nested list in another container, this css styling
method would have no effect on that list.

 

[TimW]

this is rather common.

the container for the list has the id of #sidebar.

the css now defines further by stating that only the second level of <li>

should have this format.

You might also see something like #diebar li {}, which would give the first

level of <li> an entirely different format.



If you had another nested list in another container, this css styling

method would have no effect on that list.

My news server has conked out again. I posted the same message three tmes because I couldn't see it appear. Now I can't really get involved in any discussion except by google. Apologies, and thanks for the reply

Tim W

 

[Gus Richter]

I am looking at the site template here:
http://www.html5-templates.co.uk/archive/temps/beadysite/
The Nav menu is in the html like this:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">blogs</a></li>
<li><a href="#">arcade</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">forums</a></li>
</ul>
</li>
</ul>

And the Nav has no id but is selected in the css as
#sidebar li li {.... }

I realise the futility of sometimes looking for purpose and design in a
world in which meaning is almost always elusive but here is my question:
Is it normal or common this nesting of lists instead of giving them a
class or an id? I have never seen it before. And Why?

It is all content within (nested in) a DIV ID'd as sidebar.

#sidebar li li {..rules..}
Says:
The rule(s) shall apply to the li which is a child of another li, which
in turn is a child of the id ID'd as sidebar.
(nested in = child of = descendant of)

All CSS 2.1 selectora:
<http://www.w3.org/TR/CSS2/selector.html>

Specific to your question - descendant-selector:
<http://www.w3.org/TR/CSS2/selector.html#descendant-selectors>

 

[Tim W]

It is all content within (nested in) a DIV ID'd as sidebar.

#sidebar li li {..rules..}
Says:
The rule(s) shall apply to the li which is a child of another li, which
in turn is a child of the id ID'd as sidebar.
(nested in = child of = descendant of)

All CSS 2.1 selectora:
<http://www.w3.org/TR/CSS2/selector.html>

Specific to your question - descendant-selector:
<http://www.w3.org/TR/CSS2/selector.html#descendant-selectors>

Yeah I can see how it works and i can see that it does work but I can't
see why you would ever want to select the menu like that instead of just
id-ing it. Why declare a list inside alist which isn't a list when you
can just call it what it is?

Is there any reason?

Tim w

 

[Gus Richter]

Yeah I can see how it works and i can see that it does work but I can't
see why you would ever want to select the menu like that instead of just
id-ing it. Why declare a list inside alist which isn't a list when you
can just call it what it is?

Show how you would do it.

 

[Tim W]

Show how you would do it.

Instead of:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>
</li>
</ul>

Why not:

<h2>Menu </h2>
<ul id="menu">
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>

which istm is easier to understand, shorter, will be simpler to find in
the css and doesn't include a list of one item

 

[Jonathan N. Little]

Instead of:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>
</li>
</ul>

Why not:

<h2>Menu </h2>
<ul id="menu">
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>

which istm is easier to understand, shorter, will be simpler to find in
the css and doesn't include a list of one item

Simple, because like a lot of "pro" templates it's not very *pro*. Case
in point the <br /> following the UL block element.

 

[Tim W]

Simple, because like a lot of "pro" templates it's not very *pro*. Case
in point the <br /> following the UL block element.

I presume you are saying it's neater to separate elements with css than
by just bunging in a <br/> ? I am sure you are right but it's a finer
point really. This template was a bit of a muddle when I came to look at
it. Classes in the html not mentioned in the css, and classes and ids in
the css which weren't in the html, missing images, bits of redundant
junk code presumably from a previous use. But it's free.

Tim ?w

 

[Gus Richter]

Instead of:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>
</li>
</ul>

Why not:

<h2>Menu </h2>
<ul id="menu">
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>

which istm is easier to understand, shorter, will be simpler to find in
the css and doesn't include a list of one item

I understand now what you meant. Let's assume that he started off as you
did and then decided that he wanted the extra white space after the h2.
Since there are three other h2 for which he gave zero margins, he would
have to give the Menu h2 an id in order to cancel and/or readjust to his
liking. He may then have decided that it would be just as simple/handy
to use the h2 in another list item. There are many ways to skin a cat
and as long as it works ...... but I get your point.

 

[Jonathan N. Little]

On 12/02/2013 13:17, Jonathan N. Little wrote:

I presume you are saying it's neater to separate elements with css than
by just bunging in a <br/> ?

Yes and also makes more sense. <br> means break line but there is NO
line to break, it is preceded but a BLOCK element. If you need to
adjusted the top or bottom margins of a block then change the CSS
margin-top and/or margin-bottom of the said block element.

I am sure you are right but it's a finer
point really.

The finer point is maintainability. If you space out for example
paragraphs using trailing BRs (I have seen this)

<p>Sample text...</p>
<br>
<br>
<br>
<p>More sample text...</p>
<br>
<br>
<br>
<p>And more sample text...</p>
<br>
<br>
<br>

And then your client says that they you would half the distance between
each paragraphs and you have done this on an umpteen-paged site, now
that you do you?

In contrast via CSS stylesheet;

p {bottom-margin: 5em; }

With markup:

<p>Sample text...</p>
<p>More sample text...</p>
<p>And more sample tex
t...</p>

And to make the change edit one file and in place
p {bottom-margin: 2.5em; }

Done.

This template was a bit of a muddle when I came to look at
it. Classes in the html not mentioned in the css, and classes and ids in
the css which weren't in the html, missing images, bits of redundant
junk code presumably from a previous use. But it's free.

Again 'a lot of "pro" templates it's not very *pro*.' There is just no
substitute for knowing what you are doing, except hiring somebody else
that does know what they are doing.

 

[Jonathan N. Little]

I understand now what you meant. Let's assume that he started off as you
did and then decided that he wanted the extra white space after the h2.
Since there are three other h2 for which he gave zero margins, he would
have to give the Menu h2 an id in order to cancel and/or readjust to his
liking. He may then have decided that it would be just as simple/handy
to use the h2 in another list item. There are many ways to skin a cat
and as long as it works ...... but I get your point.

The only other reason other than incompetence (a bit strong a word but
the rest of the template displays amateur-hour errors) would be submenus
or items within the "list"

<ul id="sidebar">
<li>
<h2>Menu</h2>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</li>
<li>
<h2>Features</h2>
<ul>
<li>Featured item</li>
<li>Featured item</li>
<li>Featured item</li>
<li>Featured item</li>
</ul>
</li>
<li>
<h2>Adverts ?</h2>
<ul>
<li>Ad</li>
<li>Ad</li>
<li>Ad</li>
<li>Ad</li>
</ul>
</li>
</ul>

 

[Gus Richter]

The only other reason other than incompetence (a bit strong a word but
the rest of the template displays amateur-hour errors) would be submenus
or items within the "list"

Agreed.
Here are some of my thoughts since the page professes to be a template
for HTML5:

1. It uses XHTML construct, whereas it serves the page up as text/html,
2. it uses <header> and <footer> only, whereas <nav>, <section>,
<article> and <aside> should have been used as well for a "template".
The <main> element is probably too new for this template.
3. although the type attribute used for stylesheet links such as
type="text/plain" or type="text/css" may be used, the latter is not
necessary in HTML5 since it is understood to be text/css.
4. although in HTML5 the values are not required to be quoted, it is
required in some instances and therefore it is good practice to quote
all values such as in the template <html lang="en"> and <meta
charset="UTF-8"> are not quoted whereas others in the template are.

I note that the <meta charset=UTF-8> is the first item in <head>
which is as it should be in order to avoid a security vulnerability.

This is what I consider as a "barebones" template for HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template for HTML5</title>
<link rel="stylesheet" href="whatever.css" >
<style>
/* Rules for Embedded stylesheet */
</style>
</head>
<body>
<!-- This is an HTML5 Template -->
This is an HTML5 Template!
</body>
</html>

 

[Jonathan N. Little]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template for HTML5</title>
<link rel="stylesheet" href="whatever.css" >

<link rel="stylesheet" href="whatever.css" />

;-)

 

[Gus Richter]

<link rel="stylesheet" href="whatever.css" />

 

[Gus Richter]

<link rel="stylesheet" href="whatever.css" />

Served as text/html (sorry about the accidental space):
<link rel="stylesheet" href="whatever.css">

 

[Gus Richter]

This is what I consider as a "barebones" template for HTML5:

Added script element:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template for HTML5</title>
<link rel="stylesheet" href="whatever.css" >
<style>
/* Rules for Embedded stylesheet */
</style>
<script>
// Javascript is the default
</script>
</head>
<body>
<!-- This is an HTML5 Template -->
This is an HTML5 Template!
</body>
</html>

 

[Jukka K. Korpela]

2013-02-13 12:48, Gus Richter wrote under Subject
"Re: nesting instead of id ing??":

Added script element:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template for HTML5</title>
<link rel="stylesheet" href="whatever.css" >
<style>
/* Rules for Embedded stylesheet */
</style>
<script>
// Javascript is the default
</script>
</head>
<body>
<!-- This is an HTML5 Template -->
This is an HTML5 Template!
</body>
</html>

There's a lot one could say about this, but I will only make two
comments, in rather opposite directions:

If you want to have good general template, consider reading the HTML5
Boilerplate template from http://html5boilerplate.com and, once you have
understood its bits and pieces, create your custom version of it. It
will handle many quirks and oddities in browsers, some of which might be
of little practical importance, but why not take a safe route when it is
so easy?

On the other hand, if you want a minimal HTML document for an "HTML5
application", here it is:

<!doctype html><script src=app.js></script>

It doesn't validate, due to lack of <title> element, but it works. You
can make app.js add a <title> element, as well as any other content in
the document and any <style> element or <link> element. The <!doctype
html> string is needed to put browsers into Standards Mode (in
JavaScript, the variable that tells the browser mode is read-only, and
so is the variable containing the doctype string).

I'm not recommending the minimal HTML for an HTML5 application for any
other purpose than making a point about the role of HTML tags in "HTML5
applications". You really need just two tags. You will need *elements*
of course, but you can create them in JavaScript without using any tags.

 

[Gus Richter]

There's a lot one could say about this

Not so, if one understands what is presented.

If you want to have good general template, consider reading the HTML5
Boilerplate template from http://html5boilerplate.com and, once you have
understood its bits and pieces, create your custom version of it. It
will handle many quirks and oddities in browsers, some of which might be
of little practical importance, but why not take a safe route when it is
so easy?

The "HTML5 Boilerplate" is excellent and I'm familiar with it (as well
as with Modernizr and Normalize.css), even though you suggest that I
need to understand its bits and pieces. Granted that I am weak in areas
which don't relate to my needs. Who isn't? Its basic structure as
presented in its documentation is NOT a basic structure. Compare it to
mine, if you please. Your easy and safe route is not comparable to my
"Template" which is a simple, *basic* structure of an HTML5 document - a
starting point of understanding and sufficient for a simple document.
The HTML5 Boilerplate goes beyond my HTML5 Template.

Two demos with the document structured using my Template as a guide:
<http://tinyurl.com/d6bgsls>
<http://tinyurl.com/6nhz37q>

How would you see HTML Boilerplate making it safe and in an easy way for
any of the two demos?

Coming back to your first quoted portion above, what would be a few
examples of your "There's a lot one could say about this" for the two demos?

On the other hand, if you want a minimal HTML document for an "HTML5
application", here it is:

I am not interested in a minimal version. Somewhere, either in this
thread or elsewhere, I pointed out that I recommend to quote values,
although it is optional. In fact I recommend to use all optional items.
My "Template", which I submitted, simply demonstrates the basic
structure for an HTML5 document/site to be served as text/html. It's
easy to copy as a start for a new document and delete portions not needed.

 

[Jukka K. Korpela]

Coming back to your first quoted portion above, what would be a few
examples of your "There's a lot one could say about this" for the two
demos?

A template should be evaluated as a template, not on the basis of some
creations based on it. And I'm not sure whether it is useful to analyze
your template, but on request, here are three comments that first came
into my mind:

1) <html lang="en">
A template should not have a particular language code wired in. There
are far too many web pages that claim to be in English but aren't,
either because they were based on wrong templates or because some
authoring software spits out lang="en" no matter what.

2) <head>
Not needed, and does not serve a useful purpose.

3) <title>Template for HTML5</title>
No reason to put any text inside the element. It serves no purpose, it
just needs to be erased when actually using the template, and there
*are* people who just won't change the text.

4) <style>
Embedded style sheets should be avoided. There are situations where they
are a comfortable tool, but a template should not encourage the use of
embedded CSS.

5) <script>
Linked JavaScript files should be preferred. And if embedded JS is used,
it should often go the end of the body, or otherwise inside the body,
not in the head. (Think about simply referring to elements by their ids
in straight code not wrapped in functions.)