Code Cleaner - Clean unnecessary tags...

User 574510 Photo


Registered User
55 posts

I made a normal and simple page in html and css and i was wondering if there is any generator or any thing that cleans my code and take out all the unnecessary tags. I am sure i have loads of code there that i wont need.

The validator from W3.org cleans it but it also changes the style of the page so i don't want it.

The code cleaner from CC Html editor doesn't take out the extra tags.

Any suggestions?

Thanks:cool:
User 122279 Photo


Senior Advisor
14,648 posts

I don't know of any such tool, but if it's just one simple page, then post it here and some of us can take a look for you.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 574510 Photo


Registered User
55 posts

The page looks good in all browsers but it doesnt look good in IE.

The page link code is:

[code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /><!-- Titulo da pagina -->
<title>Wallpaper</title>
<!-- Cascading Style Sheets (CSS) - Posi??o e Estilo da pagina -->
<!-- Define a cor dos links visitados e retira qualquer decora??o aos mesmos -->

<style type="text/css">
/*<![CDATA[*/
a:link, a:visited{text-decoration:none; color:#800;}
/*]]>*/
</style>

<style type="text/css" media="screen">
/*<![CDATA[*/
/* Estilo e Propriedades da letra e da c?r do fundo geral da pagina */
body {
margin-top:0%;
margin-bottom:0%;
background-color:#555;
color:#333;
a:link, a:visited, text-decoration:none;
font:12px Helvetica, Arial, sans-serif;
line-height:18px;
}

/* Estilo da letra e posi??o do "h3"*/
h3 {
color:#333;
font-size:x-large;
margin:0;
padding:0;
}
/*Tamanho e posi??o do conteudo da pagina*/
#conteudo {
border-right:1px solid #fff;
border-left:1px solid #fff;
margin:0 auto;
width:1000px;
}
/*C?r de fundo , tamanho , estilo e c?r da borda no fundo do cabe?alho*/
#topo {
height:100%;
width:1000px;
background:#eee;
border-bottom:1px solid #ddd;
padding:0%;
}
/*Posi??o do h1 referente ao cabe?alho, c?r da letra e tamanho*/
#topo h1 {
color:maroon;
font-size:70px;
margin:0 0 3px;
padding:35px 24px 0;
}
/*Posi??o e tamanho do paragrafo referente ao cabe?alho e propriedades da letra do mesmo*/
#topo p {
color:#000;
font-size:10px;
padding:11px 15px 0;
}
/*C?r de fundo , tamanho , estilo e c?r da borda no fundo do lado direito do conteudo pagina*/
#ladodireito {
border-right:1px solid #fff;
color:#000;
float:right;
font-size:12px;
font-weight:400;
height:100%;
margin-left:18px;
margin-right:0;
width:350px;
}
/*C?r de fundo , tamanho , estilo e c?r da borda no fundo do lado direito do conteudo pagina*/
#ladoesquerdo {
border-left:1px solid #fff;
border-bottom:95px solid #fff;
margin:0 18px 0 0;
width:650px;
}
/*Tamanho da letra e altura da linha quando usada a tag "small"*/
#ladoesquerdo small {
font-size:11px;
line-height:18px;
}

/*Caracteristica do paragrafo do lado esquerdo*/
#ladoesquerdo p {
padding-right:18px;
}

/*Caracteristicas do final da pagina e menu de apresenta??o do conteudo do trabalho*/
#fim {
background:#333;
border-bottom:1px solid #fff;
clear:both;
}

#fim a {
color:#eee;
}
/*Caracteristicas do paragrafo relativo ao "#fim"*/
#fim p {
color:#ccc;
margin:0;
padding:0 18px 10px;
}

#fim ul {
border-bottom:1px solid #555;
list-style:none;
margin:0 18px 6px;
padding:10px 0 6px;
}

#fim li {
display:inline;
font-size:11px;
font-weight:700;
padding-right:5px;
}

<style type="text/css" media="screen">
html,body,h2 {
margin:0;
padding:0;
}
</style>
</head>
<!-- Final do <head></head> e inicio do <body></body> -->
<body>
<!-- Inicio do conteudo -->
<div id="conteudo">
<!-- Topo da pagina -->
<div id="topo">
<h1>Wallpaper</h1>
<p class="description" align="center">PHOTOGRAPHY: MICHAEL DAVID ROSE AND SPENCER</p>
</div>

