www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Substitute for 'name' in HTML5 validation?

Hybrid View

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    resolved [RESOLVED] Substitute for 'name' in HTML5 validation?

    I received an error in the w3.org ( http://validator.w3.org/ ) 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>
    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?

    Note: Extra test.
    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!
    Last edited by JMRKER; 04-19-2013 at 02:44 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by JMRKER View Post
    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?
    well, #top goes to the top in most browsers, and you've answered your own question about IDs...

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Question

    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?

  4. #4
    Join Date
    Aug 2006
    Posts
    1,917
    Just replace the string "name=" with "id=". You can link locally to any id, like:
    <div id="blah" ...
    or
    <a id="bleh" ...

    Dave

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Question

    Quote Originally Posted by tracknut View Post
    Just replace the string "name=" with "id=". You can link locally to any id, like:
    <div id="blah" ...
    or
    <a id="bleh" ...

    Dave
    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?

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

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    <a href=#demo>jump</a>
    
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    
    <div id=demo>hello world</div>
    Last edited by rnd me; 04-19-2013 at 08:10 PM.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    resolved

    Quote Originally Posted by rnd me View Post
    Code:
    <a href=#demo>jump</a>
    
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    <hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />|<hr />
    
    <div id=demo>hello world</div>
    OK, I finally see what you are trying to tell me.
    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.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Template Layout </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
     .longDIV { height:800px; border:5px solid #888; }
     p { text-align:right; }
     h1 { text-align:center; }
     .hide { display:block; }
    </style>
    
    </head>
    <body>
    
    <h1 id="#TOP"> Template Layout Only </h1>
    
    <div class="longDIV">
     <h1> Lengthy introduction </h1>
    </div> <p> <a href="#toc">Go to TOC</a> <a href="#TOP">Go to Top</a> </p>
    
    <!-- Long section display here -->
    <div id="toc" class="longDIV">
     <h1> Table of Contents </h1>
         <label><input type="radio" name="Chapters" value="Chap1" onclick="GoTo(this.value)"> Chapter 1 </label>
     <br><label><input type="radio" name="Chapters" value="Chap2" onclick="GoTo(this.value)"> Chapter 2 </label>
     <h2>... etc. ... </h2>
         <label><input type="radio" name="Chapters" value="ChapN" onclick="GoTo(this.value)"> Chapter N </label>
    </div> <p> <a href="#toc">Go to TOC</a> <a href="#TOP">Go to Top</a> </p>
    
    <!-- Long section display here -->
    <div id="Chap1" class="longDIV">
     <h1> Chapter 1 </h1>
    </div> <p> <a href="#toc">Go to TOC</a>
               <a href="#TOP">Go to Top</a> </p>
    
    <!-- Long section display here -->
    <div id="Chap2" class="longDIV">
     <h1> Chapter 2 </h1>
    </div> <p> <a href="#toc">Go to TOC</a> <a href="#TOP">Go to Top</a> </p>
    
    <!-- etc. -->
    
    <!-- Another long section display here -->
    <div id="ChapN" class="longDIV">
     <h1> Final Chapter </h1>
    </div> <p> <a href="#toc">Go to TOC</a> <a href="#TOP">Go to Top</a> </p>
    
    <script type="text/javascript">
    function GoTo(IDS) { document.location = '#'+IDS; }
    
    </script>
    </body>
    </html>
    Thanks to all.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles