[html] a perfect web page?

7,238 · June 11, 2010

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

&lt;!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&gt;
	&lt;title&gt;Page Title&lt;/title&gt;
	&lt;meta name="description" content="website description" /&gt;
	&lt;meta name="keywords" content="key, words" /&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
	&lt;meta http-equiv="content-language" content="en-us" /&gt;
	&lt;meta name="robots" content="index,follow" /&gt; 

	&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;html&gt;

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

June 11, 2010

Use html5.

7,238 · June 11, 2010

On 11/06/2010 at 14:00, Tanoru said:

Use html5.

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

June 11, 2010

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

20,264 · June 11, 2010

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.

20,536 · June 11, 2010

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

June 11, 2010

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">t;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.

7,238 · June 11, 2010

On 11/06/2010 at 14:12, olly86 said:

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

On 11/06/2010 at 14:14, Intrinsica said:

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?

On 11/06/2010 at 14:55, mrbaba said:
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">t;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

and replace it with

lang="en"

in the html tag?

June 11, 2010

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

1,593 · June 11, 2010

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.

20,264 · June 11, 2010

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

2,656 · June 11, 2010

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"></script><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;

On 11/06/2010 at 16:44, Intrinsica said:

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/

7,238 · June 11, 2010

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

2,656 · June 11, 2010

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:

8,424 · June 11, 2010

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

6,190 · June 11, 2010

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.

8,141 · June 11, 2010

http://caniuse.com/ - A great site for knowing what features are supported on which versions of the browsers.

June 12, 2010

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!

Sign In

[html] a perfect web page?

Question

game_over

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Tanoru

Link to comment

Share on other sites

game_over

Link to comment

Share on other sites

Olly-

Link to comment

Share on other sites

Nick H. Supervisor

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

mrbaba

Link to comment

Share on other sites

game_over

Link to comment

Share on other sites

mrbaba

Link to comment

Share on other sites

RoomKid

Link to comment

Share on other sites

Nick H. Supervisor

Link to comment

Share on other sites

Cupcakes

Link to comment

Share on other sites

game_over

Link to comment

Share on other sites

Cupcakes

Link to comment

Share on other sites

+jamesyfx Subscriber²

Link to comment

Share on other sites

+Majesticmerc MVC

Link to comment

Share on other sites

+M2Ys4U Subscriber¹

Link to comment

Share on other sites

Baines

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker