What to Use Instead of

Forum Moderators: open

Message Too Old, No Replies

What to Use Instead of

gouri

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 to go to the second line.

Is there a way to go to the second line instead of using ?

Since I am also planning on using the line-height feature, I don't have to use the 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 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
 
Word 4 Word 5</h2>

I would like to use something instead of if it is possible.

I appreciate your help.

DrDoc

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

<h

n

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

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

I would like to use something instead of 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 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

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: 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

7:39 pm on Jul 3, 2013 (gmt 0)

DrDoc,

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

I think that I'll use 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 would seem to be a very good choice.

Looks like I felt that was not good to use, but after reading what you wrote, 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   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  ?

<h2>Word 1 Word 2   Word 3
 
Word 4 Word 5</h2>

DrDoc

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

You're contradicting yourself when it comes to html5: 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

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 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 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 . 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   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   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 . (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

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 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

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

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

9:09 pm on Jul 5, 2013 (gmt 0)

I actually said intentionally "nobreak spaces" and not  

Why:
In xhtml5 there only a very few htmlentities predefined (<, >, &, " and ') so you need to use the UTF-8 encoded nobreak space instead.

  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

9:32 pm on Jul 5, 2013 (gmt 0)

Worth mentioning [quirksmode.org] for anyone needing that flexibility, not sure if it helps directly in this case.

lucy24

1:27 am on Jul 6, 2013 (gmt 0)

In xhtml5 there only a very few htmlentities predefined (<, >, &, " and ') 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  . Also —, 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 ()?

I agree is enormously useful. And it works fine even in documents with a 4.01 DTD ;)
</topic drift>

tangor

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

12:05 pm on Sep 20, 2013 (gmt 0)

Try

DrDoc

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

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

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

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

3:20 pm on Sep 21, 2013 (gmt 0)

DrDoc,

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

lucy24

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

Is it okay to use a 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

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>Orange widgets are the best.They contain the latest features and are easy to use. The prices are also reasonable.</li>
</ul>

lucy24

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 like this. 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

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 inside an <li>? If I coded the list with the 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>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>

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

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

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>blahblah</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 tag:

<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>

Would search engines interpret the content of a several sentence bullet point in a list better if there is a 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

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 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

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 tag inside an <li> tag.

Dether

12:23 pm on Jan 13, 2014 (gmt 0)

good css style of div'es and and other html tags, and you shoudn't have to use it at all

Fatima087Haley

7:06 am on Apr 1, 2014 (gmt 0)

Hello !
Instead of 
you can use " " or " ".
You can use div tags.