Total Validator doesn't find this link and write this warning to me:
Add a skip navigation link as the first link on the page.
How can I write this link in a better way?
<html>
<body>
Skip to Content
navbar with menu
<div id="skip">
</div>
</body>
</html>
From what I have tested, they do require the text link to contain the word "skip", and the href attribute to start with a #, no matter if this element exists.
With the code you have submitted, it works with my own installation of TotalValidator (I am not saying that I would use this tool).
For information, TotalValidator web site uses the following code
<div id="skip">Skip navigation</div>
[...]
<a id="content"></a>
In spite of what the first comment says, the ID value "skip" is technically fine; it does not need to be changed to "skiptocontent". The reason why TotalValidator does not detect the skip link is probably something else. The link goes to somewhere in the page, and that "somewhere" is not explicitly marked as the main content. You can do this using WAI-ARIA landmarks.
With markup such as the following, it should be obvious for a validator that your first link is a skip link to the main content:
<body>
Skip to Content
<!-- navigation menu goes here -->
<div role="main" id="skip">
<p>...</p>
</div>
</body>
You can also use "semantic" elements, e.g.
<body>
Skip to Content
<header><h1>...</h1></header>
<nav><!-- navigation menu goes here --></nav>
<main id="skip"><!--role="main" is redundant on the main element-->
<p>...</p>
</main>
<footer>
</footer>
</body>
See the WAI-ARIA specification for documentation on main (role) and the HTML5.2 spec for the main element.
Related
I am done with redirection to target page but what I want is to redirect to particular <div> of the page. How can this be achieved?
You can do it in two ways.
1) [via Javascript (+jQuery)]
home
$('#home').click(function(){
$(document).scrollTop(100) // any value you need
});
2) [via pure HTML]
home
<section id="home_section"></section>
<div id="go1">
<!-- content -->
</div>
<div id="go2">
<!-- content -->
</div>
<div id="go3">
<!-- content -->
</div>
...
Just append url id as below ,you are done !
news.html#go1
news.html#go2
news.html#go3
This is the easiest way for me
<li>Prices</li> (This could be a paragraph or a button)</li>
<div id="prices">
// Prices section
</div>
You need to add id attribute to that section of page you want to show and pass id name at the end of url using hash (#) symbol. For example you want to redirect user to div with id='test'
<div id="test">your section content</div>
Then you should use this url structure:
http://example.com/your_page.php?some_param=1#test
Basically you use anchor tags in HTML to get your job done.
You'l probably be familiar with them as:
As HTML convention, while defining a section, you can give each section an ID for identifiers :
<section id= "blahblah" ></section>
And you can redirect to the section by just mentioning them in the anchor tags :
You can link the html code with css.
In c#
Response.Redirect("http://www.example.com/index.aspx#id_in_css");
Here are two conditions,
1) If you want to redirect to div from different page:
Page
if(window.location.href.includes("div-panel"))
{
$(document).scrollTop(450);
}
2) If you want to redirect to div in same page:
<button id="button-click">Panel</button>
$('#button-click').click(function(){
$(document).scrollTop(450);
});
Give that section an id (lets say: section1) and then the redirect url will be http://www.sample.com/page#section1 .
Note: the # and the keyword, that's the id of the section you want your browser to scroll to.
Read more about Fragment Identifier here
If you really want that smooth sliding to the designed section, here's a quick step-by-step:
In the section you want, create an id property, i.e:
<section id="products">
next, using an anchor tag, insert # + the id for the section on the href property:
<a href="#products">
Now, once clicked, the page will center the section pointed on the anchor tag. But this will happen brutely. In order to smooth the scrolling process, in your CSS file, use this snippet:
html {
scroll-behavior: smooth;
}
And that's the simplest way!
There is also ways for doing it with native JavaScript and JQuery. For more, i recommend the article on CSS Tricks -> https://css-tricks.com/snippets/jquery/smooth-scrolling/
first you need add id where you want to redirect
<section class="com-padd com-padd-redu-top" id="deals-home">
than add
< a href="{% url 'home' %}#deals-home">Go to Home that page</a>
Not sure how to tag this question. I have a database of XHTML documents that are converted by LaTeXMLpost; however, saying that they have validation issues is an understatement. I need to show them inside a browser. However, tag autoclosing due to invalid markup messes up my structure.
A minimal example:
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="content" style="background-color:pink">
<!-- yield -->
<section >
<ul>
<li>
<div>
<p>
First
<li>
<div>
<p>
Second
</p>
</div>
</li>
</p>
</div>
</li>
</ul>
</section>
<section>
Next
</section>
<!-- end yield -->
</div><!-- end content -->
</body>
</html>
jsfiddle
Everything outside comments is layout; inside it is the loaded document. If things were taken at face value, everything should be pink, right?
The problem is, "Next" gets booted outside the #content. Even though it is valid XML, it does not conform to HTML/XHTML DTD (or whatever passes for DTD in HTML5), so it gets mangled.
The question is: How can I protect my layout against invalid markup inside it? Can I do something to the content to normalise it? I'm loading it into Nokogiri before displaying, but I still end up in this mess anyway (since the XML isn't malformed, I suppose, Nokogiri doesn't do anything about it).
I don't care if it's displayed nicely or not, all I care now is that it remains safely contained (otherwise I have trouble with manipulating it, attaching events, styling, and pretty much everything else).
You can try Nokogiri it has some built-in functionality for fixing invalid mark-up.
Related question : Repairing invalid HTML with Nokogiri (removing invalid tags)
I am using a Chrome outliner extension to check the semantics of my page. It seems to be a problem to have any structural element before the h1 in the document main header tag. I was thinking the order does not matter, but apparently it does:
+Document Body
+Header
+nav
+h1 Main Navigation
+h1 MyPage
-Section
-Footer
Does outline like this:
Untitled Body
Main Navigation
MyPage
etc...
But when the h1 is the first element in my header:
+Document Body
+Header
+h1 MyPage
+nav
+h1 Main Navigation
-Section
-Footer
it does outline like this:
MyPage
Main Navigation
etc...
Why is that? Is the outliner buggy, or did I understand something wrong in HTML5 semantics? The W3C Specification does not seem to mention it: http://dev.w3.org/html5/spec/Overview.html#the-header-element
After revisiting the specs, I agree that the h1 does not have to be the first element. I suspect the issue is with the chrome extension you are using.
I ran the following two scenarios through this HTML outlining tool and received the same results (My Navigation appears under My Header):
With h1 second element under header:
<body>
<header>
<h1>My Header</h1>
<nav><h1>My Navigation</h1></nav>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>
With H1 first element under header:
<body>
<header>
<nav><h1>My Navigation</h1></nav>
<h1>My Header</h1>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>
Why are you defining another <h1> tag outside of your title of your page? The outliner is picking up two contending titles for your page and is probably why is being thrown off. Semantically speaking, the main title of a page can exist anywhere inside your <header> section of your page as long as its unique and defines your main title, though that is not an exclusive property of the <header> section or the <h1> tag (and opinions vary to that description but it is more sound). Proper outline is defined here http://www.w3.org/TR/html5/sections.html#outline.
You can write your main heading section using any combination you want, as long as it is properly understood. So;
<header>
<nav>
<h1>Title of Page</h1>
<h2>Subtitle</h2>
</header>
Is fine, because it is properly understood what the sections of your header and title of your page are.
Here is an online outliner that you can use to test your design. Your title section should be first above everything else.
According to the specs a <header> doesn't need to start with an <h1>.
A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.
Currently when I attempt to use data-role=collapsible there is nothing left (no button, link or content). According to the documentations it uses a h1-h6 tag but mine is inside a html5 header block.
Should I forget about the html5 semantics since this is a mobile site? Or should I attempt to make it work somehow, if so any ideas?
Link to docs: http://jquerymobile.com/demos/1.0a3/#docs/content/content-collapsible.html
Example of my current setup:
<article data-role="collapsible" data-collapsed="true">
<header>
<h2>Title</h2>
</header>
<div class="content">
<!-- some data -->
</div>
<footer>
<!-- some data -->
</footer>
</article>
jQuery Mobile is built with progressive enhancement in mind, so it assumes you want your app to work in any device possible ("work" meaning just support basic features)
Try replacing your nicely named tags with DIVs and remove wrapper around H2. Should help.
Often while coding view templates in html, my habit of adding some helpful comments causes lots of time-consuming effort while testing.
Consider this code...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
Now, if I have to hide out some portion of the view template, in case of php I would just select the desired code and put single-line comments (using a shortcut key most of the times).
However, in html code, where only the block comments work, I end-up removing all the closing comment tags (-->) till the position I want the commenting to occur - something like this...
<!-- Here starts the sidebar
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane
<div id="main-contents">
...
</div>
<!-- Here starts the footer
<div id="footer">
...
</div>-->
Then when I'm done testing I have to go through the agony of putting back those closing tags.
Is there a better and time saving way of block commenting in HTML?
Yes, to comment structural metadata out,
Using <script>/* ... */</script> in .html
Comment out large sections of HTML (Comment Out Block)
my personal way in a .html file is opening: <script>/* and close it with */</script>
<script>/* hiding code go here */</script>
Is a workaround to the problem since is not HTML.
Considering your code in .html...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<script>/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/</script>
And in a case is HTML inside PHP file using comment tag <?/* or <?php /* and close it with */?> . Remember that the file must be .php extension and don't work in .html.
<?/* hiding code go here */?>
Considering your code in .php...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<?/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/?>
Is worth nothing that is not HTML but a common developer practice is to comment out parts of metadata so that it will not be rendered and/or executed in the browser. In HTML, commenting out multiple lines can be time-consuming. It is useful to exclude pieces of template structural metadata containing comments, CSS or code and systematically commenting out to find the source of an error.
It is considered a bad practice to comment blocks out and it is recommended to use a version control system.
The attribute "type" is required in HTML4 and optional in HTML5.
Depends on the extension. If it's .html, you can use <? to start and ?> to end a comment. That's really the only alternative that I can think of. http://jsfiddle.net/SuEAW/
you can try to replace --> with a different string say, #END# and do search and replace with your editor when you wish to return the closing tags.
I find this to be the bane of XML style document commenting too. There are XML editors like eclipse that can perform block commenting. Basically automatically add extra per line and remove them. May be they made it purposefully hard to comment that style of document it was supposed to be self explanatory with the tags after all.
Put a space between the "-->" of your header comments. e.g. "- ->"
My view templates are generally .php files. This is what I would be using for now.
<?php // Some comment here ?>
The solution is quite similar to what #Robert suggested, works for me. Is not very clean I guess.
Eclipse Juno has a good way for it. You just do the cmd+/
The following works well in a .php file.
<php? /*your block you want commented out*/ ?>
No. Unless you find a tool that does what you described for you.
Depending on your editor, this should be a fairly easy macro to write.
Go to beginning of line or highlighted area
Insert <!--
Go to end of line or highlighted area
Insert -->
Another macro to reverse these steps, and you are done.
Edit: this simplistic approach does not handle nested comment tags, but should make the commenting/uncommenting easier in the general case.
/* (opener)
*/ (closer)
for example,
<html>
/*<p>Commented P Tag </p>*/
<html>