HTML TUTORIAL


The HTML id


In many cases, it is very useful to identify an HTML element with a unique id. It may be used to create a hyperlink to that particular element within the webpage.

Here is a code snippet that shows the usage of linking to the internal element of the HTML

  1. <h2 id="section2"> This is 2nd header </h1>
  2. you can jump to the previous header with a link <a href="#section2">here</a>


Take a look at the complete example here.

  1.  
  2. <title>Understanding id and link to subsection </title>
  3. </head>
  4.  
  5. <h1> This is header h1 </h1>
  6. ReferenceDesigner.com provides useful tutorial that you can practice online.
  7.  
  8. <h2 id="section1"> This is 1st header </h1>
  9.  
  10. OK this example shows how to create links to a section on a page 1
  11.  
  12. <h2 id="section2"> This is 2nd header </h1>
  13.  
  14. We do it using ids. The above is has for example a unique id section2
  15.  
  16. lots of text <br />
  17. lots of text <br />
  18. lots of text <br />
  19. lots of text <br />
  20. lots of text <br />
  21. lots of text <br />
  22. lots of text <br />
  23. lots of text <br />
  24. lots of text <br />
  25. lots of text <br />
  26. lots of text <br />
  27. lots of text <br />
  28. lots of text <br />
  29. lots of text <br />
  30. lots of text <br />
  31. lots of text <br />
  32. lots of text <br />
  33. lots of text <br />
  34. lots of text <br />
  35. lots of text <br />
  36. lots of text <br />
  37. lots of text <br />
  38. lots of text <br />
  39. lots of text <br />
  40. lots of text <br />
  41. lots of text <br />
  42. lots of text <br />
  43. lots of text <br />
  44. lots of text <br />
  45. lots of text <br />
  46. lots of text <br />
  47.  
  48. <h2 id="section2"> This is 3rd header </h1>
  49.  
  50. This one has a unique id section 3. Note that you can jump to the previous header with a link <a href="#section2">here</a>
  51.  
  52. </html>


You may try this example online here

Example - Understanding headers

There are other usage of the id. As you may learn, using Cascading Style Sheet , you can apply the styling to one particular HTML element. To apply the Styling to a particular element you need to identify it with its id.

The id is also used in advance programming. Using jQuery , for example, we may format or change the content, style, or perform other action on that particular id.

ID must be unique


The html id attribute must be absolutely unique. An id applied to an element must not match an id used anywhere else on the same page. This is different from html class where you can have more than one html element share the same class.

ID Value syntax


The id attribute value must follow some basic syntax rules. It must begin with a small or a capital letter in the range(a–z or A–Z). This is followed by any combination of letters (a–z or A–Z), digits (0–9), hyphens (-), underscores (_), colons (:), and periods (.).

Additionally, id value is case sensitive, so
  1. <h1 id="section1">Header 1 </h1>

is different from
  1. <h1 id="Section1">Header 1 </h1>