Jump to content

<p> and <br /> Tags


Kevin M

Recommended Posts

I'm currently coding a layout that has two bars for navigation, a left and right. I am using PHP Includes for the content of the two bars. There are also navigation headers, which are in the CSS.So basically it looks like this in one of the PHP Includes:

<div id="siteinto"></div><br />LINK<br />Link<br /><div id="somename"></div><br />LINK <br />Link <br />

Etc.What I was wondering, is there any way to use <p> tages so I wouldn't have to use line breaks so much. So would something like this work?

<p><div id="siteinfo"</div>LINKLINK</p><p><div id="somename"></div>LINKLINK</p>

Or will I still have to use Line breaks?Also, if that's not possible, could this be done using an unordered list?I'm ok with any way, but I don't really want to have 30 some odd <br /> tags in my code.Thanks,Kevin

Link to comment
Share on other sites

I've always preferred <br /> tags.(and this is why)This is primarily the case because I'm old school. Most would think that would mean I would prefer the <p> tag. But when there was a more equal market share of browsers (yes, back when dirt was first discovered) I learned that the <p> would only add that extra line break if it was used immediately after text. In other words, a <tr><td><p> would not product a space. This happened with a few other tags - still may be the case today since IE is so old - but I never use <p> so I have no reason to experiment. Back to the reasoning - the situation where sometimes a space would render and sometimes it would not, was too much of a mystery since I knew using the <br> would yield consistent results. I've been chastised by die those who feel I was using it incorrectly - and thats fine - I just know that my sites render consistently without any "hacks" or "tweaks" that were browser and/or OS specific.So, technically, you should use a <p> to start a new block of text. But I've won so many arguments when those extremists fail to use the <br> tag at the end of every line break - even if choosing to use the <p>Good For Me:

In pellentesque. Integer ligula turpis, venenatis in, nonummy et, posuere ac, neque. Donec aliquet suscipit arcu. Donec leo justo, interdum ut, sollicitudin consectetuer, faucibus id, nisi.<br /><br />Aenean odio leo, aliquet quis, iaculis vel, feugiat quis, nulla. Ut vitae pede. Vestibulum accumsan mollis mi. Fusce semper. Integer ullamcorper sagittis sem. Morbi in nunc. Vestibulum imperdiet tellus ac lacus. Etiam sodales sem vel tortor.<br /><br />

Technically Acceptable:

<p>Aliquam erat volutpat. Aliquam erat volutpat. Pellentesque ut sapien eget libero consectetuer mollis. Phasellus feugiat venenatis nulla. Suspendisse nec dui. Suspendisse potenti.<br /></p><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed turpis a nulla convallis dictum. Nam auctor aliquam dolor. Maecenas elementum. Integer enim. Aenean vestibulum rhoncus sem. Nunc eleifend ipsum non tellus.<br /></p>

What the <br> nay-sayers always seem to do:

<p>Quisque laoreet sem et orci mattis accumsan. Cras sapien urna, aliquam at, luctus vel, hendrerit quis, tellus. Cras diam justo, condimentum porta, pellentesque nec, tempus ac, turpis.<p>Mauris tempor pharetra odio. Nam magna tellus, posuere sit amet, eleifend et, elementum ut, nulla. Proin adipiscing dapibus felis. Curabitur vestibulum laoreet risus. Aliquam arcu neque, ornare sed, venenatis in, sollicitudin ut, nunc. Pellentesque sed dui.

All in all, using the <br /> provides that much more of a consistent result which is especially important since 99% of my work is with dynamicly generated content - makes it easier to code.

Link to comment
Share on other sites

Looks to me like you are using "LISTS" of links, so why not use <ul> and <li> tags???That would be semanticaly(sp) correct, and it is easy enough to develop consistent results in various Browsers.

Link to comment
Share on other sites

What the <br> nay-sayers always seem to do:
<p>Quisque laoreet sem et orci mattis accumsan. Cras sapien urna, aliquam at, luctus vel, hendrerit quis, tellus. Cras diam justo, condimentum porta, pellentesque nec, tempus ac, turpis.<p>Mauris tempor pharetra odio. Nam magna tellus, posuere sit amet, eleifend et, elementum ut, nulla. Proin adipiscing dapibus felis. Curabitur vestibulum laoreet risus. Aliquam arcu neque, ornare sed, venenatis in, sollicitudin ut, nunc. Pellentesque sed dui.

Well not only are they ragging on br, but their code isn't compliant. All tags need to be closed.
Link to comment
Share on other sites

Well not only are they ragging on br, but their code isn't compliant. All tags need to be closed.
Xhtml only. The html spec does not require closing tags a lot of times. Good programming would expect the tags to be closed even though they are not 'required'.
Link to comment
Share on other sites

Xhtml only. The html spec does not require closing tags a lot of times. Good programming would expect the tags to be closed even though they are not 'required'.
True :) I like good programming.
Link to comment
Share on other sites

it sounds obvious, but you should use <p> tags for paragraphs. so in this case you are making navigation (i.e. a list of links) so use <ul> its better for your page ranking to write semantically correct html. with css nowadays we have no need for spacer images, layout tables or the method Skemcin suggests abovethe logical use for the <br> element is forcing a line break. using them to create a visual space between elements is not correct.an example of un-semantic code would be

<strong>Google</strong><br />Google Inc. (NASDAQ: GOOG and LSE: GGEA) is an American public corporation, specializing in Internet search and online advertising.<br /><a href="http://www.google.com">Google</a><br /><br />

Now another way of writing that:

<h2>Google</h2><p>Google Inc. (NASDAQ: GOOG and LSE: GGEA) is an American public corporation, specializing in Internet search and online advertising.<br /><a href="http://www.google.com">Google</a></p>

Now this way when the bots read your page they see that this paragraph has a heading, keywords and a link that all belong together whereas the previous way they are all seperated.so we use br to make a line break and margins for the space between text elements e.g. p {margin:15px 0;}hope this helps

Link to comment
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
×
×
  • Create New...