• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  
Followers 0

[html] a perfect web page?

Asked by game_over

Question

game_over    801
Posted

Is there such a thing?

I'm going to create a template from which i'll base around all websites i make. I'm just wondering if there is a perfect way to have a html page, I'll paste what i generally use now. I am also talking the lines of 100% search engine friendly, doc types, markup etc..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Page Title</title>
	<meta name="description" content="website description" />
	<meta name="keywords" content="key, words" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="en-us" />
	<meta name="robots" content="index,follow" /> 

	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

</body>
<html>

is there a better practice to use?anything missed or not needed?

Share this post

Link to post
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Tanoru    1
Posted

Use html5.

Share this post

Link to post
Share on other sites
  • 0
game_over    801
Posted

Use html5.

has everyone moved on to this now? i didn't think it was mainstream yet

Share this post

Link to post
Share on other sites
  • 0
Olly-    5
Posted

The HTML 5 standard hasn't even been completed yet, and I don't think most main stream browser support it yet.

Share this post

Link to post
Share on other sites
  • 0
Nick H.    9,945
Posted

I guess technically it's not mainstream, a majority of sites are still using HTML4. But how do things become mainstream? Websites implement the changes. If you're planning on building multiple sites in the future and using this as your base code, you may as well start using HTML5.

However, as far as that base code goes, it all looks in order to me.

Share this post

Link to post
Share on other sites
  • 0
The_Decryptor    1,105
Posted

I hope what Tanoru meant, was to use the HTML5 doctype.

<!DOCTYPE html>

You always want your page to be in standards mode (as opposed to quirks mode), the HTML5 doctype does that (The XHTML Transitional doctype gets you "Almost Standards Mode", which means it renders images in tables differently to what the spec says)

Edit: As for the content-type declaration, it has to come before any text, like the <title> tag (Even better, set the characted encoding on the HTTP Header value)

Edit 2: And set the language using the lang="" attribute on the <html>.

Share this post

Link to post
Share on other sites
  • 0
mrbaba    0
Posted

I've just started building a new website for myself, your code looks very similar to mine, with one noticeable difference:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
...

For mine I've gone with XHTML Strict 1.0, to me I prefer know my code validates to the strict standards.

Share this post

Link to post
Share on other sites
  • 0
game_over    801
Posted

The HTML 5 standard hasn't even been completed yet, and I don't think most main stream browser support it yet.

thats what i thought

I guess technically it's not mainstream, a majority of sites are still using HTML4. But how do things become mainstream? Websites implement the changes. If you're planning on building multiple sites in the future and using this as your base code, you may as well start using HTML5.

However, as far as that base code goes, it all looks in order to me.

but if not all browsers support it does that mean certain elements may not work?

I've just started building a new website for myself, your code looks very similar to mine, with one noticeable difference:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
...

For mine I've gone with XHTML Strict 1.0, to me I prefer know my code validates to the strict standards.

so i can remove

<meta http-equiv="content-language" content="en-us" />

and replace it with

lang="en"

in the html tag?

Share this post

Link to post
Share on other sites
  • 0
mrbaba    0
Posted
so i can remove

<meta http-equiv="content-language" content="en-us" />

and replace it with

lang="en"

in the html tag?

I wouldn't see that it would make a difference, link here.

Share this post

Link to post
Share on other sites
  • 0
RoomKid    15
Posted

Don't forget 

&lt;link rel="image_src" href="IMAGE TO REPRESENT PAGE" / &gt;

for Facebook and other social sites. :p

I haven't made the shift to HTML5 yet, not planning either. I'll wait for IE9.

Share this post

Link to post
Share on other sites
  • 0
Nick H.    9,945
Posted

Link

If you scroll down that site, it will show you which main browsers support what as far as HTML5 goes. I guess we shouldn't be launching in to HTML5 just yet...

Share this post

Link to post
Share on other sites
  • 0
Cupcakes    151
Posted

You could always use 'frameworks' that are already built and I agree with going towards HTML5. While not ALL older browsers will support it, you can make sure it's backwards compatible.

http://www.52framework.com/

http://baselinecss.com/

http://www.blueprintcss.org/

http://960.gs/

http://bluetrip.org/

http://sencss.kilianvalkhof.com/

Snippet from 52framework (HTML5 Framework)

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset=utf-8&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name="keywords" content="keywords, here" /&gt;
&lt;meta name="description" content="your description here" /&gt;
&lt;script src="js/modernizr-1.1.min.js"&gt;&lt;/script&gt;&lt;!-- this is the javascript allowing html5 to run in older browsers --&gt;
&lt;link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" title="html5doctor.com Reset Stylesheet" /&gt;
&lt;header&gt;
      &lt;nav&gt;
        	&lt;ul&gt;
            	&lt;li&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
&lt;footer&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;

Link

If you scroll down that site, it will show you which main browsers support what as far as HTML5 goes. I guess we shouldn't be launching in to HTML5 just yet...

I would say before you tell someone to NOT do something to look up to make sure you're either right or wrong. You can actually utilize HTML5 and be cross browser compliant.

http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/

http://remysharp.com/2009/01/07/html5-enabling-script/

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Share this post

Link to post
Share on other sites
  • 0
game_over    801
Posted

i'm not overly bothered about HTML5 yet, especially if we need to be adding extra stuff to make it compatible with all browsers. i'd rather just go with something that works now out of the bo.

