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).
Related
https://interactjs.io/docs/action-options/#ignorefrom shows how to use ignoreFrom to disable dragging from certain elements. My movable element look something like:
<article>
<div>
<h1>My Article</h1>
<p>Hello World</p>
</div>
</article>
It could contain any HTML tags within the <div>, not just <h1> and <p>
I want to ignore dragging from any child element except the <div>. I've tried using ignoreFrom: ':not(div)', but that does not work (I'm guessing that the :not pseudo-selector is not supported). The only option I can get to work is to provide a list of all possible HTML tags as the value for the ignoreFrom. So, for this specific example, setting ignoreFrom: 'h1,p' works, but this approach will become unmanageable in the general case. Is there an easier way?
I am trying to transfer a text from a printed book into HTML5, but meanwhile I am trying to keep its thematic and page/paragraph/lines layout structure exactly as it is. For example, every page of the printed book is divided as a <div> section eg. <div class=page id=55> so that it emulates/represents exactly the page unit of the printed book, and also facilitate referencing. I don't care much how the text will be rendered on the browser, this is something that I can think about later. I just want the HTML and the browser to "know" the original pagination and layout of the printed book.
The problem is that in the printed book, some paragraphs or even boxes, tables etc span over to the next page. If I translate it to HTML, I do it like this:
<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...
This is illegal in HTML, as we have a <p> tag being interrupted by a </div> tag, and then a new div element beginning with a plain text, which is closed by a </p> tag.
HTML would expect me to close the first part of the broken paragraph with a </p>, and continue with a new <p> tag after the div, but I am not doing this because it doesn't correspond to the pagnation of the original book, and would result in half-paragraphs being understood are 2 proper paragraphs.
So, how to use legal HTML while maintaining the theoretical page/paragraph/broken paragraph/page break structure and information, or at least making the brower "know" the original pagination? Is there a more appropriate tag or method to emulate the page break while keeping the page number id?
Perhaps something like
<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>
How about instead of encapsulating each page within a div you include a tag at the start of each page designating the page number. An aside tag seems appropriate for this.
<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>
If you need to continue a paragraph then you'll have to break into multiple elements, but perhaps you can specify when a paragraph is a continuation of a previous one. For instance using the continued class as shown above.
If you really don't want to break the p tag then you could put a span within it that is only used for semantic reasons. Something like this;
<p>...and so the bold knight
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>
But this kind of makes less semantic sense than the previous solution.
Try adding display: inline; to either the CSS style of the class page or the style attribute of each page div.
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!
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.
for example.
if i want to quickly wrap anything by this in once.
in dreamweaver or in any other free software where i can do this.
I want to select this
<p>anything can be here - content, other html tag etc.</p>
and in one shot want to wrap inside 2 divs with predefined classes
<div class="one">
<div class="two">
<p>anything can be here - content, other html tag etc.</p>
</div>
</div>
I have work with large amount of code and need to wrap random things in Divs with defined attributes.
I found my answer on my own after digging.
We can do this from Dreamweaver Snippet's "Insert before" and "Insert after" optiion
alt text http://shup.com/Shup/300767/11022382120-My-Desktop.png