<br> or not

[ingenting]

Hi.

We can make a brake with <br>, but everbody seems to hate it. Should i do something like this instead :

<h6>I Want to make some brakes around here</h6><h6>So i just make a new "<p>"tag or maybe "<h6>" </h6>

Or is this better <h6>I Want to make some brakes around here. So i just make a new "<p>"tag or maybe "<h6>" </h6>

If it the same with p, h1, h2 ect. ?

[xhtmlcoder]

You cannot have a P element within a H6 since it [h6] can only contain 'inline elements' such as BR or SPAN, etc. It also depends upon what you are trying to achieve - if it's just visual or positioning reasons (layout) or controlling white space then use CSS.

The P element; for paragraphs and are 'block level' so by default cause paragraph breaks but you should NEVER use them for generating white space.

[ingenting]

You cannot have a P element within a H6 since it [h6] can only contain 'inline elements' such as BR or SPAN, etc. It also depends upon what you are trying to achieve - if it's just visual or positioning reasons (layout) or controlling white space then use CSS.

The P element; for paragraphs and are 'block level' so by default cause paragraph breaks but you should NEVER use them for generating white space.

I am not sure what you mean should i use another text tag <p> to make a break or should i use <br> ? My p element are not empty.

Lets say i have 3 colums i want to make some white space between them:
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>

OR

<p> text text text <br>
text text text<br>
text text text<br>
</p>

[xhtmlcoder]

If you have three separate paragraphs and want either; the block of text column to be a certain width; or want to change vertical white space then use CSS.

The BR is mainly used for 'special' cases like; poetry or postal addresses not for making generic white space between the sentences themselves.

Obviously each paragraph will be in the form: <p>Paragraph 1 text...</p><p>Paragraph 2 text...</p><p>Paragraph 3 text...</p><p>Paragraph 2 text...</p> as that denotes separate paragraphs.

[zot]

I think when people talk about their dislike for <br> tags, it's when they're used to add space. For example:

<img src="logo.jpg"><br><br><br><p>Company Name</p>.

There's nothing wrong with using them to break lines within a heading.

[ingenting]

I think when people talk about their dislike for <br> tags, it's when they're used to add space. For example:

<img src="logo.jpg"><br><br><br><p>Company Name</p>.

There's nothing wrong with using them to break lines within a heading.

Great, that what also what i was thinking.

[ingenting]

Is this not okay because it is <li> and not <p> ?

<div class="one-fourth footer-info">
<h4>Contact</h4>
<ul>
<li><strong>Name</strong></li>
<li>Streetadress</li>
<li>5004 City</li>
<br>
<li>Telephone 273623323</li>
<li><a href="mailto:mail@hotmail.com" style="color:#FFF">mail@hotmail.com</a></li>
<br>
<li><a href="#" class="button small black">Lorum</a></li>
</ul>
</div>

[ralph.m]

<li>5004 City</li>
<br>

No, you shouldn't have the <br> element there, for two reasons:
- it's not valid HTML, and
- if you want some visual space there, use CSS (e.g. put some bottom padding on that LI.)

Remember, visual layout is the job of CSS, not HTML. As a rule, don't use HTML elements to get visual effects (except in rare cases mentioned above, such as in poetry or addreses).

Given your content, it's also worth asking yourself if an address is really a list. If not, don't use HTML that describes it as a list.

[ingenting]

Okay, i dont know are to do this without giving all li in this section padding. Should i give some of the <li> a class like this (i only need the break on two of those <li>) :

<div class="one-fourth footer-info">
<h4>Contact</h4>
<ul>
<li><strong>Name</strong></li>
<li>Streetadress</li>
<li class="padding">5004 City</li>
<li>Telephone 273623323</li>
<li class="padding"><a href="mailto:mail@hotmail.com" style="color:#FFF">mail@hotmail.com</a></li>

<li><a href="#" class="button small black">Lorum</a></li>
</ul>
</div>

[ralph.m]

Yes, you could do it that way. If you are going to add classes like that, you might as well lose the inline style, too, and do it with

.padding a {color: #fff;}

Likewise, rather than using <strong> on the Name (there you go using HTML for visual effect again!) you could style it without even using a class:

ul li:first-child {font-weight: bold}

[ingenting]

Yes, you could do it that way. If you are going to add classes like that, you might as well lose the inline style, too, and do it with

.padding a {color: #fff;}

ul li:first-child {font-weight: bold}

Okay great tip. Did not know ":nth child stuff". I came up with this instead (looks okay ?) :
one thing i could not figure out. How can i select child 3 and 5 only ?

Also it is okay to use "strong" in large columns of text right ? And is "strong" as good as using "b" ?

.footer-info {
padding-bottom:25px;
}
.footer-info a {
color:#FFF;
}
.footer-info ul li:nth-child(1){
font-weight: bold;
}
.footer-info ul li:nth-child(3){
padding-bottom:15px;
}
.footer-info ul li:nth-child(5){
padding-bottom:25px;
color:#FFF;
}

[xhtmlcoder]

The STRONG element indicates 'stronger emphasis' and isn't to do with presentation whereas B renders as bold text style albeit if you just visually wanted a heaver or darker font weight you'd use CSS.

[ingenting]

But if you have this text and want to make 10-15 words bold. How would you do this with css and not <strong> or <b> ?


Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst siden 1500-tallet, hvor en ukendt trykker sammensatte en tilfældig spalte for at trykke en bog til sammenligning af forskellige skrifttyper. Lorem Ipsum har ikke alene overlevet fem århundreder, men har også vundet indpas i elektronisk typografi uden væsentlige ændringer. Sætningen blev gjordt kendt i 1960'erne med lanceringen af Letraset-ark, som indeholdt afsnit med Lorem Ipsum, og senere med layoutprogrammer som Aldus PageMaker, som også indeholdt en udgave af Lorem Ipsum.

That is the right place for it right ?

[ralph.m]

But if you have this text and want to make 10-15 words bold. How would you do this with css and not <strong> or <b> ?

You can wrap the words in some inline element like a <span>, give it a class and style it accordingly.

[ingenting]

You can wrap the words in some inline element like a <span>, give it a class and style it accordingly.

So using b and strong in this above situation is wrong ?

[ralph.m]

You could use <b> there. I just prefer to use CSS, as it's a bit more elegant.

[ingenting]

You could use <b> there. I just prefer to use CSS, as it's a bit more elegant.

Thanks i will use b or css now.

[ralph.m]

You can use <b> instead of <span>, give the <b> a class and refine the styling a bit, too, if the default <b> styles are a bit bland.

[John_Betong]

Off Topic:



Maybe someone can confirm that as far as SEO is concerned then the <span> tag is ignored because only styling is expected?

Whereas text enclosed with <strong> and <b> add SEO emphasis to the words similar to heading tags?

[Stomme poes]

John: I doubt <b> means anything for SEO, but <strong> might, maybe. Depends on how often it's used for importance in the wild versus just making stuff bold. <span> should indeed be entirely ignored by an SE. Span and div have no real semantic meaning, so I'd prefer the span.

I'd use the <b> if it was an HTML email though. Easier.