What To Use Instead Of
- HTML Forum At WebmasterWorld

Toggle navigation

• Dashboard
  • Dashboard Tracker
  • Add / Edit My Forums
  • System Announcements
• Discussion
  • Active Thread Feed
  • Top Threads Today
  • Top Threads This Week
  • Top Threads Library
• • Go!

• • View All
• • View All
• • Login
  • Logout

1. Home
2. Forums Index
3. Browser Side / HTML 3:40 am Nov 23, 2024

Forum Moderators: open

Message Too Old, No Replies

What to Use Instead of <br />

gouri

Msg#:4589925 4:08 pm on Jul 3, 2013 (gmt 0) On a web page, I have an H2 tag that is better to write on two lines instead of one line. Since the words in the first row of the H2 tag don't go to the end of the row and the cursor then goes to the next line, I have to use <br /> to go to the second line. Is there a way to go to the second line instead of using <br />? Since I am also planning on using the line-height feature, I don't have to use the <br /> tag twice, but I still have to use it once to go to the second line unless there is another way. Is there any other tag or coding that I can use? Does using a <br /> tag have any negative impact in terms of SEO or understanding the contents of the H2 tag? This is how it looks at the moment: <h2>Word 1 Word 2 Word 3 <br /> Word 4 Word 5</h2> I would like to use something instead of <br /> if it is possible. I appreciate your help.

DrDoc

Msg#:4589997 7:12 pm on Jul 3, 2013 (gmt 0) Personally, I would use <br> and have not noticed any drawbacks. The length (i.e. number of words or letters) of the header will likely have a greater impact. Also, misuse of <hn> can have a negative impact (i.e. markup of content that isn't semantically a header). As an aside -- I notice that you appear to be using XHTML markup. This is considered harmful unless always accompanied with the appropriate application/xhtml+xml Content-Type. You are much better off forgetting XHTML ever existed (unless you truly need XML capabilities in your document) and stick to HTML4.01 or, better yet, HTML5.

swa66

Msg#:4589999 7:17 pm on Jul 3, 2013 (gmt 0)

I would like to use something instead of <br /> if it is possible.

Why ? Without the words themselves there's no way to see why you need the line break, or if it's e.g a title and a subtitle. But if it indeed is just one title, then <br /> would seem to be a very good choice. If the title would make sense on one line, but you want to control where the line break goes due to / in case of a narrow rendering, then you could opt for nobreak spaces instead on regular spaces to prevent the break from creating weird effects.

swa66

Msg#:4590000 7:23 pm on Jul 3, 2013 (gmt 0)

As an aside -- I notice that you appear to be using XHTML markup. This is considered harmful unless always accompanied with the appropriate application/xhtml+xml Content-Type. You are much better off forgetting XHTML ever existed (unless you truly need XML capabilities in your document) and stick to HTML4.01 or, better yet, HTML5.

You're contradicting yourself when it comes to html5: <br /> is perfectly legal in html5 (and xhtml5). Nothing harmful at all. In fact it's quite possible to write code that's both html5 and xhtml5 valid at the same time - it's called polyglot html5: [dev.w3.org...] The only thing harmful is tag soup.

gouri

Msg#:4590012 7:39 pm on Jul 3, 2013 (gmt 0) DrDoc,

Personally, I would use <br> and have not noticed any drawbacks.

I think that I'll use <br /> then.

As an aside -- I notice that you appear to be using XHTML markup. This is considered harmful unless always accompanied with the appropriate application/xhtml+xml Content-Type. You are much better off forgetting XHTML ever existed (unless you truly need XML capabilities in your document) and stick to HTML4.01 or, better yet, HTML5.

Can you tell me what is the appropriate application/xhtml+xml Content-Type? I think that the template which I use is XHTML, and that's the reason for the web pages being in XHTML. If I am using a template, is there a way for me to decide what I want to use (e.g. HTML 4.01 or HTML 5)? swa66,

Why ? Without the words themselves there's no way to see why you need the line break, or if it's e.g a title and a subtitle. But if it indeed is just one title, then <br /> would seem to be a very good choice.

Looks like I felt that <br /> was not good to use, but after reading what you wrote, <br /> would be good to use.

