Jump to content

Removing unnecessary empty lines

htmlnewbie23

By htmlnewbie23
in HTML/XHTML

Recommended Posts

htmlnewbie23 Newbie

htmlnewbie23

Posted
Posted

I am working hard to get my pages fully validated by W3 and as part of my changes I am hitting a problem I cannot solve. In the code below (an example that is part of the full page code) there are 2 groupings: one under "Heading one" and the other under "Heading two". Each has a column of links under their headings. In both cases the columns of links are at the indentation I would like them to be (takes 2 <ul> to get there). My problem is that under "Heading one" there are a number of empty lines before the columns of links start. Yet under "Heading two" - which has the same basic structure - the columns start without the empty lines. As part of my changes I added the extra <li>s under "Heading one" to satisfy the validator and they ended up adding extra lines I do not want. What do I need to correct to get "Heading one" to look like "Heading two" and still satisfy the validator? Sort of a Catch 22!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>   <head>      <title>         test      </title>   </head>   <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">      <ul style="list-style-type:none">	<li><hr size="5" noshade="noshade" />	</li>		<!--     listings      -->		<li><a name="TOC"></a>		</li>		<li><p>			<font color="#990099" face="arial, helvetica, sans-serif" size="4">				<b>Heading one </b>			</font>		</li></ul>			<ul style="list-style-type:none"><li>	<ul style="list-style-type:none">   	<li>      	<ul style="list-style-type:none">	        		<li>				<a href="url" target="new">					<font color="#3333ff">text 1					</font>					</a>				<font color="#660066">					<i>										<font size="2">jkljklj						</font>					</i>				</font>									<br>				<a href="url2" target="new">					<font color="#3333ff">text 2					</font>					</a>						<font color="#660066">							<i>								<font size="2">jkljklj</font> 							</i>						</font>										<br>					etc.	</ul></ul> <p align="center"><font color="#330033"><A href="#TOC" target="top">		<font size="2">[back to Top of Page]</font></a></p><br>	<font color="#990099" face="arial, helvetica, sans-serif" size="4">			<b>Heading two </b>	</font>      <ul style="list-style-type:none">        <ul style="list-style-type:none">		<a href="url 3">			<font color="#3333ff">text 3			</font>		</a>	<font color="#660066"><i>	<font size="2">jkljklj</font> </i>   </body></html>

Thank you.

Link to comment
Share on other sites
htmlnewbie23 Newbie

htmlnewbie23

Posted
  • Author
