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.
Related
I need to create a website and I would like to increase the size of the buttons because it looks really really bad.
I'm not allowed to use any form of CSS or JavaScript for this project and the solutions I found so far all use CSS.
I've tried inserting the buttons into a table but that didn't do anything to help me and all the solutions I found on the internet either don't work or use CSS
You can use header elements like <h1>, <h2> etc. Semantically it may not be very 'clean' to use in this way (you are not creating headers as one would do in e.g. a publication), but I'm afraid there's not much else.
<button>Standard size</button><br />
<br />
<button><h1>Using h1</h1></button>
<button><h2>Using h2</h2></button>
<button><h3>Using h3</h3></button>
<button><h4>Using h4</h4></button>
Is it possible in html/and if so how?
I want to make something like:
Text
(10x space)Text"br"text
How to make it happen, as for current knowledge only possibility seen "left center right"
SOLVED
...........was in between..............
solution of   correct, however its unperfect:
As it would take huge amounts of spaces to adjust to long sentences especially,
separate spaces after "br" would be needed as well.
any better solutions?
https://i.stack.imgur.com/50s0c.png
...........................
padding not worked, is it is only for css? Or did i wrote it bad?
<P><padding-left> Music/Memes<BR>Lectures..</padding-left></P>
Use HTML Entity: for spaces in HTML.
e.g.,
<p> Hello World</p>
UPDATE:
We also have Other spacing entities in HTML: In case you want play around.
—the em space; this should be a very wide space, typically as
much as four real spaces.
—the en space; this should be a somewhat wide space, roughly
two regular spaces.
—this will be a narrow space, even more narrow than a regular
space.
However, if you require a lots of spacing I recommend using CSS padding and margins as per your requirement. :) If you do not want to use a CSS file. You can do inline-style as shown below:
CODE DEMO:
<div style="padding-left:16px">Music Memes</div>
<div>Lectures...</div>
And yes coming to your last statement. Yes indeed <P><padding-left> Music/Memes<BR>Lectures..</padding-left></P>, this is not the right way to do it :)
Is it more efficient to add a margin to an HTML element or to insert a <br/> somewhere around it?
I wonder how both ways differ in the type of page rendering and, of course, how they differ in speed.
Adding a margin to an element, makes it much more efficient to work with. Just call the class or element, which will automatically add the margin.
A line-break might be forgotten now and then.
As for the speed: No experience in performance, but as you don't have to wait for the css, a line-break might be some nano seconds faster...
But then again, if you are using multiple elements which need some whitespace below adding a margin to it might be better, as your amount of code-lines will reduce (less kB).
It depends on what you want to do. If you are working with an element that is a part of a layout, then you MUST use margins/paddings. You can use <br /> to make a little correction inside the text for example, but my way is to create a CSS class for <p> or other elements like that and simply use it. You can make a classes even for <span> elements to show it in some proper way. This is how I deal with this kind of issues. I think that using a lot of <br /> isn't smart.
And what others say, margin gives you more control.
I am trying to word-wrap an email address within a div, where otherwise it would overflow because it's too long for the div's width.
I know this issue has been covered here before (e.g. this question), but read-on, because I cover all the possible solutions mentioned there and elsewhere.
None of the below solutions do exactly what I want:
CSS
"word-wrap: break-word".
Depending on the div's width, this breaks the email address at awkward places. e.g.
info#longemailaddress.co.u
k
Use a Soft Hyphen within the HTML:
This is really well supported, but renders a visible hyphen on the page, leading user to believe the email address has a hyphen in there:
info#long-
emailaddress.co.uk
Use a thinspace or zero-width space within the email address:
(thinspace)
(zero-width space)
Both of these insert extra characters (bummer if user copy-pastes)
Linebreaks...
<br />
... are out because, most of the time, the div is large enough to contain the email address on one line.
I guess I'm hoping for some ingenious way of doing this in HTML/CSS, perhaps making use of pseudo elements (e.g. :before / :after), or by using a soft hyphen but somehow hiding it with CSS in some clever way.
My site uses jquery, so I'll resort to that if I must, although I'd rather not include a whole hyphenation library just for this one little problem!
Answers on a postcard please. (Or, ideally here...)
You can clip the text and use a tooltip
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
What I do is on hover show the full text as tooltip or use the title attribute for tooltip.
<p class="email" title="long-email-address#mail.com">...</p>
Maybe you can try <wbr> instead of <br>
Unfortunately, this won't work in IE.
word-wrap:break-word is based on the width of the container you want to break the word in. It's not going to break it where you decide to. You are unfortunately out of luck unless you want to reduce the width of the div so that it breaks where you want.
The other solutions, as you've discovered, are inadequate for your needs. Additionally, using a "jQuery hyphenation library" probably won't fix your issue either because it'll just be injecting the characters, line breaks, or so on just as you tried. You end up with the same problem.
I don't mean any offense by this, but maybe it would be good to rethink the design, rather than work around the design? Robin's answer is a decent alternative, though you won't be able to select the email address without javascript.
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.