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
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.
My question is probably based on a bad design. However, I can't change that and need to work with it. This is the visual draft I'm talking about, it's just a part of a full website:
As you can see there's a title of an article with a background image, then a breadcrumb toolbar and finally, the articles content. Now, usually, if there wouldn't be the breadcrumb toolbar you could simply wrap it into an <article>. But the breadcrumb divides the article in a "pre" article and a main article part. The only "clean" HTML5 way would be to wrap the article including the header with background image into an <article> and position the breadcrumb into the target visual position. However, I'm classifying this as "hack" and I'm searching a better way.
What would be the preferred markup for this scenario?
There won't be any perfect the solution for the current requirement.
As pointed out by comments to the previous answer, the nav is not related to the article.
Also, WCAG instructs that :
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
EDIT : If changing the order of the element can preserve a meaningful sequence (G57), when the elements does not match visually the DOM order (see C27) the visual focus indicator of the screen reader will not match the standard reading order which will result in bad UX for people with low vision using a screenreader.
So it's impossible to try a CSS visual hack to invert the order between the elements visually without breaking another rule.
You may think of a third technique :
set aria-hidden on the visible title,
use aria-labelledby on the article tag to point to the h1 outside the article element :
For instance:
<header>
<h1 aria-hidden="true" id="title">Your title</h1>
<nav><!-- nav here --></nav>
</header>
<article aria-labelledby="title">
// article here
</article>
Another way to do is to duplicate the title element, one visible, one for assistive technology
<header>
<div aria-hidden="true">Your title</div>
<nav><!-- nav here --></nav>
</header>
<article>
<h1 class="sr-only">Your title</h1>
// article here
</article>
It could be something like this -
<article>
<header>
//APPLY BACKGROUND IMAGE
<h1>YOUR TITLE</h1>
</header>
<nav>
//USE BREADCRUMBS HERE
</nav>
<section>
//USE THIS FOR CONTENT
</section>
</article>
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 read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */