«

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

>> 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/> ?

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.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Gus Richter wrote:
> On 2/12/2013 6:55 AM, Tim W wrote:
>> On 12/02/2013 03:23, Gus Richter wrote:
>>> On 2/11/2013 7:32 PM, Tim W wrote:
>>>> 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.
>>>
>>
>> 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.
>

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>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2/12/2013 12:36 PM, Jonathan N. Little wrote:
> 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>

--
Gus

Gus Richter wrote:
> <!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" />



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2/12/2013 4:25 PM, Jonathan N. Little wrote:
> Gus Richter wrote:
>> <!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" />

On 2/12/2013 4:25 PM, Jonathan N. Little wrote:
> Gus Richter wrote:
>> <!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" />

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

--
Gus

On 2/12/2013 3:28 PM, Gus Richter wrote:
> 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>

--
Gus

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

> On 2/12/2013 3:28 PM, Gus Richter wrote:
>> 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>

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.

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

On 2/13/2013 6:44 AM, Jukka K. Korpela wrote:

> 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.

--
Gus

2013-02-13 15:53, Gus Richter wrote:

> 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.)

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