In this post we take a look at the hyperlink in HTML5.
The hyperlink in HTML5 as in other versions is represented by 'a'. This has changed in
HTML5. There are,
* Permitted contents
* Permitted attributes
* number of constraints that list out obsolete attributes
The readers should read the W3C working Groups note here
http://www.w3.org/TR/html-markup/a.html#a
In here we will see how a web page with a number of links gets displayed in the four
browsers (versions of browsers used are in the below link) we previously considred in here:
http://hodentek.blogspot.com/2013/08/html5-and-browser-support.html
The 'a' tag can sorround inline or block content as described in the above w3C note
quoted here:
"Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content."
The following HTML5 was used in Microsoft Visual Studio Express 2013 Preview to look at how browsers responded and whether screen readers such as 'JAWS 14' could pick up the elements correctly. Of the tested browsers only IE10 and Chrome could be read with 'JAWS' and the other two browsers did not. I am not sure if the browsers support the accessibility features needed. The reading by 'JAWS' is a little difficult to understand unless you hear a couple of times over and over again. It is fair to say that Chrome fared a little bit better than IE 10 in that where as the reading was continuous from top of page to the bottom in Chrome it was discontinuous in IE 10.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hyperlink</title>
</head>
<body>
<h1>Hyperlinks</h1>
<a id="section5">TOP</a>
<p >The very beginning of internet can be attributed to the use of hyperlinks. <br/>
Hyperlinks are decorated region of a document when clicked takes the user to <br/>
more details of the clicked region in the original document. For example, clicking<br/>
Microsoft below takes you to Microsoft Web site where you can learn lot more about<br/>
Microsoft.</p>
<h2>Here follows an example of a simple hyperlink that when clicked takes you to Microsoft Web site.:</h2>
<a href="http://www.microsoft.com" target="_blank" >Microsoft</a><!--inline-->
<h2 >Here follows an example of what is new and what you can do in HTML5. Now you can link<br/>
a whole block.</h2>
<!--block-->
<a href="http://www.Microsoft.com">
<img src="C:\Users\mysorian\Desktop\MicrosoftImage.png" alt="Microsoft" />
<address>Microsoft Corporation<br/>
One Microsoft Way<br/>
Redmond, WA 98052-6399<br/> USA </address>
<span class="email">Send us an email</span>
</a><br/>
<a href="mailto:mysorian@gmail.com?Subject=HTML5" target="_top">Email address</a><br/>
<a href="#section5">Go to top</a></body></html>
All the browsers recognized the block as a single link however the rendering of the 'flow and phrasing content' was different in different browsers. IE 10 and Chrome performed the best as far as rendering is concerned,
Chrome:
IE10:
Firefox:
Safari:
The hyperlink in HTML5 as in other versions is represented by 'a'. This has changed in
HTML5. There are,
* Permitted contents
* Permitted attributes
* number of constraints that list out obsolete attributes
The readers should read the W3C working Groups note here
http://www.w3.org/TR/html-markup/a.html#a
In here we will see how a web page with a number of links gets displayed in the four
browsers (versions of browsers used are in the below link) we previously considred in here:
http://hodentek.blogspot.com/2013/08/html5-and-browser-support.html
The 'a' tag can sorround inline or block content as described in the above w3C note
quoted here:
"Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content."
The following HTML5 was used in Microsoft Visual Studio Express 2013 Preview to look at how browsers responded and whether screen readers such as 'JAWS 14' could pick up the elements correctly. Of the tested browsers only IE10 and Chrome could be read with 'JAWS' and the other two browsers did not. I am not sure if the browsers support the accessibility features needed. The reading by 'JAWS' is a little difficult to understand unless you hear a couple of times over and over again. It is fair to say that Chrome fared a little bit better than IE 10 in that where as the reading was continuous from top of page to the bottom in Chrome it was discontinuous in IE 10.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hyperlink</title>
</head>
<body>
<h1>Hyperlinks</h1>
<a id="section5">TOP</a>
<p >The very beginning of internet can be attributed to the use of hyperlinks. <br/>
Hyperlinks are decorated region of a document when clicked takes the user to <br/>
more details of the clicked region in the original document. For example, clicking<br/>
Microsoft below takes you to Microsoft Web site where you can learn lot more about<br/>
Microsoft.</p>
<h2>Here follows an example of a simple hyperlink that when clicked takes you to Microsoft Web site.:</h2>
<a href="http://www.microsoft.com" target="_blank" >Microsoft</a><!--inline-->
<h2 >Here follows an example of what is new and what you can do in HTML5. Now you can link<br/>
a whole block.</h2>
<!--block-->
<a href="http://www.Microsoft.com">
<img src="C:\Users\mysorian\Desktop\MicrosoftImage.png" alt="Microsoft" />
<address>Microsoft Corporation<br/>
One Microsoft Way<br/>
Redmond, WA 98052-6399<br/> USA </address>
<span class="email">Send us an email</span>
</a><br/>
<a href="mailto:mysorian@gmail.com?Subject=HTML5" target="_top">Email address</a><br/>
<a href="#section5">Go to top</a></body></html>
All the browsers recognized the block as a single link however the rendering of the 'flow and phrasing content' was different in different browsers. IE 10 and Chrome performed the best as far as rendering is concerned,
Chrome:
Logo used in the post is a Microsoft Copyright and is used for illustration only.
Here is a link to JAWS:
No comments:
Post a Comment