<div id="wrapper" style="background-color:#ffffff;">
<!-- Imagem grande apos o titulo e descri??o. -->
<div id="imagem">
<img src="1.jpg" width="1000" height="500" />
</div>
</div>
<!-- Lado direito ap?s a imagem. -->
<div id="ladodireito" style="background-color:#ffffff;">
<!-- Imagem pequena por cima do texto -->
<h2><div align="right" style="margin-right:20px;"><img src="2.jpg" width="300" height="150"/></div></h2>
<!-- Titulo e texto do lado direito -->
<table border="0" width="87%" align="right" bgcolor="#ffffff">
<tr>
<td><h2 align="left" style="margin-top:8px; margin-right:20px;">TOTAL KUTI</h2>
<p style="margin-top:8px; margin-right:20px;">Chicago`s South Loop neigbourhood is
known for its jazz and blues clubs, and
.e Shrine, from impresario Joseph
Russo, is the latest. .e name pays
homage to Fela Kuti`s legendary Lagos
venue, and the leather-laden interiors are
inspired by sa.ra lodges. .e centrepiece
is a collage of album art featuring
everything from bossa nova to dub.
.e Shrine, 2109 South Wabash, Chicago,
tel: 1.312 753 5700,<br/> <small><a href="" target="_self" title="TOTAL KUTI">www.theshrinechicago.com</a></small></p></td>
<td></td>
</tr>
</table>
</div>

<!-- Lado esquerdo ap?s a imagem. -->

<div id="ladoesquerdo">

<table border="0" width="100%" bgcolor="#ffffff">
<tr>
<td><h3 align="left" style="margin-left:20px;" >Leather girls</h3>
<p style="margin-top:20px; margin-left:20px;">The British leather industry may not be</br>
used to welcoming new players, but</br>
.edging specialist label Spooner +</br>
Watts looks set to stay. Established</br>
a year ago by Bill Amberg alumni Grace</br>
Spooner and Lucie Watts, the design</br>
company has re-imagined everday</br>
objects in luxurious leather. Curtains,</br>
cake boxes and brown paper bags have</br>
been realised in pigskin and bridle, while</br>
interiors o.erings include step stools</br>
and vintage school chairs.</br>
Each product is made to order by</br>
hand, employing traditional methods.</br>
The skins used are by-products of the</br>
meat industry, be it ostrich or goat.</br>
The pair have collaborated with other</br>
emerging London brands and have a</br>
retail shop on the horizon. One to watch,</br>
Sponner + Watts,tel: 44.20 7729 7951,</br>
<small><a href="" target="_self" title="Leather Girls">www.sponnerandwatts.co.uk</a></small></br> </p></td>

<td><h2 align="left" style="margin-left:10px;">In the bag</h2>
<p style="margin-top:20px; margin-left:10px;">Veronique Branquinho, the Belgian</br>
designer known for her sharply</br>
tailored, understand fashion, has</br>
been named artistic director of</br>
Delvaux , the Belgian leather</br>
company that has been stiching</br>
bags since 1829. Her .rst collection</br>
in conjunction with Delvaux was</br>
developed for her last eponymous</br>
catwalk collection, on sale this</br>
winter, and consists of sleek bags</br>
in whites, ivory and oyster. It</br>
heralds a collaboration we think</br>
will be unmistakably Branquinho.</br>
and fundamentally Delvaux.</br>
<small><a href="" target="_self" title="In the bag">www.delvaux.com</a></small></p></td>
</tr>
</table>
</div>
<!-- Inicio do final da pagina. -->
<div id="fim">
<ul>
<li><a href="index.html">Index</a></li>
<li><a href="wallpaper1.html">pag. 1</a></li>
<li><a href="wallpaper2.html">pag. 2</a></li>
<li><a href="wallpaper3.html">pag. 3</a></li>

</ul>
<!-- Autor do trabalho. -->
<p align="center">Trabalho realizado por Rita</p>
</div>
</div>
</body>
</html>

</style>
</head>
<body>
</body>
</html>[code]

If anyone would help me making it look good in all browsers and cleaning all the unnecessary tags i would be really great full..Thanks all:)
User 122279 Photo


Senior Advisor
14,648 posts

I have gone through the code and cleaned out bits and pieces, also added a meta tag for the charset. As I'm no expert, there may be things that could still be made even better. Maybe someone else will jump in on this.

