[RESOLVED] Substitute for ‘name’ in HTML5 validation?

@JMRKERApr 19.2013

I received an error in the w3.org ( ~~[url]~~http://validator.w3.org/[/url] ) validator.

I was using the following code…

[code] <!DOCTYPE HTML> <html> <head> <title> Untitled </title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

</head> <body>

<a name=”TOP”></a>

<h1> Table of Contents </h1> <!– Long section display here –> <a href=”#TOP”>Go to Top</a>

<h1> Section start </h1> <!– Long section display here –> <a href=”#TOP”>Go to Top</a>

<!– etc. –>

</body> </html> [/code]

But I get a warning error that use of “name” is deprecated and that I should use ‘id’ instead.

What is the substitute code for the above when the page is longer than the screen
and I want to allow the user a quick link to the top of the page where I might have a table of contents?

~~[COLOR=”#FF0000″][SIZE=5]~~Note: Extra test.[/SIZE][/COLOR]
I just tried putting a radio button into the code and the validator complained again that ‘name’ is obsolete.
There are no errors and it passed the success message.
I’m just trying to figure out what to use of this type of coding to eliminate all validator messages!

to post a comment

JavaScript

6 Comments(s) _↴

@rnd_meApr 19.2013 — #
But I get a warning error that use of "name" is deprecated and that I should use 'id' instead.

What is the substitute code for the above when the page is longer than the screen

and I want to allow the user a quick link to the top of the page where I might have a table of contents?
[/QUOTE]

well, #top goes to the top in most browsers, and you've answered your own question about IDs...

@JMRKERauthorApr 19.2013 — #I guess I'm not being clear.

It's not a JS question and I'll post elsewhere if necessary.

The question is if I want to jump to the top of the site OR ANYWHERE ELSE on the page using a local link, how would I do that and avoid getting validator warning errors?

And, does the use of the deprecated "name=" apply to an element like a radio object?

What would the syntax be if required to use "id=" instead of "name=" for a local link or a collection element like a radio button to avoid getting validation error messages?

@tracknutApr 19.2013 — #Just replace the string "name=" with "id=". You can link locally to any id, like:

<div id="blah" ...

or

<a id="bleh" ...

Dave

@rnd_meApr 20.2013 — #

<i>
 </i>
 &lt;a href=#demo&gt;jump&lt;/a&gt;
 
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 
 &lt;div id=demo&gt;hello world&lt;/div&gt;

@JMRKERauthorApr 20.2013 — #Just replace the string "name=" with "id=". You can link locally to any id, like:

<div id="blah" ...

or

<a id="bleh" ...

Dave[/QUOTE]

I'm not sure that will work, but please correct me if I wrong.

See the following code as an example of what I'm trying to fix.

I get warnings from the validator (see link in post #1) that the anchors like ...

<a name="TOP"></a>

and

<a name="toc"></a>

... are obsolete and should be replaced with id="xxx".

But that would seem to wreck the local anchor links

of <a href="#toc"> and <a href="TOP"> in the code.

To accomplish what I want to do (jump to local anchors in the program),

what do I change to eliminate the validator warnings?

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Template Layout &lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;style type="text/css"&gt;
 .longDIV { height:800px; border:5px solid #888; }
 p { text-align:right; }
 h1 { text-align:center; }
 .hide { display:block; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;a name="TOP"&gt; &lt;h1&gt; Template Layout Only &lt;/h1&gt; &lt;/a&gt;
 
 &lt;div class="longDIV"&gt;
 &lt;h1&gt; Lengthy introduction &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- Long section display here --&gt;
 &lt;a name="toc"&gt;&lt;/a&gt;
 &lt;div class="longDIV"&gt;
 &lt;h1&gt; Table of Contents &lt;/h1&gt;
 &lt;label&gt;&lt;input type="radio" name="Chapters" value="Chap1" onclick="GoTo(this.value)"&gt; Chapter 1 &lt;/label&gt;
 &lt;br&gt;&lt;label&gt;&lt;input type="radio" name="Chapters" value="Chap2" onclick="GoTo(this.value)"&gt; Chapter 2 &lt;/label&gt;
 &lt;h2&gt;... etc. ... &lt;/h2&gt;
 &lt;label&gt;&lt;input type="radio" name="Chapters" value="ChapN" onclick="GoTo(this.value)"&gt; Chapter N &lt;/label&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- Long section display here --&gt;
 &lt;a name="Chap1"&gt;&lt;/a&gt;
 &lt;div id="Chap1" class="longDIV"&gt;
 &lt;h1&gt; Chapter 1 &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt;
 &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- Long section display here --&gt;
 &lt;a name="Chap2"&gt;&lt;/a&gt;
 &lt;div id="Chap2" class="longDIV"&gt;
 &lt;h1&gt; Chapter 2 &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- etc. --&gt;
 
 &lt;!-- Another long section display here --&gt;
 &lt;a name="ChapN"&gt;&lt;/a&gt;
 &lt;div id="ChapN" class="longDIV"&gt;
 &lt;h1&gt; Final Chapter &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;script type="text/javascript"&gt;
 function GoTo(IDS) { document.location = '#'+IDS; }
 
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@JMRKERauthorApr 20.2013 — #

<i>
 </i>
 &lt;a href=#demo&gt;jump&lt;/a&gt;
 
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 &lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;|&lt;hr /&gt;
 
 &lt;div id=demo&gt;hello world&lt;/div&gt;

[/QUOTE]

OK, I finally see what you are trying to tell me. :eek:

The following now does validate (shows 1 warning, but does not tell me what it is)

but that is better than the 6 warnings I was getting earlier. ?

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Template Layout &lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;style type="text/css"&gt;
 .longDIV { height:800px; border:5px solid #888; }
 p { text-align:right; }
 h1 { text-align:center; }
 .hide { display:block; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;h1 id="#TOP"&gt; Template Layout Only &lt;/h1&gt;
 
 &lt;div class="longDIV"&gt;
 &lt;h1&gt; Lengthy introduction &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- Long section display here --&gt;
 &lt;div id="toc" class="longDIV"&gt;
 &lt;h1&gt; Table of Contents &lt;/h1&gt;
 &lt;label&gt;&lt;input type="radio" name="Chapters" value="Chap1" onclick="GoTo(this.value)"&gt; Chapter 1 &lt;/label&gt;
 &lt;br&gt;&lt;label&gt;&lt;input type="radio" name="Chapters" value="Chap2" onclick="GoTo(this.value)"&gt; Chapter 2 &lt;/label&gt;
 &lt;h2&gt;... etc. ... &lt;/h2&gt;
 &lt;label&gt;&lt;input type="radio" name="Chapters" value="ChapN" onclick="GoTo(this.value)"&gt; Chapter N &lt;/label&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- Long section display here --&gt;
 &lt;div id="Chap1" class="longDIV"&gt;
 &lt;h1&gt; Chapter 1 &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt;
 &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- Long section display here --&gt;
 &lt;div id="Chap2" class="longDIV"&gt;
 &lt;h1&gt; Chapter 2 &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;!-- etc. --&gt;
 
 &lt;!-- Another long section display here --&gt;
 &lt;div id="ChapN" class="longDIV"&gt;
 &lt;h1&gt; Final Chapter &lt;/h1&gt;
 &lt;/div&gt; &lt;p&gt; &lt;a href="#toc"&gt;Go to TOC&lt;/a&gt; &lt;a href="#TOP"&gt;Go to Top&lt;/a&gt; &lt;/p&gt;
 
 &lt;script type="text/javascript"&gt;
 function GoTo(IDS) { document.location = '#'+IDS; }
 
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Thanks to all. ?

Also in #JavaScript _↴

disable a function Javascript pop up problem Parallax scrolling with scrolling animation on the first page

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Substitute for ‘name’ in HTML5 validation?

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Substitute for ‘name’ in HTML5 validation?

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