This complete working example shows how to use custom data-* attributes, class, id, and style in HTML, as well as how to use CSS and JavaScript for basic interaction:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Advanced HTML Attributes Example</title> <style> .highlight { background-color: yellow; } #mainContent { padding: 20px; border: 1px solid black; margin: 10px 0; } </style> </head> <body> <div id="mainContent" class="highlight"> <p>This text is styled by both an ID and a class.</p> </div> <p style="color: red; font-size: 16px;">This paragraph has inline styles.</p> <article id="post" data-author="Jay" data-published="2024-05-04"> <h2>Article with Custom Data Attributes</h2> <p>Data stored in this element can be used by scripts.</p> </article> <button onclick="displayData()">Display Article Author</button> <script> function displayData() { let article = document.querySelector('#post'); alert('Article written by: ' + article.dataset.author + ', published on: ' + article.dataset.published); } </script> </body> </html> |
Explanation of the Code
HTML Structure: The <head> and <body> elements make up the structure of this page. The style, title, and meta charset definitions are contained in the <head>.
CSS Style:
Body Content
This complete working example shows how to use custom data-* attributes, class, id, and style in HTML, as well as how to use CSS and JavaScript for basic interaction:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Advanced HTML Attributes Example</title> <style> .highlight { background-color: yellow; } #mainContent { padding: 20px; border: 1px solid black; margin: 10px 0; } </style> </head> <body> <div id="mainContent" class="highlight"> <p>This text is styled by both an ID and a class.</p> </div> <p style="color: red; font-size: 16px;">This paragraph has inline styles.</p> <article id="post" data-author="Jay" data-published="2024-05-04"> <h2>Article with Custom Data Attributes</h2> <p>Data stored in this element can be used by scripts.</p> </article> <button onclick="displayData()">Display Article Author</button> <script> function displayData() { let article = document.querySelector('#post'); alert('Article written by: ' + article.dataset.author + ', published on: ' + article.dataset.published); } </script> </body> </html> |
Explanation of the Code
HTML Structure: The <head> and <body> elements make up the structure of this page. The style, title, and meta charset definitions are contained in the <head>.
CSS Style:
Body Content
Copyrights © 2024 letsupdateskills All rights reserved