Posted
Make an example page and put it online. That code is missing a few </li> and </ul> tags.
It's up at http://www.sephardicgen.com/example.htmlIf there's a better way to code it, I am also open to that though I use <ul> extensively in my pages (over 100) which were coded in the 1990s and which I am trying to bring up to today's validator's satisfaction without re-writing everything.Thank you.
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Mmm... a better way to provide indentation is the use division <div> tags or paragraph <p> tags, and setting their style="margin-left:10px; " where 10px is your desired indent.Umm... if you want to make your page XHTML 100% valid, you must also remember that-The <font> tag is depreciated, use CSS instead-All list item <li> and list <ul> and <ol> tags have to be closed!-All empty tags have to be ended with /> not >, such as <br /> not <br>So, your page now (with added style definitions):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>	<head>		<title>test</title>		<style type="text/css">			body {				background-color:#FFFFFF;				color:#0000000;			}			a:link {				color:#FF0000;			}			a:visited {				color:#800080;			}			h1 {				color:#990099;				font-family:arial, helvetica, sans-serif;				font-size:4;				font-weight:bold;			}			p {				margin:2px;			}			.toc {				margin-left:20px;			}			.content {				margin-left:60px;			}			.blue {				color:#3333FF;			}			.purple {				color:#660066;			}					</style>	</head>	<body>	<div class="toc">		<hr size="5" noshade="noshade" />		<!-- listings -->		<a name="TOC"></a>		<h1>Heading one </h1>	</div>	<p class="content">		<a href="url" target="new"><span class="blue">text 1</span></a>		<span class="purple" style="font-size:8pt; "><i>jkljklj</i></span>		<br />		<a href="url2" target="new"><span class="blue">text 2</span></a>		<span class="purple" style="font-size:8pt; "><i>jkljklj</i></span>		<br />		etc.	</p>	<!-- ETC --></body></html>

Link to comment
Share on other sites
htmlnewbie23 Newbie

htmlnewbie23

Posted
  • Author
Posted
Mmm... a better way to provide indentation is the use division <div> tags or paragraph <p> tags, and setting their style="margin-left:10px; " where 10px is your desired indent.Umm... if you want to make your page XHTML 100% valid, you must also remember that-The <font> tag is depreciated, use CSS instead-All list item <li> and list <ul> and <ol> tags have to be closed!-All empty tags have to be ended with /> not >, such as <br /> not <br>So, your page now (with added style definitions):
Thank you for ALL your excellent suggestions. I will have to study them to better understand how they work and try to learn.One problem though: I copied your code to a file on my PC and when I opened it in Firefox or IE6, the line <h1>Heading one </h1>shows up as extremely tiny in the browser even though h1 is defined as size 4. Not sure why that is. How would I use the <div> or <p> (which I am more comfortable using) to achieve the same result? Is it <div style="margin-left:10px; ">, or <div style="margin-left:10px; " />?Thank you so much.Jeff
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

If you do something like this:<div style="margin-left:10px; " />It's a self-closing tag. That indicates a div that starts and immediately stops with no content inside it. XHTML requires that tags that do not have a corresponding closing tag (like </div>) be self-closing. It applies to tags like <br>, <img>, <link>, etc that do not have corresponding </br>, </img>, or </link> tags and need to close themselves.Also,

-The <font> tag is depreciated, use CSS instead
The font tag isn't a piece of real estate, it doesn't depreciate. It is deprecated though.
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted
<div style="margin-left:10px; " />
DO NOT use this construct, especially for XHTML files served as HTML (the most likely case). Since browsers read this as HTML and HTML doesn't have the self closing rule, browsers will interpret this as a start tag with no corresponding end tag, thus closing it at the end of the page. If you need an empty div element, use
<div style="margin-left:10px; "></div>

instead (though I wouldn't use that sort of approach in general, but still). Use the self closing way only for elements that are explicitly defined as empty elements. Those are the ones justsomeguy mentioned plus a few more.

Link to comment
Share on other sites
htmlnewbie23 Newbie

htmlnewbie23

Posted
  • Author
Posted
DO NOT use this construct, especially for XHTML files served as HTML (the most likely case). Since browsers read this as HTML and HTML doesn't have the self closing rule, browsers will interpret this as a start tag with no corresponding end tag, thus closing it at the end of the page. If you need an empty div element, use
<div style="margin-left:10px; "></div>

instead (though I wouldn't use that sort of approach in general, but still). Use the self closing way only for elements that are explicitly defined as empty elements. Those are the ones justsomeguy mentioned plus a few more.

I scrolled up this thread and did not find that justsomeguy mentioned some tags that need that /> other than what I read about <br /> and <hr /> elsewhere. Is there a complete list of the others that need the self closing /> to be compatible with xhtml?Why would you not use 
<div style="margin-left:10px; "></div>

other than a preference for using CSS? What would be the disadvantage of using the <div> as described? It seems simpler to use for us who are not programmers and I do not believe <div> is being deprecated (except for the align attribute) unless I am wrong.In case I am mis-speaking what I mean through ignorance, I was planning on using the <div> as a container as follows:

<div style="margin-left:10px; ">  "text or other nested tags"</div>

Is that OK? Maybe that is not what you meant by an "empty tag".Thanks for your advice and help.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Yeah that's fine, there's content there. This is an empty tag because there isn't any content in it:<div style="margin-left:10px; "></div>As far as which tags need the slash at the end, any element that does not have a closing tag needs to be self-closing. Elements like <b></b>, <i></i>, <span></span> etc all have closing tags, whereas elements like <br>, <hr>, <link> etc do not.

Link to comment
Share on other sites
htmlnewbie23 Newbie

htmlnewbie23

Posted
  • Author
Posted
Yeah that's fine, there's content there. This is an empty tag because there isn't any content in it:<div style="margin-left:10px; "></div>As far as which tags need the slash at the end, any element that does not have a closing tag needs to be self-closing. Elements like <b></b>, <i></i>, <span></span> etc all have closing tags, whereas elements like <br>, <hr>, <link> etc do not.
Thank you.
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

... and <meta /> and <img /> :) . I think that's all.

Why would you not use
Because it seems very wrong to me to use elements solely for spacers. Older table based layouts used spacer gifs and cells. Using a spacer div doesn't make much difference. It's better to use CSS' margins/paddings for making out space. But hey, that's just me. And I'm not converting old sites to XHTML and while I wouldn't call myself a "programmer", I like to tweak the source code of the page.But yes, using div as a content holder is perfectly fine. It's what div is for. It defines a "division" of a page. The contents of that division is of course whatever you wish, as long as there is some (rather then using a div solely as a "divisor" between two divisons).
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
One problem though: I copied your code to a file on my PC and when I opened it in Firefox or IE6, the line <h1>Heading one </h1>shows up as extremely tiny in the browser even though h1 is defined as size 4. Not sure why that is.
Oops :) size "4" in CSS is not the same as size 4 in HTML. Try using points (e.g. 16pt) or pixels (e.g. 20px) instead, that should fix it.Remember, with CSS there really is no limit to what you can do. If you really wanted to, you could redefine the <h1> tag to look like the <p> tag, and vice versa.
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted
<input>, <param>, <base>, and <area> are a few others. Why doesn't the HTML reference have an <embed> tag, is that not part of the standard?
Good catch. I've never used those, so I always forget about them :) .<embed/> has never been part of the standart. It's a Netscape extension, which is why Firefox has better support for it.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...