If the title would make sense on one line, but you want to control where the line break goes due to / in case of a narrow rendering, then you could opt for nobreak spaces instead on regular spaces to prevent the break from creating weird effects.

Can you explain this to me more? Is nobreak space &nbsp; Would this go after Word 2 if you wanted to have Word 3 on the same line as Word 2, but the browser was showing it on the second line without using &nbsp;? <h2>Word 1 Word 2 &nbsp; Word 3 <br /> Word 4 Word 5</h2>

DrDoc

Msg#:4590021 7:47 pm on Jul 3, 2013 (gmt 0)

You're contradicting yourself when it comes to html5: <br /> is perfectly legal in html5 (and xhtml5). Nothing harmful at all. In fact it's quite possible to write code that's both html5 and xhtml5 valid at the same time - it's called polyglot html5: [dev.w3.org...] The only thing harmful is tag soup.

Yes, you are quite right. I meant it's harmful to send XHTML as text/html, since that's tag soup. (Traditionally, that's what we see a lot on here, even from seasoned coders -- XHTML 1.0 or 1.1 sent as text/html.) If you are using HTML5 you are certainly free to use the optional <tag /> syntax. To further clarify -- only use (X)HTML 5 (with proper Content-Type) or HTML 4.01 -- do not use XHTML 1.x and the text/html Content-Type.

lucy24

Msg#:4590047 8:30 pm on Jul 3, 2013 (gmt 0) I've overlapped swa66 a little, but we're saying the same thing in different words so it may still be useful.

I think that the template which I use is XHTML

Someone, somewhere, can probably explain why templates and WYSIWYG editors are so fond of XHTML. When you see a rule that says "Don't use such-and-such", try to delve a little deeper and look into the reason for the rule. Simplest form: "don't use tables" doesn't mean don't use tables. It means don't use tables for layout. In the case of <br> it's historically even simpler. The rule is "don't construct paragraphs by inserting manual line breaks" -- the way you'd do on a typewriter. Use the <p> element and let the computer break the lines as needed. Or, in this case, the <h2> element. If you have a long header that you think would work better in two lines-- AND it's all one header, not header plus subhead-- then by all means put in a <br>. But do a little responsiveness-testing. You don't want users getting hit with Here is the first line of my long header and here is the second line of the header But you may also not want anyone to see This subject heading is a very long and complicated and verbose line Sometimes you can cheat by putting &nbsp; between the last two or three words, so if the browser does have to split lines, at least the second part has a little substance to it. Or, if &nbsp; makes your skin crawl-- like all things in html it has its uses and misuses-- make a span.locked {white-space: nowrap;} and wrap the last bit of your header in <span class = "locked">. (I also use it as an alternative to nonbreaking hyphens, but possibly your site does not have as much grammatical content as mine does ;))

phranque

Msg#:4590096 11:15 pm on Jul 3, 2013 (gmt 0) you might also want revisit your previous threads on the subject. H1 tag with CSS and <BR> tag - CSS forum: http://www.webmasterworld.com/css/3776363.htm [webmasterworld.com] Two H1 tags on One Page - Effect in Google SERP - Google SEO News and Discussion forum: http://www.webmasterworld.com/google/3773892.htm [webmasterworld.com]

gouri

Msg#:4590140 2:18 am on Jul 4, 2013 (gmt 0) @lucy24, Thanks for the examples and the advice. The examples you mention are things that I will be on the lookout for. @phranque, Thanks for the links to the other threads. I didn't realize that I had asked some of these questions before, but this thread has taught me a couple of things that I didn't know before.

drhowarddrfine

Msg#:4590385 9:05 pm on Jul 4, 2013 (gmt 0)

If you are using HTML5 you are certainly free to use the optional <tag /> syntax.

This is true but it should be noted that the extra slash serves no useful purpose.

swa66

Msg#:4590640 9:09 pm on Jul 5, 2013 (gmt 0) I actually said intentionally "nobreak spaces" and not &nbsp; Why: In xhtml5 there only a very few htmlentities predefined (&lt;, &gt;, &amp;, &quot; and &apos;) so you need to use the UTF-8 encoded nobreak space instead. &#xA0; is a nobreakspace in case you've a hard time seeing/typing them directly. xhtml1.1's dtd defined them but since there's no dtd anymore ...

brotherhood of LAN

Msg#:4590646 9:32 pm on Jul 5, 2013 (gmt 0) Worth mentioning <wbr> [quirksmode.org] for anyone needing that flexibility, not sure if it helps directly in this case.

lucy24

Msg#:4590713 1:27 am on Jul 6, 2013 (gmt 0) <topic drift>

In xhtml5 there only a very few htmlentities predefined (&lt;, &gt;, &amp;, &quot; and &apos;) so you need to use the UTF-8 encoded nobreak space instead.

### ! I can type a nonbreaking space perfectly well-- but it's indistinguishable to the naked eye from an ordinary space unless I put the text editor into "show invisible characters" mode, which is out of the question. So I've always used &nbsp;. Also &mdash;, for a different but related reason: I edit HTML in a fixed-pitch font. And what the ### are we supposed to do about soft hyphens (&shy;)? I agree <wbr> is enormously useful. And it works fine even in documents with a 4.01 DTD ;) </topic drift>

tangor

Msg#:4591669 12:24 am on Jul 10, 2013 (gmt 0) I can conceive of two line Hn... but have personally never found a reason to use them. This is comment on content presentation (editing to content) and outside the scope of what was asked. Just a thought that a better Hn title/header that fits on one line is better than one that has to be tweaked to fit on two with all the scaling and zooming we see these days on screens tiny and large.

vorobei

Msg#:4611263 12:05 pm on Sep 20, 2013 (gmt 0) Try <p>

DrDoc

Msg#:4611370 5:08 pm on Sep 20, 2013 (gmt 0) Welcome to WebmasterWorld, vorobei! Unfortunately, using <p> inside a header is not valid syntax and therefore will not work. Now, had it been a <div> instead, sure ... but we were talking about headers here ...

tbear

Msg#:4611386 6:23 pm on Sep 20, 2013 (gmt 0) Could you not control the size of <h2>, using css, and force a line break.

DrDoc

Msg#:4611442 9:18 pm on Sep 20, 2013 (gmt 0) It's better to just insert a break than to style the header differently on each page. Plus, it is way more reliable to use a hard break.

lucy24

Msg#:4611448 9:34 pm on Sep 20, 2013 (gmt 0) Oops! overlapped

Could you not control the size of <h2>, using css, and force a line break.

Depends on the exact wording of the header, and also on the exact font used. Forcing a width in pixels is out of the question :: pause here for long digression on responsiveness :: so you're looking at ems. The catch is that an em is a vertical measure. Unless you've set a fixed-pitch font (2 characters = 1em) you can't be 100% sure how many characters fit into, say, 12em. If your header is in a named font, check all of them-- and make sure your em measure also works for the generic fallback (usually either serif or sans-serif).

gouri

Msg#:4611596 3:20 pm on Sep 21, 2013 (gmt 0) DrDoc, Is it okay to use a <p> tag inside a <li> tag?

lucy24

Msg#:4611634 8:20 pm on Sep 21, 2013 (gmt 0)

Is it okay to use a <p> tag inside a <li> tag?

I sure hope so, because I do it often. :: quick detour to validator followed by mopping of brow :: I realize that some designers think of a list as a series of very short items-- but that's not the only thing the structure is good for. As with tables, don't use a list for format. Use it when you're genuinely making a list-- of any length.

gouri

Msg#:4612034 2:25 pm on Sep 23, 2013 (gmt 0) Lucy, Thanks for the response, and I agree with what you are saying about using a list. Can you please give me your opinion on the following: Orange widgets are the best. They contain the latest features and are easy to use. The prices are also reasonable. I want to write the above as a bullet point in a list. I would describe it as a several sentence paragraph (the actual is more than 3 sentences). There are several others like this on the page. I have just written one example. Would it be better to write: <ul> <li>Orange widgets are the best. They contain the latest features and are easy to use. The prices are also reasonable.</li> </ul> or <ul> <li><p>Orange widgets are the best.They contain the latest features and are easy to use. The prices are also reasonable.</p></li> </ul>

lucy24

Msg#:4612075 4:23 pm on Sep 23, 2013 (gmt 0) Oh, like that. I thought you meant sub-sections within lists: :: insert boilerplate about why I flatly refuse to use "lorem ipsum" :: <li>Quo usque tandem abutere, Catilina, patientia nostra?<p>Quam diu etiam furor iste tuus eludet?</p></li><li>Quem ad finem sese effrenata jactabit audacia?</li><li>Nihilne te nocturnum praesidium Palatii, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora vultusque moverunt.<div class = "group"><p>Patere tua consilia non sentis?</p><p>Constrictam omnium horum scientia teneri conjurationem tuam non vides?</p></div></li> Ordinarily there's no reason to double-nest anything. Save that for pure presentational markup <b><i>like this</i></b>. Instead, style the list items to look the way you want them to look. Most likely you'd do this by attaching a class name to the containing <ul> and then make a ul li {blahblah here} and/or ul > li {blahblah here} Styling lists can be a little tricky because there's built-in {padding-left} that you don't know about until you start messing with it. But that's a mechanical issue. It may take a little trial and error.

gouri

Msg#:4612124 7:45 pm on Sep 23, 2013 (gmt 0) Lucy,

Ordinarily there's no reason to double-nest anything.

Does this mean that it is not good coding to put a <p> inside an <li>? If I coded the list with the <p> inside the <li>, would it be okay? Would the search engines be able to interpret the content? Suppose I have 2 bullet points such as the following: <ul> <li><p>Orange widgets are the best. They contain the latest features and are easy to use. The prices are also reasonable.</p></li> <li><p>Blue widgets are also good. They contain some of the latest features and are easy to use. The prices are pretty good.</p></li> </ul> Instead of coding it the way that I have it, how would I code it in the way that you are saying (can you also tell me how to assign the class name to the containing <ul>):

Instead, style the list items to look the way you want them to look. Most likely you'd do this by attaching a class name to the containing <ul> and then make a ul li {blahblah here} and/or ul > li {blahblah here}

I am not sure if this factors into how this is coded, but it may so I also want to mention that a list such as this one is going to be on several pages on the site. This is not just on one page. I appreciate your help. I have only coded a list using <ul> and <li> before, even when the bullet point is a paragraph.

lucy24

Msg#:4612144 8:44 pm on Sep 23, 2013 (gmt 0)

I also want to mention that a list such as this one is going to be on several pages on the site. This is not just on one page.

... and that's why you have CSS with classes. Once you've applied a name, the same style kicks in for any document that uses the stylesheet. (Uh... You do have a shared external stylesheet, right?) <li><p>blahblah</b></li> isn't intrinsically wrong, it's just unnecessary most of the time. HTML: <ul class = "my-special-class-name"><li>blahblah</li><li>blahblah</li><li>blahblah</li></ul> CSS ul.my-special-class-name {margin: 0; padding: 0; list-style: disc outside;}ul.my-special-class-name li {margin: make-something-up; padding: make-something-up;} "disc" (list-style-type) and "outside" (list-style-position) are actually the default values, at least in CSS2. But it isn't a bad idea to spell it out. The word "disc" basically means bullet; it's probably what you think of when you picture an HTML list. Experiment with the "margin" and "padding" values for both ul (the list as a whole) and li (the individual list items). Try more than one browser-- at a minimum, MSIE and another browser. Horse's mouth (de-linked to preserve the fragment): http://www.w3.org/TR/CSS2/generate.html#lists ul.classname li means "any list item within the named <ul>" ul.classname > li means "the top layer of list items within the named <ul>" If you don't have nested lists, it makes no difference.

gouri

Msg#:4612356 6:20 pm on Sep 24, 2013 (gmt 0) Lucy, Thanks for the response.

You do have a shared external stylesheet, right?

I have an external stylesheet, so I would be able to code the element in that and then use it on different pages.

<li><p>blahblah</b></li> isn't intrinsically wrong, it's just unnecessary most of the time.

I think what I might be trying to do is distinguish between a list that has an item in its bullet points and a list that has several sentences in its bullet points. If we have an item list, I think that I would code it in the following way (which I think is considered the standard way of coding a list): <ul> <li>soda</li> <li>water</li> </ul> But I am wondering if the same coding should be applied when each bullet point in the list is several sentences, such as in the following: <ul> <li>Orange widgets are the best. They contain the latest features and are easy to use. The prices are also reasonable.</li> <li>Blue widgets are also good. They contain some of the latest features and are easy to use. The prices are pretty good.</li> </ul> With the <p> tag: <ul> <li><p>Orange widgets are the best. They contain the latest features and are easy to use. The prices are also reasonable.</p></li> <li><p>Blue widgets are also good. They contain some of the latest features and are easy to use. The prices are pretty good.</p></li> </ul> Would search engines interpret the content of a several sentence bullet point in a list better if there is a <p> tag inside an <li> tag? Is an item list the same as a list that has several sentence bullet points? If they are different, should they be coded differently?

HTML: <ul class = "my-special-class-name"> <li>blahblah</li> <li>blahblah</li> <li>blahblah</li> </ul> CSS ul.my-special-class-name {margin: 0; padding: 0; list-style: disc outside;} ul.my-special-class-name li {margin: make-something-up; padding: make-something-up;}

I appreciate the help and explanation with the HTML and CSS coding.

ul.classname li means "any list item within the named <ul>" ul.classname > li means "the top layer of list items within the named <ul>" If you don't have nested lists, it makes no difference.

I am still trying to understand this.

lucy24

Msg#:4612407 8:13 pm on Sep 24, 2013 (gmt 0)

Would search engines interpret the content of a several sentence bullet point in a list better if there is a <p> tag inside an <li> tag?

Interesting question. I can answer it succinctly by paraphrasing Mark Twain: I have no idea :) But someone over in the Google SEO subforum will know.