links are bookmarked for future reference though, thanks :)

Share this post

Link to post
Share on other sites
  • 0
Cupcakes    151
Posted

Considering it's one line that you copy/paste into the <head>, that's awfully lazy of you, especially when the 52Framework is already working "out of the box."

But it's your own website, so you're free to do as you please. Just don't be surprised that when you're trying to make everything cross-browser compatible, you'll have "extra stuff" occasionally. :whistle:

Share this post

Link to post
Share on other sites
  • 0
+jamesyfx    362
Posted

Adding extra code for every browser makes a far better site than one with 'clean' code, & a design which is broken in other browsers. It makes your guests far happier.

Evidence of this is I ignored IE stuff I should have fixed for a while, was getting 50, maybe 60 uniques a day? Patched it all up, instantly getting over 350 uniques a day. It's weird how the web works. =P

Share this post

Link to post
Share on other sites
  • 0
+Majesticmerc    872
Posted

Off the back of this thread, I opted to go HTML5 for the next update to my site template, and for the most basic stuff, there is no difference in appearance between HTML5 and other document types. All I'm using in from the HTML5 spec is the doctype, the encoding meta-tag, and the semantic tags, and they work fine across all browsers (from what I've used so far).

[Technical Info Follows] The only differences you'll notice when using the semantic tags is in things like DOM traversal, since IE6/7/8 don't recognise the tags, and Firefox versions prior to 3.0 close the semantic tags early when a block element (such as a div) contained inside rendered. As a result, you can use the tags for semantics, but you can't apply CSS styles to them, or use them in JavaScript.

Share this post

Link to post
Share on other sites
  • 0
+M2Ys4U    97
Posted
http://caniuse.com/ - A great site for knowing what features are supported on which versions of the browsers.

Share this post

Link to post
Share on other sites
  • 0
Baines    5
Posted

What you're creating is called a framework, or skeleton site.

I use one myself for work.

I'd recommend looking at other frameworks to get ideas, but in the end the best idea is what you've done: create a personalised one.

What you've done so far is great.

If you're familiar with jQuery, I would plug that in to your framework as well. Along with any jQuery plugins you use a lot.

In my framework I include jquery1.4.3, jquery.lightbox, jquery.autogrow-textarea and jquery.innerfade (most of my clients request fading slideshows)

If you use flash a lot you should probably throw in swfobject too.

Then include another .js file with all your predefined jquery scripts like:

$(function() { 
 $('.gallery a').lightBox(); 
 $('textarea').autogrow(); 
 $('#image-fader').innerfade({
  speed: 'slow',
  timeout: 4000,
  type: 'sequence',
  containerheight: '250px'
  }); 
});

I also include some personal jQuery scripts like one that automatically creates span elements inside list elements in any list that has the class "colourlist".

This is for styling the list image in a different colour than the actual text.

If you find yourself using things like Fancybox, jCaption, or Superfish (for dropdown menus) alot, then you might as well plug those in too. You can always cut them out of a client's website if you don't use them in the end, but having them in your framework is very convenient if a client does request for one.

Along with the html, I would recommend creating a base css file with all the styles you use throughout all/most websites, including things like reseting elements and font styles

I don't actually have access to my framework (it's at work :( ) but off the top of my head I have styles like the following:

@import url('path/to/reset.css');
html, body {margin: 0; padding: 0; font-style: Arial, blah, blah, serif; font-size: 16px;}

Then in another section, separated by comment lines I have the styles I use a lot, like:

.clear {clear: both;}
.body {line-height: 1.5em; letter-spacing: 0.03em; word-spacing: 0.03em;}
.float-left {float: left; margin: 0 10px 10px 0;}
.float-right {float: right; margin: 0 0 10px 10px;}
.aside {border: 1px solid #ccc;}
.aside.float-left {padding-right: 10px; border-width: 0 1px 0 0;}
.aside.float-right {padding-left: 10px; border-width: 0 0 0 1px;}
etc.

These are the sorts of styles I'm always using, so it's handy to have them ready to go for me. I also include styles that automatically style input boxes and forms for me, along with styles for the jQuery plugins like lightbox and innerfade, and my "colourlist".

I build websites for lots of mum&pop shops, they often have galleries so I have some gallery styles in there too, things like:

.gallery a img {padding: 1px; border: 1px solid #ccc; margin: 3px;}
.gallery a:hover img {border-color: #222;}

Using this sort of thing you can end up with irrelevant code, code that was never used for one particular website. So I recommend running through it at the end of a project to see if you can cut out any styles or scripts that weren't used. However if the client ever requests changes in the future and you need to make use of one of your styles it's handy to have them there.

Finally, while creating your framework I would also recommend to take the time to create a logical folder structure that will save you time finding things in the future.

I use something like:

/ - html files, main css file

/images/ - usually empty

/images/fade/ - images used for innerfade

/images/layout/ - images used for the design of the website

/images/photos/ - images used for the gallery

/pages/ - if the website is made up of php and 'includes' the pages, I put the html pages here

/scripts/ - all the jquery scripts and the css files that relate to them.

/scripts/images - images that relate to the scripts. Things like lightbox labels, tipsy arrows, jquery ui sprites etc.

You may need to edit your js files to make them adapt to your new folder structure.

Hope that helps!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Question Listing

  • Recently Browsing   0 members

    No registered users viewing this page.