I have split the css from the html document so that you have them as two files. I have called the css one 'style.css'. The advantage is that you can link to the same document from subsequent pages, and if you have to edit the css, you do it just in one place. You could also move some of your inline syles to the css document, as a xhtml strict document will not validate with them in the html doc.

Since I don't have your images, I don't know exactly how you want it to look. Those dark empty spaces, are they supposed to be there? They show up in IE, but not in FF (latest version of both). If they are NOT supposed to be there, you probably have to look closely at the tables you are using.

Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang=
"pt">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<!-- Titulo da pagina -->
<meta http-equiv="content-type" content=
"text/html; charset=utf-8" />
<title>Wallpaper</title>
<!-- Cascading Style Sheets (CSS) - Posi??o e Estilo da pagina -->
<!-- Define a cor dos links visitados e retira qualquer decora??o aos mesmos -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<!-- Final do <head></head> e inicio do <body></body> -->
<body>
<!-- Inicio do conteudo -->
<div id="conteudo"><!-- Topo da pagina -->
<div id="topo">
<h1>Wallpaper</h1>
<p class="description" align="center">PHOTOGRAPHY: MICHAEL DAVID
ROSE AND SPENCER</p>
</div>
<div id="wrapper">
<!-- Imagem grande apos o titulo e descri??o. -->
<div id="imagem"><img src="1.jpg" width="1000" height=
"500" /></div>
</div>
<!-- Lado direito ap?s a imagem. -->
<div id="ladodireito"><!-- Imagem pequena por cima do texto -->
<div align="right" style="margin-right:20px;">
<h2><img src="2.jpg" width="300" height="150" /></h2>
</div>
<!-- Titulo e texto do lado direito -->
<table border="0" width="87%" align="right" bgcolor="#FFFFFF">
<tr>
<td>
<h2 align="left" style="margin-top:8px; margin-right:20px;">TOTAL
KUTI</h2>
<p style="margin-top:8px; margin-right:20px;">Chicago`s South
Loop neigbourhood is known for its jazz and blues clubs, and .e
Shrine, from impresario Joseph Russo, is the latest. .e name pays
homage to Fela Kuti`s legendary Lagos venue, and the
leather-laden interiors are inspired by sa.ra lodges. .e
centrepiece is a collage of album art featuring everything from
bossa nova to dub. .e Shrine, 2109 South Wabash, Chicago, tel:
1.312 753 5700,<br />
<small><a href="" target="_self" title=
"TOTAL KUTI">www.theshrinechicago.com</a></small></p>
</td>
<td></td>
</tr>
</table>
</div>
<!-- Lado esquerdo ap?s a imagem. -->
<div id="ladoesquerdo">
<table border="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td>
<h3 align="left" style="margin-left:20px;">Leather girls</h3>
<p style="margin-top:20px; margin-left:20px;">The British leather
industry may not be<br />
used to welcoming new players, but<br />
.edging specialist label Spooner +<br />
Watts looks set to stay. Established<br />
a year ago by Bill Amberg alumni Grace<br />
Spooner and Lucie Watts, the design<br />
company has re-imagined everday<br />
objects in luxurious leather. Curtains,<br />
cake boxes and brown paper bags have<br />
been realised in pigskin and bridle, while<br />
interiors o.erings include step stools<br />
and vintage school chairs.<br />
Each product is made to order by<br />
hand, employing traditional methods.<br />
The skins used are by-products of the<br />
meat industry, be it ostrich or goat.<br />
The pair have collaborated with other<br />
emerging London brands and have a<br />
retail shop on the horizon. One to watch,<br />
Sponner + Watts,tel: 44.20 7729 7951,<br />
<small><a href="" target="_self" title=
"Leather Girls">www.sponnerandwatts.co.uk</a></small><br /></p>
</td>
<td>
<h2 align="left" style="margin-left:10px;">In the bag</h2>
<p style="margin-top:20px; margin-left:10px;">Veronique
Branquinho, the Belgian<br />
designer known for her sharply<br />
tailored, understand fashion, has<br />
been named artistic director of<br />
Delvaux , the Belgian leather<br />
company that has been stiching<br />
bags since 1829. Her .rst collection<br />
in conjunction with Delvaux was<br />
developed for her last eponymous<br />
catwalk collection, on sale this<br />
winter, and consists of sleek bags<br />
in whites, ivory and oyster. It<br />
heralds a collaboration we think<br />
will be unmistakably Branquinho.<br />
and fundamentally Delvaux.<br />
<small><a href="" target="_self" title=
"In the bag">www.delvaux.com</a></small></p>
</td>
</tr>
</table>
</div>
<!-- Inicio do final da pagina. -->
<div id="fim">
<ul>
<li><a href="index.html">Index</a></li>
<li><a href="wallpaper1.html">pag. 1</a></li>
<li><a href="wallpaper2.html">pag. 2</a></li>
<li><a href="wallpaper3.html">pag. 3</a></li>
</ul>
<!-- Autor do trabalho. -->
<p align="center">Trabalho realizado por Rita</p>
</div>
</div>
</body>
</html>


