&nbsp;...<P>...and...<BR>

Discussion in 'HTML & Website Design' started by boron, Feb 29, 2008.

  1. #1
    I intend to mail an article in HTML format; it will be published on a WP blog. I can only edit HTML.

    Questions:

    1. <H5>Subtitle</H5>?Text...

    I want the text to be as close to the subtitle, so I've put it directly after the subtitle. Is this OK, or should I put <P> or <BR> in between? On a preview in WYSIWIG editor, it looks OK.

    2. I've noticed that <H5> tags may be of the same size as the other text and <H6> may be even smaller, what disturbs me. So, should I use additional <font size> tags (I have no access to CSS or PHP files)? Will this cause any mess?

    3. <P>&nbsp;</P>
    My WYSIVIG editor uses this to make an empty line between paragraphs. Should I use <BR><BR> instead ?
     
    boron, Feb 29, 2008 IP
  2. codeyourpsd

    codeyourpsd Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    1 - if it looks as you want it in wysiwyg mode it should look the same when published. if not, just edit it afterwards!
    2 - use style="font-size:16px;" (or apply to all h5's in a stylesheet) etc to make h5's bigger
    3 - assuming you want a gap between all p's -- use a style sheet to add p {margin-bottom:10px;} or however big.
     
    codeyourpsd, Feb 29, 2008 IP
  3. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #3
    Side-note: uppercase HTML tags are bad, bad bad.

    Should be <p> and <br> or <br/>.

    There is also rarely any need for &nbsp; when you can use margins and paddings on spans and divs..
     
    blueparukia, Feb 29, 2008 IP
  4. boron

    boron Well-Known Member

    Messages:
    1,072
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    140
    #4
    But if I write them small, they change automatically to uppercase on saving.
    EDIT: I pasted the code in a Wordpress blog HTML editor and all the code changed to small.

    I can ONLY edit HTML code (in WYSIWIG editor - Google documents, btw). Then I want to mail the article in "zipped HTML format", and I want that the recipient can publish it on his WP blog without any furter editing.

    If I mail in Word format, it works great, but H tags are lost (I use H tags for SEO purpose). So I need to send as HTML and fix H tags with <font size> I guess. If this is not safe, well, then no H tags.
     
    boron, Feb 29, 2008 IP
  5. RantRave

    RantRave Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes, Wordpad will screw up formatting. Have you tried using Notepad? I use it all the time with no troubles.
    Upper case or lower does not matter when writing your code, accept aesthetically maybe, as far as I know.
    There are many tutorials on HTML on the Web. Just do a search.

    Rod


     
    RantRave, Feb 29, 2008 IP
  6. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #6
    &nbsp; means Non-breaking space. It represents the ' ' character (between the tick marks)

    <br> is a line break. when you hit enter before the end of a line in your word processor? that's a line break

    <p> is paragraph. Because all of the lines in a paragraph can have wonky spacing etc etc through CSS, you can modify with CSS, the distances between paragraphs withut adding extra line breaks.

    If you're doing parapgraphs of text, use <p> instead of a <br /><br/> for two line breaks.
     
    innovati, Feb 29, 2008 IP
  7. boron

    boron Well-Known Member

    Messages:
    1,072
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    140
    #7
    I coded article this way:

    <H4>subtitle</H4>
    text text
    <BR><BR>
    text text

    What could be the problem with using <BR> instead of <p> ?
     
    boron, Mar 3, 2008 IP
  8. TDD-Designs

    TDD-Designs Peon

    Messages:
    98
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    best way is to use CSS, as you have no access to the CSS files, use inline css:

    <style>
    h5 { ... }
    </style>

    etc.
     
    TDD-Designs, Mar 3, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    The fact that the Text is next to a block element (the H5) means there's no need for any extra stuff like a <p> or a <br> because, remember you asked me why there was space after your headers? Because unless you tell it to have no margins, it will be default have that newline and some margin space. It's a block. Adding a <br> or a <p> will merely add MORE space, which I think you said you don't want. See the bototm of this post for how to get the text as close to your subheader as possible.

    Yes, it will make a mess... you do actually have one access to CSS-- as an inline style. It's used this way:
    <h5 style="font-size: 14px; font-weight: normal;">Text inside the header</h5>
    So it goes like this: style=" " and inside, each property is followed by a : and each value ends with a ; (sometimes you see it without... that's because technically the last value doesn't need the ending ; but get in the habit of always using it).
    The FONT tag is soooo deprecated... we're not living in the age of Nirvana being top on the radio anymore : )

    You should probably use a <BR> since you have so little control over anything. As it is, there's no way your page will be valid in any way shape or form : ) But while in ye olden days of HTML1 (which never really existed in a written spec) you could get away with <P> as this meant "paragraph break", today (and since the 90's) it means "paragraph" and wherever you have an opening <p> before some text, you must close it after the paragraph </p>. I don't know if you have that much control with this silly programme.

    They both make the space but for different reasons. Go with the <br> for now as your HTML is already unsemantic etc. In fact, I'm not sure how much SEO effect the headers will have if the rest of the page is one big spaghetti-monster mess.

    The reason your editor is using <P>&nbsp;</P> is because that's the only way it knows to make a space... basically, it's inventing a non-existant paragraph (the non-breaking space) so that it can wrap <p></p> tags around it, so that a space is created (because a <p> is a block element which means they come automatically with a line-break or new-line at the end). Truly it is better to use the correct tool even though they both have the same visual effect... remember what I told you about <h#> tags not making new lines but instead having space around them? The same thing happens with the <p>s. They do make a new line (headers are also "blocks" and make new lines) but mostly come with default margins around them.

    The reason to use lower-case tags: for HTML you technically don't have to, as HTML is case insensitive. XHTML (because XML) is case sensitive so many people get themselves in the habit of lowercase for everything. I personally use lowercase as well, esp because I waffle between XHTML and HTML. Nothing will break if you've got HTML and UPPERCASE TAGS but what the hell...

    Is there any way you're able (or willing) to learn proper HTML and CSS, write everything up in something like Notepad or EditPlus or Notepad++ or whatever... with the CSS maybe as an internal stylesheet, and then whatever zipping programme to zip it, and see if the guy you're sending these articles to can get them to display properly? If you have an inline stylesheet (between the <head></head> tags), it will, for your document, override any CSS on HIS page (assuming his CSS is external like it should be... usually is on bloggity-blog-blogs).

    You are thinking about SEO. I think that means you should go for it and learn semantic HTML. Google doesn't punish anyone for sh*tty code, but it makes the bots work harder to find what's most important on a page (which is why the H# headers have been recommended to you, cause they help point to the most and least important stuff on a page), and Semantic HTML styled only or almost only with CSS is really the best way to go.

    The person to really talk to about this is Dan Schulz. He's even built his own little (niche) search engine. He knows a lot about SEO (and about all the myths) and about semantic HTML helping in that.

    *header space
    You asked earlier how to get rid of the space around the headers, and I told you a CSS solution. Now that you say you can't really access anything like that, you'll have to do it inline.

    <h5 style="margin: 0;">Subheading</h5>
    If 0 is too little, you could instead use
    <h5 stlye-"margin: 0 0 5px 0;">subheading</h5>
    I never got it straight if the other values go to 0 if you set only, say, the bottom. The numbers go like this: top, right, bottom, left.
    So, the above sets everyone at zero except the bottom, if you want a little bit of space between the header and the text (which I think is a good idea). Otherwise:
    <h5 style="margin-bottom: 5px;">subheader</h5>
    would do the trick.
     
    Stomme poes, Mar 3, 2008 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Speaking of the devil, I was just about to PM you, Stomme poes... (and for the record, that search engine is still under development - I haven't touched the code in months though as my designer took on a new job that literally sucks up all his free time)

    Anyway boron, what does your code look like?
     
    Dan Schulz, Mar 3, 2008 IP
  11. boron

    boron Well-Known Member

    Messages:
    1,072
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    140
    #11
    @ Stomme poes: I think I did understood all, style and all, I can use it in a HTML code, and I was just worrying if this will or will not override default settings on an end site (WP blog with no additional changes by the admin). So you gave me a great answer, it should work. I'm testing all the time by copy-pasting in one my WP blog as a draft. These silly empty lines still bother me. They are showed different in almost any different blog... I'm now using only H tags and <BR> and nothing other to make empty lines.

    @Dan Schultz
    My code is like this:

    <H3>Subtitle</H3>
    text text
    <BR><BR>
    text text
    <H4>Subtitle</H4>
    <UL><LI>text</LI>
    <LI>text</LI></UL>
    <H4>Subtitle</H4> etc

    Exactly like this. No <p> tags, no &nbsp; - I manually removed all. It looks great in Google documents, but when I copy paste the code into a WP blog, well, still some redundant empty spaces.

    Should I use <BR/> and if I do, should it be this way : <BR><BR/> or just always <BR/>?
    Also: Which font size WP ues as a default? 10?


    It would be graet if someone would like to copy-paste some of my code in a WP blog to see if it works properly.

    About "small" code: it automaticall turns to small, when you paste it in a WP blog.
     
    boron, Mar 3, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    The thing is, about font sizes and whatnot, is that anyone can set their font sizes and everything else in their WP blog. Which is why your page would look different on different blogs. I suppose that could be an advantage to using inline styling (which we normally don't advocate) as it will override any CSS on anyone's WP blog. However, this means you'd have to set these stylings for everything... anything you DIDN'T set a style for would likely receive styling from the blog's CSS.

    Ah, this is a difficult one. <br> is for HTML and <br /> is for XHTML... the browsers react to both of them the same way, but if your page has <br /> and then your page is set on someone's HTML4 page, then their page is invalid. If you use <br> and your document is set on someone's page which is XHTML, then their page is also invalid. Do you happen to know which doctype the majority of your pages will be using? WP owners have to deal with the stuff normally anyway, cause all those widgets and adsense and googlie stuff also usually have invalid code.

    I think Dan wants to know what your whole document looks like, meaning, what's the first line in your document etc? For instance, you've got HTML tags but do you have your very first text at the top <html>? Because that could also cause a problem for someone importing it into their page as they will already have their own <html> tag and there may only be ONE per page.

    Can you post your code, without the actual text, to show the beginning and end of your document?
     
    Stomme poes, Mar 3, 2008 IP
  13. boron

    boron Well-Known Member

    Messages:
    1,072
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    140
    #13
    Beggining of the code:

    <H3>Definition of ...</H3>Acute... (<B>1</B>).
    <H3>Causes of ...:</H3>A) Acute Infectious ...:<BR><BR>
    <UL>
    <LI>Bacteria;
    <LI>Viruses; .....

    End:

    <LI><A href="http://childbirth.org/articles/really.html">http://childbirth.org/articles/really.html</A> TEXT</LI></OL><BR><BR>

    This on the end is the last link from the references list.
     
    boron, Mar 3, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I know the first thing Dan and everyone will say is that using headers for SEO purposes is worthless if you don't follow the proper set up. The only reason it would help for SEO is that teh googliebots would know what's the most important part of the part, what the subparts are, etc. That means for a web page, you'd start with an <h1> naming the page ("infectious diseases and their causes" for instance). Then you'd have sub-headings in decreasing levels of importance. <h2>s would be sisters of each other-- equal in importance, but remaining under the main umbrella of the <h1> (that is, they would be about infectious diseases but maybe each one would be more specific-- one <h2> would be about causes, and another about symptoms). Then come the h3's. So under each <h2> there are <h3>s like under our hypothetical <h2> called Causes, there could be an <h3> called "parasites", and another <h3> called "Bacteria" and another called "Viruses". Under each <h3> then would be the <h4>s.

    Now your situation is a little different since your article would be sitting on a page someone else has which would likely have its own <h1>s so I'm not sure how that would work. But the general idea is that you take this article and mark it up like it were a school report or a government document.
     
    Stomme poes, Mar 3, 2008 IP
  15. boron

    boron Well-Known Member

    Messages:
    1,072
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    140
    #15
    My deepest desire is to use H tags instead of any bolded word. :D
    But I have to follow my current skills.

    Oh my.

    The title of a blog post is <H1>.
    My largest <H>s are <H3> and directly under them, there may be H6 or H4 or H5.

    <H1>Post title</H1>
    <H3>First subtitle</H3>
    <H5>...</H5>
    text
    <H5>...</H5>
    text
    <H6>...</H6>
    <H3>...</H3>
    text
    <H6>...</H6>
    text

    This is a proper set up? Or there should be H3-H4-H5-H6 without skipping any H size?

    EDIT: After reading some pots: Under each <Hn> tag there must be at least two <Hn-1> tags. This is correct?
     
    boron, Mar 3, 2008 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #16
    What does this WordPress blog look like?
     
    Dan Schulz, Mar 3, 2008 IP
  17. boron

    boron Well-Known Member

    Messages:
    1,072
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    140
    #17
    This is a blog:
    http://www.allhealthsite.com/

    I've solved most of the problems (spacing, size of tags).

    Is below setup OK? From some reason, under the second h2 tag, I had to put two h6 tags first, followed by h3 tags.

    <h1> (Title of the blog post)
    <h2>Subtitle</h2>
    text
    <h2>Subtitle</h2>
    <h6>Subtitle</h6>
    text
    <h6>Subtitle</h6>
    text
    <h3>Subtitle</h3>
    text
    <h3>Subtitle</h3>
    text
     
    boron, Mar 4, 2008 IP