I want to use <p> instead of <br><br> since it takes less space and I can change how big of a gap it will create (changing the top margin of p).
However when using a floating image using <p> will make the row appear below the image instead of beside it.
I was think about setting the display property to inline but that makes the <p> not changing row at all.
So, how can i make p behave like br?
You don't 'make <p> behave like <br>', you use the right element for the job. If you're wrapping paragraphs of text, you use a <p> tag.
Outside of HTML emails, I don't ever see a use for a <br><br>.
p { height:(designated height of space); }
note that this only works if the line is very short and not breaking; or you will end up with a mess.
Its not really good practice to change the br tag...I mean that's why standards exist. like #hunter said before.
Related
I'm doing some of these basic lessons for HTML on Codeacademy, and I've hit my first round-block. Why doesn't this construct work properly?
<h1>
First text.
<h4>
I'm a different size than the first text.
</h4>
I'm not the same size as the first text. Why?
</h1>
I don't really know what headings are. Code Academy hasn't really explained much.
Thanks to anyone who takes the time to look at my n00b question.
I can't find a good reference for this, but it looks like nesting these tags is simply not allowed.
Browsers are pretty lenient about what they'll attempt to display. In this case, I believe the browser closes the h1 tag for you when it encounters the h4 tag. Then it quietly ignores the spurious </h1> it finds later—remember that it already closed it for you.
So the actual elements I see in Chrome are roughly this:
<h1>First text.</h1>
<h4>I'm a different size than the first text.</h4>
I'm not the same size as the first text. Why?
You can see this yourself in Chrome's developer tools (or the equivalent in your browser of choice).
UPDATE
The HTML 5 spec is a good place to learn about this. If I'm understanding it correctly, h1, h2, etc. are "flow content" and expect "phrasing content" to be nested inside (not other flow content). I'm new to reading this spec, so I may be misunderstanding the structure of the document. Someone please correct me if I'm wrong!
If you want to achieve this used span tag instated of nesting head tag.
Like this :
<h1>
First text.
<span>
I'm a different size than the first text.
</span>
I'm not the same size as the first text. Why?
</h1>
CSS:
h1 span{
font-size:20px;
display:block;
}
Heading tags are block level elements like <p> tags. You can think of them taking up a whole line. Thus with your example you're trying to squeeze a whole line inside of a full line. It just won't fit. Your browser probably assumes you meant to have a </h1> right before the <h4> tag in your example. Thus the remaining text after the </h4> tag is just seen as plain text and the closing </h1> tag is simply ignored.
If you want switch between h1 text and h4 text. you need something like this:
<h1>first text.</h1>
<h4>I'm a different size than the first text.</h4>
<h1>I'm now the same size as the first text</h1>
If for some inexplicable reason, you want the h1,h4,h1 tags in the same line. You'll need to use css. You could add a class, then set them as inline block. However, if you just want to change the styling of text in a line, you should use span tags instead.
I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.
<b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>
<p class= "mscFlapText" id='flap0'>This is the Flap text </p>
EDIT:
OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.
Simply wrap both in the same p element and place .mscFlapText within a span instead:
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
JSFiddle demo.
It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics; they aren't designed to go inline with each other.
You can use:
p.mscFlapText {
display: inline;
}
But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.
Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.
So, I have a text, written in a <p>, and I want to add a <div> (that contains a word) in the middle of the text, exactly like the codeblocks are this question.
There is a small constrain in my case, the: <p> is aligned-center, and thus has float: none.
I'm sure I missing something, but I'm not being able to get it, and I also don't find any suitable combination of keywords that provides me the answer in google or stack.
I tried putting the div inside a <code>, but it didn't worked (even thought a simple word works).
Try to apply display: inline or inline-block to the div CSS ... and plz make a fiddle (http://jsfiddle.net/) if you can ... it's very helpful.
Should I use <br /> and in HTML to position elements, or should I just use CSS display:inline with padding/margin for positioning and all styling? what are pros and cons with both?
Use <br> to represent a linebreak inside a block element and use to represent a non-breaking space inside an inline element. Nothing more. For the remnant just use CSS the smart way with help of under each the display, float, padding and/or margin properties.
<br /> has its uses, but if you find yourself using   a lot, I would consider finding better ways to align things. is just ugly and clunky.
If it's tabular data, use a table. Your life will be much happier.
If it's not tabular data, use css, as BalusC suggests.
Ideally you should position everything with css, and only use <br /> (line break) and inside <p>s.
But this isn't an ideal world ;)
<br /> Can really go either way. But if you find yourself using it to adjsut paragraph spacing orsomething like this then you really have to ask yourself "is there a reason why im using breaks instead of applying a class to adjust margins?" on the other rarely if ever makes any kind of sense outside of a paragraph (<p />) and half the time theres not much use for it ther any how as using text-indent is preferable for indenting the first paragraph and much to the chigirn of Editors everywhere im completely opposed to the double space prepending of senetences on the web - as far as im concerned that is a print only thing.
In HTML5 you also have the new
http://html5doctor.com/element-index/#w
the answer is not black and white, it depends on your content, sometimes it should be and in some cases the so the content will be on a single line.
if you want it as block you can use
Using CSS margin and padding will give you greater flexibility to make adjustments later on.
I've been wondering if I can use <p> </p> (just space in paragraph) instead of <br />
Because I love to keep my code semantic and thought if this is right has been bothering me for a while now. I have seen WYSIWSG editors (TinyMCE) use this, but I still rather ask then do it wrong.
That is not "semantic", an empty paragraph is something that more or less cannot exist, semantically. It contains no information, i.e. no semantic content. All it does is change the visual layout, i.e. the presentation.
You're far better off using styling to change the margins, borders or padding to achieve the effect you're after.
What's wrong with using the margins of the paragraphs for vertical-spacing instead?
<p>Hello World</p>
<p>This is much cleaner than using empty tags with non-breaking spaces.</p>
The right way to do it is with CSS: use the margin-top or margin-bottom.
<p> </p> is pretty horrible... I'd rather see <br> than that (even though it may be less "correct").
<p> </p> is not semantic, so I don't know how that helps you.
You should set the space between the paragraphs with css.
I advocate wrapping items in block-level tags, such as divs and ps. This way I don't need either. If you want to space out elements, you should be using margins. You can be more accurate with margins anyway.
In a situation where you're forced to have a line break, use <br />: it, unlike empty paragraph tags, actually does mean 'line break'. There's almost always a better way to do things though.
It's HTML. You can use whatever it wants as long as you're sure it will render the way you wanted on all the browsers you're gonna use. I don't understand what you mean by "keep my code semantic" so I'm not sure what your issue with <br> is. But if you're talking about formatting and such, turn to CSS.