I am still trying to understand this.

It takes time. Sometimes you need to read multiple explanations from different sources and finally you see one that fits tidily into your brain. In CSS the form onething otherthing with a space in the middle means "any item 'otherthing' that is inside of (formally 'a descendant of') the item 'onething'". The form onething > otherthing with a > in the middle means "any item 'otherthing' that is immediately inside of (formally 'a child of') the item 'onething'". In both forms, "onething" and "otherthing" might be either html elements like p, li, div etc, or classnames like .thisclass .thatclass, or both: ul li "any list item in an unordered list" to distinguish it from ol li if you want things in an ordered list to look different. ul.super li "any list item within <ul class = 'super'>" You can have nested lists: <ul class = "outer"><li>one</li><li>two</li><li>three<ul><li>a</li><li>b</li></ul></li></ul> It is also possible to go through your entire life without ever nesting a list, in the same way that you can go through your entire life without nesting tables. Q: When would you legitimately need to nest tables? A: When you're making an e-book and there really is a table within a table. In this example, all five <li> elements would be covered by a rule for ul li All five would also be covered by ul.outer li while only the first three would fall under ul.outer > li

gouri

Msg#:4613822 5:52 pm on Sep 30, 2013 (gmt 0) Lucy, 1. Thanks for the explanation in the above post about coding a list in CSS. It helps me to understand this, but as you mention, it will probably take me more time. 2. Also, thanks for the suggestion about asking in the Google SEO subforum my question about putting a <p> tag inside an <li> tag.

Dether

Msg#:4637062 12:23 pm on Jan 13, 2014 (gmt 0) good css style of div'es and <p> and other html tags, and you shoudn't have to use it at all

Fatima087Haley

Msg#:4659062 7:06 am on Apr 1, 2014 (gmt 0) Hello ! Instead of <br> you can use "&nbsp;" or "<p>&nbsp;</p>". You can use div tags.

Join The Conversation

• Register For Free! - Become a Pro Member!
• See forum categories - Enter the Forum

Moderators and Top Contributors

• Moderator List | Top Contributors:This Week, This Month, Oct, Sep, Archive, Top 100 All Time, Top Voted Members

Hot Threads This Week

• November 2024 Google Search Observations
• AdSense Earnings and Observations - November 2024
• Report: U.S. Justice Department Official to Ask Google to Sell Off Chrome Browser
• Search Volatility Issue
• Fun backlink hack I’ve been using lately
• How to stop over spending in google ads
• Bookmarking - what do you do these days
• Regarding traffic drops in health care industry
• Efficiency Comparison Between the Codes
• Huge decline on all the links posted from 25th september

1. Home
2. Forums Index
3. Browser Side / HTML 3:40 am Nov 23, 2024