XHTML anyone? Help me settle a debate

Adam Howard

Adam Howard

Well-known member
Maybe someone can settle a debate (argument) for me. (Please & thank you)

So I've never written an XHMTL document before. I'm use to HTML and a little (small) amount of PHP (mostly HTML).

For a cover page, I decided I need a little bit of cross code and here is what I came up with -vs- a friends. Mine is smaller & more compact and his is double the size. Both of them validate, but he claims mine is not correct.

Mine:

Code: 
<!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" xml:lang="en" lang="en">
<head>
 <title>SociallyUncensored.eu : The complete idiot's guide to an uncensored world</title> <meta name="Keywords" content="entertainment, news, investments, movies, games reviews, books, politics, technology, advertising, media, computers, programming, legal, automotive, wall street, stocks, investments, mac, pc, art, fitness, video games, cell phones, business"/> <meta name="Description" content="SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything"/> <meta name="ROBOTS" content="INDEX, FOLLOW"/> <style type="text/css"> <!-- body { background-color: #000000; background-repeat: repeat-x; } --> </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="code/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="code/bg.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body> <center> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18520392-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <a href="/forums"><img src="images/logo.png" alt="Click to Enter" title="Click to Enter" border="0" height="438" width="700"/></a> <p> </p> <p align="center"><font color="#999999" face="Geneva, Arial, Helvetica, sans-serif" size="2"> SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything<br /> Copyright &copy; 2011 SociallyUncensored.eu All Rights Reserved</font></p> </center> </body> </html>

His

