Proposal for a univeral 'name' attribute

[osyed]

It would be very nice if HTML5 supported a universal 'name' attributed that could be used with all tags. For example:

Code: Select all

  <div name='section1'>
    <p name='paragraph1'></p>
  </div>


Examples of other universal attributes are 'id' and 'class'.

Why would this be useful? Well it may not be of use to static pages, but for pages where parts of the page are dynamically set or updated with content it would be very useful. In JavaScript it would be very nice to have access to an object containing all the named elements on a page.

Currently the 'name' attribute can be used with forms. So this works:

Code: Select all

  <form name='form1'>
    <input name='hello'>
  </form>
  <script>
    document.form1.hello.value = 'Hello World'
  </script>


But it would be very nice if this also worked:

Code: Select all

  <div name='section1'>
    <p name='paragraph1'></p>
  </div>
  <div name='section2'>
    <p name='paragraph1'></p>
  </div>
  <script>
    document.section1.paragraph1.innerHTML = 'Hello World'
  </script>


Actually it would be better if the DOM 'document' object had a 'names' property to avoid collision of user selected names with reserved document names. The above script would then use:

Code: Select all

  <script>
    document.names.section1.paragraph1.innerHTML = 'Hello World'
  </script>


This would open the door for allowing content in a document to be populated using JavaScript code that is passed only an object reference and the does not know the names of the elements on the page. The code can determine the element names using the keys of the associative arrays in the object that was passed to it. In the context of MVC the model could return a JavaScript object and populating the content of the View could be done in JavaScript by the client.

Why is the 'id' or 'class' attribute not sufficient? Mainly because they do not support a nested structure or are being used for other purposes. The value of the 'id' attribute must be unique within the document so it cannot support a nested structure. The 'class' attribute is used for specifying the style of the elements and should not be overloaded to also specify the content of the elements.

The three components of a page are: layout, style and content. The universal 'id' attribute is good for providing a handle to the top level layout elements in a page. The universal 'class' attribute is good for specifying the style (such as color, font, size, etc) of the elements. There is a need for a universal attribute like 'name' to be able to get a handle for elements where content can be dynamically modified.

[lyosha]

Already possible with Id, just need to use it properly:

Code: Select all

<div id='section1'>
  <p>paragraph1</p>
</div>
<div id='section2'>
  <p>paragraph1</p>
</div>
<script>
  document.getElementById('section1').getElementsByTagName('p')[0].innerHTML = 'Hello World';
</script>


[osyed]

Already possible with Id, just need to use it properly:

Code: Select all

<div id='section1'>
  <p>paragraph1</p>
</div>
<div id='section2'>
  <p>paragraph1</p>
</div>
<script>
  document.getElementById('section1').getElementsByTagName('p')[0].innerHTML = 'Hello World';
</script>


Yes, I already knew this. The point of my post was not to ask how this simple example could be done with what is currently provided, it was to suggest that such things could be done much more easily if all tags could have a 'name' attribute.

[lyosha]

A change like this would break backwards compaitbility more than any other change in HTML 5 and would be impossible to work around in older browsers since 'name' had a completely different role in older versions of HTML.

So:

1) Perhaps you'ld want to name it something else, such as XHTML 2.0's 'role' attribute.

2) What is currently available is fully capable of doing the same thing just as easily. All this would make is yet another way to do the same thing 1% easier and completely not backwards compatible. Perhaps it is worth putting in another 1% of work in your page to make it work rather than another 800% into writing a fixer framework to support everything under Opera 12, Firefox 6, IE 10, and Safari 5.

[zcorpan]

Except in Firefox in standards mode, you can do

Code: Select all

<p id='foo'></p>
<script>
foo.innerHTML = 'Hello World'
</script>

Or you could use Selectors API to easily target the element you want without cluttering the markup with attributes:

Code: Select all

document.querySelector('#section1 > p:first-of-type').innerHTML = 'Hello World'

[osyed]

A change like this would break backwards compatibility more than any other change in HTML 5 and would be impossible to work around in older browsers since 'name' had a completely different role in older versions of HTML.

So:

1) Perhaps you'ld want to name it something else, such as XHTML 2.0's 'role' attribute.

2) What is currently available is fully capable of doing the same thing just as easily. All this would make is yet another way to do the same thing 1% easier and completely not backwards compatible. Perhaps it is worth putting in another 1% of work in your page to make it work rather than another 800% into writing a fixer framework to support everything under Opera 12, Firefox 6, IE 10, and Safari 5.

Yes, naming it something else so that it doesn't cause any compatibility problems would be good. Maybe something like 'path' since it is a hierarchical way of getting to the elements; similar to file system paths.

Actually this doesn't just make things easier, it also will allow some new capabilities. Here is an example:

Suppose the page already has this segment of HTML in it:

Code: Select all

  <div path='section1'>
    <p path='paragraph1'></p>
    <p path='paragraph2'></p>
  </div>
  <div path='section2'>
    <p path='paragraph1'></p>
    <p path='paragraph2'></p>
  </div>


This HTML may have been generated on the server using templates:

Code: Select all

  <div path='section1'>
    <%= include paragraphs.html %>
  </div>
  <div path='section2'>
    <%= include paragraphs.html %>
  </div>


where the file paragraphs.html just contains:

Code: Select all

    <p path='paragraph1'>
    <p path='paragraph2'>


Now suppose that an AJAX request or something similar was made to get data from the server and the following JavaScript object was received:

Code: Select all

  {"section1":
     {"paragraph2":"content of s1 p2",
       "paragraph1":"content of s1 p1"},
   "section2":
     {"paragraph2":"content of s2 p2",
       "paragraph1":"content of s2 p1"}
  }


It would then be possible to populate the elements on the page directly from this object. The code to populate the page could be generic and not need to have any page specific knowledge of how to access the elements. This would not be possible using the 'id' attribute.