I need to do some styling to a bunch of webforms, containing articles formatted in a rather uniform way. I can change any source code I want.
What I need is a quick way to dynamically create a navigation menu (on the server side) for an ASP.NET webform, based on contents of a specified div.
For example, given the following HTML:
<div id="article">
<h2 id="first">Chapter 1</h2>
<p>Some text...</p>
<h2 id="second">Chapter 2</h2>
<p>Some other text</p>
</div>
I would like to insert something like this at the end (and render it at the server side, not in a script):
<div id="navigation">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
</ul>
</div>
NOTE: I know I could iterate through parent div's child controls in codebehind (although I would need to make them all "run at server", or even parse the InnerHtml property of the parent div), but if feels pretty weird.
Also, I am aware that if the article was being created from a data source, I would have the content already organized, but I would like to make as little changes needed in the existing pages.
You could search for the headings with a RegEx and render the navigation from the results. Something like "<h2 id=\"([^\"]+)\">([^<]+)</h2>" would get you the id in the first and the caption in the second group.
If you have access to the data source that is creating the article, definitely use that.
However, if all you have is the HTML, I would use XSLT.
Related
Till now, we are generating correctly PDFs with mPDF, combining PHP + CSS #page, that includes "page-break-before" and "page-break-after" . We write each block using "writeHTML" class. However, after some changes, we noticed that mPDF generates and display the message pagebreakavoidchecked="true"; and the top of the page after page break after summary, just when we began to put headers and footers.
We have no idea why is that message appearing just and only at that page.
Please, any idea? Do you need any other info?
Thank you
Update: I discovered mPDF have some problem with "page-break-inside: avoid;". I'm using it this way:
HTML:
<article class="bloque_anuncio">
<header class="cabecera_anuncio">
<p class="nivel1">Level 1</p>
<p class="nivel2">Level 2</p>
<p class="nivel3">Level 3</p>
<p class="nivel4">Level 4</p>
</header>
<div class="contenido_anuncio">
a lot of text (at least a complete page, but usually several pages)
</div>
</article>
There are several articles, but I want to maintain header aside with the content, so I use in my stylesheet:
.cabecera_anuncio {page-break-inside: avoid; }
And it works as it should, however, mPDF inserts the mentioned message at the beginning of the first page (and only there):
If I remove the style, the message dissapear, but I need to avoid page breaks in that point!!
I noticed that the problem is only relative to the <p> tag. Try to substitute with a <div> tag
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 have a simple page template that has a sidebar on the left and main content area on the right. Is this the correct use of the article, aside, and header tags? Also, are you suppose to attach classes/ids to html5 elements (ie. article class="example" ) or is that specifically for divs only?
Thanks
<article class="page">
<div class="container">
<div class="row">
<aside>
<div class="col-md-3">
<div class="sidebar">
<h3>Sidebar Widget</h3>
<ul>
<li>Related Content</li>
<li>Related Content</li>
<li>Related Content</li>
</ul>
</div> <!-- /.sidebar-->
</div> <!-- /.col-med-3 -->
<aside>
<div class="col-md-9">
<header>
<h1 class="page-title">Page Title</h1>
</header>
<p>Some Content</p>
</div> <!-- /.col-med-9 -->
</div><!-- /.row -->
</div><!-- /.container-->
</article><!-- /.page -->
You can certainly apply a class and/or an id to HTML5 tags. Think of each tag like a <div>. In fact, in your CSS you should have this block, so that all HTML5 tags will behave like a <div>. This will help in non-HTML5 compliant browsers:
header, section, footer, aside, nav, article, figure {
display: block;
}
I can't really comment on if you are using all of the HTML5 tags in the "correct" way since I don't know the larger scope of your project. However, it looks like you are using the <aside> correctly. I would use <section> instead of <article> where you used it. Here are some explanations in plain English to help you:
<article> - Independent, self-contained content. It should be able to stand on it's own and make sense if separated from the rest of the HTML document. The most notable potential uses are for forum/blog posts, user comments, etc.
<aside> - Supporting information about the larger picture of your HTML. These are mostly used in sidebars, to the left or right of the main content as part of the "supporting cast".
<header> - As the name suggests, this is where your heading information should go. Multiple <header> tags can be used throughout your HTML page (i.e. for blog post headings), but they cannot be added in <footer>, <address> or another <header> tag.
<section> - More of a "general purpose" tag, but it's used for containing large blocks of grouped content. Multiple HTML5 tags can reside inside of a <section> tag.
It is totally normal to put ids and classes on any/all html elements.
Your usage of <article> and '' are probably too widely scoped.
The <article> element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. Source
The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Source
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 */
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