Does it matter ever , Whitespace between HTML elements in source? when we give style through CSS? and need cross browser compatibility
For any browser?
Yes, for example: pretty much any time the data is inline.
Compare:
<p>H<b>e</b>llo, world</p>
and
<p>H <b>e</b> llo, world</p>
Whitespace does matter, but all whitespace is treated as one space. For example,
<span>hello</span> <span>there</span>
Will be rendered by a browser exactly the same as
<span>hello</span> <span>there</span>
Unless a <pre> tag is being used.
Compare these two lines in a browser:
<img src="..." /> <img src="..." />
<img src="..." /><img src="..." />
You'll see that there is a space between the images in the first line, but not the pair in the second.
Text areas are also affected with whitespace between opening and closing tags as it assumes any content between the two are its content that it should show....
Depending on the amount of whitespace within the html, css, or other files, it could have an impact on how long it takes to download to the user's system.
ie6 used to put gaps inbetween some tags when rendered. It also matters when Office 2009 renders it's html emails using word. If you have linespaces it can put in 2px gaps.
As pointed out by Douglas and David Dorward, white space does matter.
However, in HTML blocks (i.e. not javascript or other embedded content-types), all consecutive white space are equivalent to a single white space. That is, hello <b>world</b> is equivalent to
hello
<b>world</b>
The exception to this rule is within <pre>..</pre> blocks, which are white space sensitive by specification.
It depends on the content model of the element containing the whitespace. If the model is text-derived, including when it is mixed elements and text, then the whitespace matters (though multiple whitespace characters are usually collapsed into one and leading/trailing space removed entirely, with the exception of inside a <pre>). If the model only admits element content, then whitespace has no significance at all; e.g., whitespace between a <ul> and its <li>s is supposed to be wholly unimportant.
Related
The html attribute dir and the css text-align property acheive the same result. E.g. consider the two cases:
dir="rtl"
<p dir="rtl">
one two.
</p>
text-align: right
<p style="text-align: right;">
one two.
</p>
The only difference between these two results is the placement of dot. Why isn't <p dir="rtl"> one two. </p> translated to .owt eno? If it can't then what is the use of dir attribute at all?
The placement of the dot is the crucial point of the difference between dir and text-align. Handling right to left scripts is much more involved than handling the alignment of the text. To understand better, read
https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
A sequence of rtl characters such as سلسلة نصية الذهاب works automatically because of the Unicode bidirectional algorithm relying on the character's directional properties, but you need more to properly handle punctuation, images, and bidirectional text.
bdi is an element, not an attribute name.
don't get bdi confused with bdo. The former applies heuristics to guess the direction of text, the latter overrides the bidirectional algorithm (and is very rarely used).
For a more complete picture about how to work with RTL (or actually bidirectional) text in html, see
https://www.w3.org/International/tutorials/bidi-xhtml/index
Instead of
<p>Hello <img src="helloworld.jpg"> World</p>
I would like to have:
<p>Hello</p><img src="helloworld.jpg"><p>World</p>
<p> has a padding of 40px and I would like the images to use all space available.
You can turn off paragraphs for all content (link), but as far as I know you can't turn it off for certain elements only.
What you can do is modify the HTML after retrieving it from the database but before outputting it. You haven't specified your server-side language, for C# I've found that CsQuery is great.
I'm playing around with word-wrap and white-space for a while now, but I cant get this to work. I want no word separation in my headings, so long words should just be put into the next line. To clearify this, if the container is too small, I dont want it to behave this way:
A veeeeeeeeeeeeeeee-
eeeeery long heading
I want it to be that way:
A
veeeeeeeeeeeeeeeeeeeeery
long heading
This is my markup:
<header>
<h3>Some random blog heading</a></h3>
</header>
CSS:
article h3{
width:200px;
word-wrap:normal;
word-break: normal;
white-space: nowrap;
}
I think I tried every possible combination, but it didnt do what I want. I cant imagine that it isnt possible.
If you currently see a word divided in two lines as in your first example and you don’t want that, you just have to locate the thing that causes the word division. This can be CSS hyphenation with the hyphen property, or it may be caused by the SOFT HYPHEN character (possibly inserted via scripting), or even a common hyphen character “-” in the word – most browsers treat it as allowing a line break after it.
If you need help with the analysis, I think you need to reveal some of the actual content and markup and perhaps styling and scripting.
Apply css on it
<div style="word-wrap:break-all;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>
or
<div style="word-wrap:break-word;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>
I've worked at few places and seen two different methods of doing a section or line break in HTML.
One way I've seen it done is like this:
<div class="placeholder-100pct"> </div>
And the other is just using plain old <br />.
Any benefit to one over the other or would it be just a matter of style?
Use <br/> when you want a new line in a paragraph, like so:
<p>Hi Josh, <br/> How are you?</p>
This might be useful when writing an address:
<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>
Using a div will automatically give you a new line, but if you want a space between two elements, you can use a margin on the div.
Do not use <br/> to get some space between two divs:
<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>
Hope this helps
A div is a generic container. A br is a line break. Neither is particularly well suited for expressing a section break.
HTML 5 introduces sections. You mark up each section, not the break between them.
<section>
<!-- This is a section -->
</section>
<section>
<!-- This is another section -->
</section>
Use a <br /> when it makes semantic sense to do so. If all you need is a line-break, that's what it's there for. If you're trying to split sections of different types of content, then each section should be in a container of its own. For example, if you have an address where each line of the address would show on a separate line, it would make sense to do:
<address>
123 Main Street<br />
Anywhere, USA 12345
</address>
One obvious difference is that <br> is inline element, while <div> is not.
So this:
<span>Some text broken into <br /> lines</span>
... is valid HTML code, while this:
<span>Some text broken into <div> </div> lines</span>
... is not, as you cannot place block elements inside inline elements.
<br> has the disadvantage of limiting the size of your gap between sections to the line-height applied to or inheritted by the <span> it sits within.
In other words, with <br>, the size of the break can only ever be exactly the height of one line of text.
Definitely wrap each your "sections" in their own tags, and use margins to control spacing, if you want to retain any control over the spacing. The difference is not just in the semantics of markup.
If you are looking to provide a break between two sections of content in the sense of a thematic break, then <hr> is the element you should use.
W3C specification
The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book.
It's also relatively straightforward to style these as needed as they can take whatever size you require. Note however that it is a void element and cannot contain content (although you can of course add a background-image to it as needed).
I am trying to learn fundamentals of html and markings.
I want to create an anchor which containes two lines of information.
first line: the name of the link
second line: short explanation
e.g.
<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>
Is this correct?
How should the following (2nd span) be modified if necessary?
Thank you
PS. Both lines need to be surrounded with span for css-styling.
First off, don't rule out using a br tag. This is a semantically-appropriate place for a br tag (forcing a hard break inside a line or paragraph of text). Plus, if you use a br tag, it may no longer be necessary to put either of the two lines of text in separate tags, unless you want to style them differently.
<a href='#'>
Studies<br/>
-Information about studies
</a>
Second, try viewing the HTML with stylesheets disabled (I do this in Firefox by pressing ctrl-shift-S, with a little help from the Web Developer extension). Is the browser able to render the content in an easy-to-read way based solely on the HTML provided? To some extent, the more readable the "unstyled" content appears, the more semantically-correct the HTML is.
Given that the second line of text seems to be secondary to the first line (a subtitle, not as important, possibly redundant or not entirely essential), putting the first line in a strong tag or putting the second line in a small tag are a couple ways to establish the relative importance of the two lines, if you wish to do so.
<a href='#'>
<strong>Studies</strong><br/>
-Information about studies
</a>
<a href='#'>
Studies<br/>
<small>-Information about studies</small>
</a>
There's some room for personal preference here. These are just two approaches.
It may be a little bit of a stretch using a small tag in a case like this, but it's not entirely inappropriate. A small tag is typically used for "fine print", attribution, disclaimers, or side comments. It doesn't semantically mean the text is small, but it does tend to be used for content that's secondary to something else (that clarifies something else). It should though only be used for text that's short in length.
And a strong tag doesn't have to be styled bold. In fact, that's the whole point of semantic markup: It doesn't specify or imply how the content will be styled; all it does is offer a hint to the meaning or context of the content. A strong tag can reasonably be given a style of font-weight:normal.
In order to achieve that those are in separate lines, try using the <div> tag instead. You can still specify a class for styling, the only difference is that <div>s are block-elements; each of them is rendered on a separate line. Here's the modified version of your code:
<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>
Another, slightly more preferable way of doing that is by styling the elements to be block-elements. That can be used by setting the CSS display property to block. Something like:
<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>
(Note that class = "alt block" means the element has both classes alt and block, and note also that the first <span> is removed because there's no need to style that node with anything).
CSS:
.block {
display: block;
}
Hope that helped you!