Is this legal?
<UL>
<NOSCRIPT>
<LI>Foo
</NOSCRIPT>
<LI>Bar
</UL>
I ran it through a validator and it said no, but I'm not so sure it understands NOSCRIPT.
It's not valid but why you don't repeat your ul like this? One for Js and for no Js.
<!DOCTYPE html>
<head>
<title>test</title>
</head>
<noscript>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</noscript>
<script>
document.write("<ul><li>ShowIfJsAvailable</li></ul>");
</script>
It's not legal. A UL may only contain LI elements and script-supporting elements — and NOSCRIPT is not a script-supporting element. Although NOSCRIPT is treated differently based on the scripting environment, that special case is not relevant since it deals with the content model of NOSCRIPT, but the rules here pertain to the content model of UL.
You are better off with designing the page to work without javascript first, and after that you may alter the page with javascript (or better yet, JQuery).
Previous answers already stated that noscript structure is not valid, so ditch that idea.
First write the page as it should look like without javascript, then modify the structure with javascript as you wish it would look like with the javascript on. Remove or add elements after the page is loaded - this is where JQuery and it's $(document).ready() really pays off!
Also your html-file will look much cleaner, and js-file only comes into play if scripts are enabled.
And do not use that document.write(), it will just complicate things.
Related
so I have this huge amount of text from several documents that i'd like to insert on my webpages. When i copy paste the text into my <p>element, it works fine and all, but it looks messy in my html-file.
Is there any other way to transfer my written document to my html-file, for instance link the document to the html-file, or maybe there's a way to hide or separate the <p> so the html-file looks neat even though there's a huge amount of text in my html-file. Any advice?
I do not know about any way to include html in another html (something like php's include), but it could be done with JQuery:
index.html:
<html>
<head>
<!-- link jquery -->
<script>
$(function(){
$("#fileContent").load("doc.html");
});
</script>
</head>
<body>
<div id="fileContent"></div>
</body>
</html>
doc.html (file that contains your text)
There's a lot you could do to separate these blocks of text.
Firstly, I'd recommend using <div>..</div> tags to divide the content into separate semantic sections. There are a bunch of different tags that aim to divide the content of the page semantically: <aside>, <main>, <header>, <nav>, and so on. I'd recommend reading up on these tags and using them appropriately.
However, to answer your question more directly, you should separate each block of text into separate <p> tags. After all, the <p> tag is meant for defining separate paragraphs. While the HTML document may not look pretty when indented and filled with multiple different tags like <div> a <p>, it is the best way to do it.
Unless the HTML page is going to be presented in its core (code) format, then how the <p> tags look in the .html file is unnecessary because after all these are what define how the page is presented and rendered in the browser.
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I'm in the process of marking up a site and I've been really trying to hone my accessibility skills. I'm wondering what the most semantic mark-up is for tabbed content. This is what I have now:
<section>
<nav>
Stuff
Stuff
Stuff
</nav>
<section id="content" aria-live="polite" role="region">
<article>...</article>
<article>...</article>
<article>...</article>
</section>
</section>
I have a few specific questions about this.
Am I on the right track? If not can someone recommend some changes?
Will I need to make changes if I were to load in the articles via AJAX?
Do I need the nav tag?
Are WAI-ARIA roles enough here?
Are these the correct WAI-ARIA roles to use?
1.Am I on the right track? If not can someone recommend some changes?
Yes, you've absolutely started in a good way. Some of the tab stuff could be given some tab-related roles if you want to improve it, but it's functional as is.
2.Will I need to make changes if I were to load in the articles via AJAX?
No. It should be fine. The fact that it is a live region should (tested with NVDA only) mean that new content is announced. Is this the behaviour you're after?
3.Do I need the nav tag?
No, but I think it helps make it crystal clear what that bit of the document is for. A note though, that if you do what I've done below and mark it as a tablist, the fact that it's a navigation element doesn't get announced anymore.
4.Are WAI-ARIA roles enough here?
If by ARIA roles you're also including states and properties, yes essentially you should be covered for loading dynamic content (if that's what you're after). There's no case for moving the user's keyboard focus or anything with things as they are. IMO, you'd only really want to do that if there's a lot of navigational stuff between what the user clicked and what content you're giving them.
5.Are these the correct WAI-ARIA roles to use?
You're not far off. If you really want a tab-style experience, then you need the tablist, tab and tabpanel roles. I'll give an example.
I've taken your code and made a contrived but working example to test it. It's not loading anything in AJAX, just showing and hiding stuff. I wanted to be sure before I gave this answer, but I'll put the code here too in case it helps.
<html>
<head>
<title>Aria test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').on('click', function () {
hideArticles();
deslectAllTabs();
$(this).attr('aria-selected', true);
var tab = '#' + $(this).attr('aria-controls');
$(tab).show();
});
});
function hideArticles() {
$('article').hide();
}
function deslectAllTabs() {
$('nav a').attr('aria-selected', false);
}
</script>
<style type="text/css">
article { display: none; }
</style>
</head>
<body>
<section>
<nav role="tablist">
Stuff1
Stuff2
Stuff3
</nav>
<section id="content" aria-live="polite" role="region">
<article id="content1" role="tabpanel">The lazy dog jumped over the quick fox</article>
<article id="content2" role="tabpanel">If you click this tab then your life will be better</article>
<article id="content3" role="tabpanel">Know your roles</article>
</section>
</section>
</body>
</html>
I hope this helps.
Semantics tend to get vague at this level, but yeah I think you're on the right track as long as each of the tabs would really count as a separate article.
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. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Source
I don't think the <nav> is misplaced here, although it depends on how important the different tabs are in regards to the whole of your website:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.
Source
I wouldn't use sections to wrap the stuff in it though.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Source
An additional rule of fist for the <section> element is that they should have a title. If not, it's probably not really a "section" but just a group of elements that you needed to wrap in something, so just use a <div>.
I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>
For example :
<style type="text/css">
<!--
#map{ width:500px;height:500px;float:left }
-->
</style>
What is the usage of <!-- --> ?
It stops Netscape 2 era browsers, which don't recognize the <style> element, from rendering the content as text (since they start to render the content, but it is a comment, so it isn't rendered).
This is described in the HTML specification.
Entirely worthless today, but people keep adding them without understanding them in a cargo cult mentality.
I only use that type of comment for mock up when I want to remember my reasoning behind a certain structure of elements or have something I want to remember to add later. I never use those comments in production webpages.