| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
1. 'class'
The ‘class‘ attribute is used to define one or more class names for an HTML element. This allows the element to be styled with CSS or manipulated with JavaScript.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight { color: red; font-weight: bold; }
</style>
</head>
<body>
<p class="highlight">This text will be styled as bold and red.</p>
<p>This text will have the default style.</p>
</body>
</html>
2. 'id'
The ‘id‘ attribute specifies a unique identifier for an HTML element. It is often used to select the element for styling with CSS or for manipulation with JavaScript.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#uniqueElement { color: blue; }
</style>
</head>
<body>
<p id="uniqueElement">This paragraph has a unique ID and will be styled in blue.</p>
<p>This paragraph will have the default style.</p>
</body>
</html>
3. 'style'
The style attribute is used to apply inline CSS directly to an HTML element. It overrides any external or internal CSS defined in a <style> block.
Example:
<!DOCTYPE html>
<html>
<body>
<p style="color: green; font-size: 20px;">This paragraph is styled with inline CSS.</p>
</body>
</html>
4. 'title'
The ‘title‘ attribute provides additional information about the element. This information is typically displayed as a tooltip when the mouse hovers over the element.
Example:
<!DOCTYPE html>
<html>
<body>
<p title="This is a tooltip">Hover over this text to see the tooltip.</p>
</body>
</html>
5. 'lang'
The ‘lang‘ attribute specifies the language of the element’s content. This helps search engines and screen readers to better understand the content.
Example:
<!DOCTYPE html>
<html lang="en">
<body>
<p lang="fr">Bonjour tout le monde!</p> <!-- This text is in French -->
<p lang="en">Hello, world!</p> <!-- This text is in English -->
</body>
</html>
6. 'dir'
The ‘dir‘ attribute specifies the text direction of the content within the element. It can have the values ‘ltr‘ (left-to-right), ‘rtl‘ (right-to-left), or auto (determines direction based on the content).
Example:
<!DOCTYPE html>
<html>
<body>
<p dir="rtl">This text is displayed right-to-left.</p>
<p dir="ltr">This text is displayed left-to-right.</p>
</body>
</html>
7. 'hidden'
The ‘hidden‘ attribute is a Boolean attribute that indicates that the element is not yet, or is no longer, relevant. It won’t be displayed on the page.
Example:
<!DOCTYPE html>
<html>
<body>
<p hidden>This paragraph is hidden and won't be visible on the page.</p>
<p>This paragraph is visible.</p>
</body>
</html>
8. 'tabindex'
The ‘tabindex‘ attribute specifies the tab order of an element when the user navigates through elements using the “Tab” key. A positive number indicates the order, 0 means it follows the natural order, and a negative number makes the element focusable but removes it from the tab order.
Example:
<!DOCTYPE html>
<html>
<body>
<input type="text" value="First" tabindex="2">
<input type="text" value="Second" tabindex="1">
<input type="text" value="Third" tabindex="3">
</body>
</html>
9. 'data-*'
The ‘data-*‘ attribute is used to store custom data private to the page or application. This attribute is useful for storing information that is not intended to be displayed or styled but is used by scripts.
Example:
<!DOCTYPE html>
<html>
<body>
<div data-user-id="12345" data-user-role="admin">User Information</div>
<script>
var userId = document.querySelector('div').getAttribute('data-user-id');
var userRole = document.querySelector('div').getAttribute('data-user-role');
console.log(userId, userRole); // Output: 12345 admin
</script>
</body>
</html>
10. 'contenteditable'
The ‘contenteditable‘ attribute indicates whether the content of an element is editable. If set to true, the element becomes editable by the user.
Example:
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">This paragraph is editable. Click here to edit this text.</p>
</body>
</html>
11. 'spellcheck'
The ‘spellcheck‘ attribute specifies whether the element’s content should be checked for spelling errors. It can be set to true or false.
Example:
<!DOCTYPE html>
<html>
<body>
<textarea spellcheck="true">This is an editable text area. Try misspelling words to see the spellcheck in action.</textarea>
</body>
</html>
12. 'draggable'
The ‘draggable‘ attribute specifies whether an element is draggable. It can be set to ‘true‘ or ‘false‘.
Example:
<!DOCTYPE html>
<html>
<body>
<img decoding="async" src="image.jpg" alt="Draggable Image" draggable="true">
</body>
</html>
13. 'translate'
The ‘translate‘ attribute is used to specify whether the content of an element should be translated when the page is localized. It can be set to ‘yes‘ or ‘no‘.
Example:
<!DOCTYPE html>
<html>
<body>
<p translate="no">This content should not be translated.</p>
<p>This content can be translated.</p>
</body>
</html>
Global attributes in HTML enhance the flexibility and functionality of web pages by allowing developers to define custom data, control text direction, style elements, and much more. They are essential for creating interactive and well-structured web pages.