Code: 
<!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" xml:lang="en" lang="en">
<head>
<title>SociallyUncensored.eu : The complete idiot's guide to an uncensored world</title>
<meta name="Keywords" content="entertainment, news, investments, movies, games reviews, books, politics, technology, advertising, media, computers, programming, legal, automotive, wall street, stocks, investments, mac, pc, art, fitness, video games, cell phones, business" />
<meta name="Description" content="SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything" />
<meta name="ROBOTS" content="INDEX, FOLLOW" />
<style type="text/css">
/*<![CDATA[*/
 <!-- body { background-color: #000000; background-repeat: repeat-x; } -->
/*]]>*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="code/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8">
</script>
<script src="code/bg.js" type="text/javascript" charset="utf-8">
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
 div.c2 {text-align: center}
 p.c1 {color: #999999; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 80%; text-align: center}
/*]]>*/
</style>
</head>
<body>
<div class="c2"><script type="text/javascript">
//<![CDATA[
 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18520392-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
//]]>
</script> <a href="/forums"><img src="images/logo.png" alt="Click to Enter" title="Click to Enter" border="0" height="438" width="700" /></a>
<p class="c1">SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything<br />
Copyright &copy; 2011 SociallyUncensored.eu All Rights Reserved</p>
</div>
</body>
</html>

Thoughts?
 
At a glance, yours seems better, especially considering the lack of inline CSS/extra bloat. If it works & validates, there's nothing wrong with it, though for SEO purposes it may be a good idea to copy over his description/keywords meta data into yours (effect will arguably be minimal, but even then).

Bottom line, I see nothing wrong with your code, and I do see things wrong with his code.

EDIT: On the topic of that keyword meta data, may want to tone that down to less keywords, see http://en.wikipedia.org/wiki/Keyword_stuffing
 
TheVisitors said:
Maybe someone can settle a debate (argument) for me. (Please & thank you)

So I've never written an XHMTL document before. I'm use to HTML and a little (small) amount of PHP (mostly HTML).

For a cover page, I decided I need a little bit of cross code and here is what I came up with -vs- a friends. Mine is smaller & more compact and his is double the size. Both of them validate, but he claims mine is not correct.

Mine:

Code: 
<!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" xml:lang="en" lang="en">
<head>
<title>SociallyUncensored.eu : The complete idiot's guide to an uncensored world</title> <meta name="Keywords" content="entertainment, news, investments, movies, games reviews, books, politics, technology, advertising, media, computers, programming, legal, automotive, wall street, stocks, investments, mac, pc, art, fitness, video games, cell phones, business"/> <meta name="Description" content="SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything"/> <meta name="ROBOTS" content="INDEX, FOLLOW"/> <style type="text/css"> <!-- body { background-color: #000000; background-repeat: repeat-x; } --> </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="code/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="code/bg.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body> <center> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18520392-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <a href="/forums"><img src="images/logo.png" alt="Click to Enter" title="Click to Enter" border="0" height="438" width="700"/></a> <p> </p> <p align="center"><font color="#999999" face="Geneva, Arial, Helvetica, sans-serif" size="2"> SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything<br /> Copyright &copy; 2011 SociallyUncensored.eu All Rights Reserved</font></p> </center> </body> </html>

His

Code: 
<!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" xml:lang="en" lang="en">
<head>
<title>SociallyUncensored.eu : The complete idiot's guide to an uncensored world</title>
<meta name="Keywords" content="entertainment, news, investments, movies, games reviews, books, politics, technology, advertising, media, computers, programming, legal, automotive, wall street, stocks, investments, mac, pc, art, fitness, video games, cell phones, business" />
<meta name="Description" content="SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything" />
<meta name="ROBOTS" content="INDEX, FOLLOW" />
<style type="text/css">
/*<![CDATA[*/
<!-- body { background-color: #000000; background-repeat: repeat-x; } -->
/*]]>*/
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="code/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8">
</script>
<script src="code/bg.js" type="text/javascript" charset="utf-8">
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
div.c2 {text-align: center}
p.c1 {color: #999999; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 80%; text-align: center}
/*]]>*/
</style>
</head>
<body>
<div class="c2"><script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18520392-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
//]]>
</script> <a href="/forums"><img src="images/logo.png" alt="Click to Enter" title="Click to Enter" border="0" height="438" width="700" /></a>
<p class="c1">SociallyUncensored.eu offers uncensored political, religious and philosophical discussions and debates. Talk freely about anything<br />
Copyright &copy; 2011 SociallyUncensored.eu All Rights Reserved</p>
</div>
</body>
</html>

Thoughts?
Click to expand...

Semantically his code is better.

TheVisitors said:
True, but Google isn't the only search page out there such as...

Bing
Yahoo
Ask
Yandex
Baidu
Lycos
Giga Blast
Alexa
Click to expand...

Chances are that none of them really pay attention to Keywords any longer due to people filling them with garbage to game the system.
 
Google don't use meta description for ranking purposes (in case anyone is still holding onto that decade old notion), it only uses it when a better description cannot be automatically obtained from the page text via snippet.

If you have a good page copywritten specifically to target a keyword, then you should drop the meta description, because you don't want Google using it when you have intentionally stacked a page semantically to drive click throughs from the SERPS. If Google uses your default description fed, that can affect click through in a negative capacity.
 
TheVisitors said:
Would be interesting to see how HTML5 would load, but it's not widely supported (yet).

Also would require me to learn a few things.
Click to expand...
Uh...

Other than older versions of IE HTML5 is pretty widely supported, and with older versions it fallbacks to regular HTML.

Really nothing to lose by adopting HTML5 now.
 
TheVisitors said:
Would be interesting to see how HTML5 would load, but it's not widely supported (yet).
Click to expand...
That's a myth.

All modern browsers will render HTML5 compliant pages just fine. New tags may not be fully supported, but they don't hurt either and there is no rule that forces you to use them anyway. Unless your page relies on new HTML features, it will display just fine on almost any commonly used browser.
 
I guess the benefit would be not depending on 2 js & 1 css files and having it all load in html

But I'm not sure if that would be really possible or not. Would also question on the page load.
 
The answer is easy.

If if validates, the code is syntactically correct. Period.

You can argue over things like semantics and SEO for weeks without reaching a final conclusion, but telling whether a piece of HTML code is correct or not is fairly easy.

Your code is fine with the exception of the formatting tags and attributes you are using (center, align, border). In HTML5, most of these things are no longer valid, so I wouldn't use them and do all the layout/formatting with CSS.

A couple of changes, and it's valid HTML5 code.
 
Jethro said:
Currently in the process. Trick seems to be learning when to use "." when to use "#" and when to swear at IE ;)
Click to expand...

Screen shot 2010-09-19 at 7.15.42 PM.webp


I really wish it would die a painful death
 

Similar threads

Frode789
Help needed - Caching and speed improvements
Replies
5
Views
1K
Kirby
K
oO5 Dynasty
  • Question Question
XF 2.2 Hey, I need help keeping contents of CSS Flexbox Responsive Layout inside the Notices box boundaries on mobile
Replies
0
Views
538
oO5 Dynasty
oO5 Dynasty
sbj
Server issue Trying to set a profile banner causes an unknown error
Replies
2
Views
880
KSA
KSA
O
  • Question Question
XF 2.1 error while trying to save PAGE_CONTAINER template.
Replies
19
Views
3K
dethfire
dethfire
Wilouness
  • Question Question
XF 2.1 How to embed a html mailing in post
Replies
0
Views
2K
Wilouness
Wilouness
Top Bottom