html id attribute
The id attribute on the html element:
- → allows you to identify an element using a unique name which is the value of its id. Once the element has been targeted, CSS rules can be applied on it or scripts or you can link another element on page to that element
- is a global attribute → can be applied on all html elements;
- when applied on the root element <html>, its value is inherited by all other html elements
Examples
| <html | attribute | = | "value(s)" | > | ... | <⁄html> | example |
|---|---|---|---|---|---|---|---|
| 10. | id | = | id name | < id="ax"> ... <⁄> "ax" = this value is unique on page |
Video demonstration html id attribute
HTML5 html id attribute Tutorial
| min | video details |
|---|---|
| 00:02 | launch "id.php" file in browser |
| 00:05 | open "id.php" file in Notepad++ |
| 00:12 | usage id attribute: 1. apply CSS rules on a specific element on page 2. target a specific element when scripting 3. link an element to another element |
| 00:20 | usage: 1. apply CSS rules on a specific element on page |
| 00:21 | internal style is added on page, containing 3 CSS rules: the targeted text should be colored in white, underlined and the font-weight should be normal. The targeted text is the text of the HTML element identified through id="ax" |
| 00:27 | applying the identifier id="ax" on the html tag |
| 00:37 | saving the modifications in Notepad++ and refreshing the file in browser |
| 00:46 | testing: <html id="ax"> |
| 00:31 | result: the style is applied on the whole page |
| 01:10 | usage: 2. target a specific element when scripting |
| 01:16 | adding javascript code to page: targeted element: the one having id="ax" action: hide content when hovering over the targeted element and display it after 2 seconds event: onmouseover function applied on body element |
| 01:30 | the targeted element is the root element, html |
| 01:58 | saving the modifications in Notepad++ and refreshing the file in browser |
| 02:01 | testing: <html id="ax"> |
| 00:31 | result: when hovering over the page its content is being hidden and displays after 2 seconds |
| 02:30 | usage: 3. link an element to the targeted element |
| 02:34 | adding random text on page and a linked text at the bottom; the text is linked to the targeted element, html |
| 02:46 | saving the modifications in Notepad++ and refreshing the file in browser |
| 02:51 | testing: <html id="ax"> |
| 02:51 | result: when clicking on the linked text we are taken straight to the targeted element, html, at the top of the page |