And here the style.css:
a:link, a:visited{text-decoration:none; color:#800;}
/*<![CDATA[*/
/* Estilo e Propriedades da letra e da c?r do fundo geral da pagina */
body {
margin-top:0%;
margin-bottom:0%;
background-color:#555;
color:#333;
a:link, a:visited, text-decoration:none;
font:12px Helvetica, Arial, sans-serif;
line-height:18px;
}
#wrapper {
margin: auto;
background-color:#ffffff;
}
/* Estilo da letra e posi??o do "h3"*/
h3 {
color:#333;
font-size:x-large;
margin:0;
padding:0;
}
/*Tamanho e posi??o do conteudo da pagina*/
#conteudo {
border-right:1px solid #fff;
border-left:1px solid #fff;
margin:0 auto;
width:1000px;
}
/*C?r de fundo , tamanho , estilo e c?r da borda no fundo do cabe?alho*/
#topo {
height:100%;
width:1000px;
background:#eee;
border-bottom:1px solid #ddd;
padding:0%;
}
/*Posi??o do h1 referente ao cabe?alho, c?r da letra e tamanho*/
#topo h1 {
color:maroon;
font-size:70px;
margin:0 0 3px;
padding:35px 24px 0;
}
/*Posi??o e tamanho do paragrafo referente ao cabe?alho e propriedades da letra do mesmo*/
#topo p {
color:#000;
font-size:10px;
padding:11px 15px 0;
}
/*C?r de fundo , tamanho , estilo e c?r da borda no fundo do lado direito do conteudo pagina*/
#ladodireito {
background-color:#ffffff;
border-right:1px solid #fff;
color:#000;
float:right;
font-size:12px;
font-weight:400;
height:100%;
margin-left:18px;
margin-right:0;
width:350px;
}
/*C?r de fundo , tamanho , estilo e c?r da borda no fundo do lado direito do conteudo pagina*/
#ladoesquerdo {
border-left:1px solid #fff;
border-bottom:95px solid #fff;
margin:0 18px 0 0;
width:650px;
}
/*Tamanho da letra e altura da linha quando usada a tag "small"*/
#ladoesquerdo small {
font-size:11px;
line-height:18px;
}

/*Caracteristica do paragrafo do lado esquerdo*/
#ladoesquerdo p {
padding-right:18px;
}

/*Caracteristicas do final da pagina e menu de apresenta??o do conteudo do trabalho*/
#fim {
background:#333;
border-bottom:1px solid #fff;
clear:both;
}

#fim a {
color:#eee;
}
/*Caracteristicas do paragrafo relativo ao "#fim"*/
#fim p {
color:#ccc;
margin:0;
padding:0 18px 10px;
}

#fim ul {
border-bottom:1px solid #555;
list-style:none;
margin:0 18px 6px;
padding:10px 0 6px;
}

#fim li {
display:inline;
font-size:11px;
font-weight:700;
padding-right:5px;
}

html,body,h2 {
margin:0;
padding:0;
}
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 1948478 Photo


Senior Advisor
1,850 posts

Just a small note added to all the good work Inger has done:
To make sure that Portuguese characters are represented correctly, I would specify charset=iso-8859-1 instead of utf-8 in the META tag:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
User 122279 Photo


Senior Advisor
14,648 posts

Thanks, Per. I have no clue about Portuguese characters ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 574510 Photo


Registered User
55 posts

Thank you very much for the support , the fact that you helped me seperate the css from the actual html helped to get a better and clean code easly to understand. :) you guys also fixed the "?" with the iso thing! thanks
User 38401 Photo


Senior Advisor
10,951 posts

Aren't coffeecup users awesome!!?!! I get more help on these forums than I have in any online game I've ever played over the past 8 years or so LOL.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.