I would like to enclose two words of a 18 word sentence in a H1 tag. BUT, every time I do so, the two words enclosed with the H1 tag appear on a separate line. I want the two words enclosed with the H1 tag to appear on the same line as the rest of the sentence.
Can anybody tell me how to do this? Below is my css code:
Here is the code:
<li class="indexbodytext750">Download one of the many <h1>layouts<h1> available from this website</li>
and I tried this code too (though on restrospect, I dont think this works, as it is missing the all important h1 tag, which is the whole purpose of doing this):
<li class="indexbodytext750">Download one of the many <span class="h1text">layouts</span> available from this website</li>
<h1> is a block-level element. That's why it appears on a new line. Changing to a <span> was a much better choice because it is an inline element. If you absolutely *must* embed your <h1> in an <li></li> pair, set the CSS for the tag to include:
Here is the code:
<li class="indexbodytext750">Download one of the many <h1>layouts<h1> available from this website</li>
and I tried this code too (though on restrospect, I dont think this works, as it is missing the all important h1 tag, which is the whole purpose of doing this):
<li class="indexbodytext750">Download one of the many <span class="h1text">layouts</span> available from this website</li>
Thank for your help!
Sorry, but that really isn't the way to use heading tags. You could possibly be penalized by SEs for not being semantically correct in addition to not using tags in a proper syntax. You are asking viewers to download layouts and that really should be a link to them at least.
It is doing that because they are meant to be in a line by themselves. You can de-pad and de-space it in you css like someone mentioned, but that may mess you up on other pages. Only do it that way if you want them all to be that way. What is easiest for me on just h1 (or whatever) is to use the <span style="font-size:24px;font-weight:bold;color:#345345;"> etc in the middle of the <h1> where I want it, that way it doesn't mess up my formatting on other pages.
Last edited by Williamsun; 07-29-2012 at 05:27 PM.
In case you did not realize, the H1 tag is a structural part of the web page I.e.:
- There should be one, and only one H1 tag on a web page.
- It should closely follow the <body> tag.
- It is to be used as the main heading.
- Alternatively, you can use a graphical image where the main heading should go. In which case you STILL need an H1 tag but may choose to hide it by putting in the CSS:
In case you did not realize, the H1 tag is a structural part of the web page I.e.:
- There should be one, and only one H1 tag on a web page.
- It should closely follow the <body> tag.
- It is to be used as the main heading.
- Alternatively, you can use a graphical image where the main heading should go. In which case you STILL need an H1 tag but may choose to hide it by putting in the CSS:
Sorry, but that really isn't the way to use heading tags. You could possibly be penalized by SEs for not being semantically correct in addition to not using tags in a proper syntax. You are asking viewers to download layouts and that really should be a link to them at least.
Major Payne is right, that is not the correct way to use an h1 tag. Header tags are meant to be semantic, not used for design. Semantic means that they are important for the page meaning. h1 tags should be used as close to the top of the page as possible in order to give the body of the text an overall subject and focus. If you want to emphasize the meaning of the word "layout", you could put it in a <strong></strong> tag and then remove the bold in css (which is automatically attributed) like this:
strong { font-weight:normal;}
In html5, you can use more than one h1 tag, but only within <section></section> tags. But this needs to be done correctly and again, <section> tags should be used semantically and not for desired visual effect.
Reply With Quote
Originally Posted by CowGirl
Bookmarks