DONATE  
MENU
AJAX
HTML
JAVASCRIPT
JSON
MYSQL
PHP
CSS

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Attributes » Elements' ID
Share Tweet WhatsApp

Elements' ID

The HTML id attribute is used in assigning a unique identity to any element in a webpage. Just any element can have an identity in webpage. ids as attributes with values are basically assigned to HTML elements so as to help us have access to such elements and perform styling or scripting on them. Therefore, it is not necessary to assign an id to all HTML elements but rather to those that we may want to access for styling or scripting purposes.
NOTE:
  • Every element that must have an id should have a unique id and no two elements should have same id.
EXAMPLE
<button id='btn'>SUBMIT</button>
<button>LOGIN</button>
<button>RECOVER PASSWORD</button>

<style>
#btn{
border:none;
padding:6px;
background-color:red;
color:white;
font-weight:bold;
}
</style>

<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", btnClick);

function btnClick(){
btn.innerText = "CLICKED";
alert("btn clicked upon");
}
</script>

Copy PRACTICE IT

Above, we created three (3) elements in a webpage and assigned a unique id (btn) to one of the elements. With the use of this unique id, we were able to access that element and not just style it but also assign a JavaScript function to it when clicked.
NOTE:
  • Do not be overwhelmed by the CSS or JavaScript. Focus on understanding the importance of the id attribute. You will get to understand CSS and JavaScript soon.
SUMMARY
  1. The id attribute gives a unique identity to an HTML element in a webpage.
  2. Through this unique identity, we can therefore access such elements and apply both styling and scripting on them. This is just as a couple give unique names to their children so as to call on them at any time.
Take a short quiz on Elements' ID.
Ask a question or tell us if Elements' ID is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode