style / title / lang
| Since: | HTML 4(1997) |
|---|
The style, title, and lang attributes are global attributes that can be specified on almost all HTML elements. Use style to apply inline CSS, title to display a tooltip, and lang to specify the language of the text within an element.
Syntax
<!-- Applying inline styles --> <p style="color: red; font-size: 1.2rem;">Red text.</p> <!-- Specifying a tooltip --> <abbr title="HyperText Markup Language">HTML</abbr> <!-- Specifying a language --> <p lang="en">This paragraph is written in English.</p>
Attribute list
| Attribute | Description |
|---|---|
| style | Applies inline CSS styles to an element. Write CSS properties separated by semicolons. |
| title | Specifies a title or additional information for an element. Most browsers display this as a tooltip on mouseover. |
| lang | Specifies the language of the text within an element. Uses BCP 47 language codes (e.g., ja, en, zh). |
Sample code
sample_style_title_lang.html
<!-- Applying inline CSS with style --> <p style="color: #e74c3c; font-weight: bold;">Important notice</p> <!-- Displaying a tooltip with title --> <p> For abbreviations, use the <abbr title="HyperText Markup Language">HTML</abbr> element with the <code title="Short for abbreviation">abbr</code> tag and the title attribute. </p> <!-- Specifying the language for each paragraph --> <p lang="fr">Bonjour le monde.</p> <p lang="en">This is English text.</p> <!-- The title attribute on img works as a tooltip --> <img src="photo.jpg" alt="Landscape photo" title="Snowy scenery in Hokkaido (taken January 2024)">
Result
A paragraph with style applied is displayed in bold red text. Hovering over an element with a title attribute shows the specified text as a tooltip. The lang attribute communicates language information to browsers and screen readers but does not affect the visual appearance.
Notes
The style attribute is convenient for quickly testing styles or dynamically changing styles with JavaScript, but writing styles directly in HTML as inline styles reduces maintainability. Using an external CSS file or a style tag is the more common approach.
The title attribute can be specified on any element, but it is mainly used to expand abbreviations (<abbr>) or to provide supplementary descriptions for links. Since tooltips are not displayed on touch devices such as smartphones, important information should not rely solely on title — include it in the body text as well.
The lang attribute is typically written on the <html> tag to specify the language for the entire page, but it can also be applied to individual elements when multiple languages are mixed within a page. Screen readers use the lang attribute to read content in the correct language, making it an important attribute for accessibility.
Dynamically Manipulating style, title, and lang with JavaScript
var el = document.getElementById("box");
// Set individual style properties
el.style.color = "red";
el.style.fontSize = "1.5rem"; // camelCase for CSS properties
el.style.backgroundColor = "#f0f0f0";
// Set all styles at once (overwrites existing inline styles)
el.style.cssText = "color: red; font-size: 1.5rem; margin: 0;";
// Reset a style property
el.style.color = ""; // empty string removes the property
// Change the title attribute dynamically (e.g., for loading state)
var btn = document.getElementById("save-btn");
btn.setAttribute("title", "Saving...");
// After completion
btn.setAttribute("title", "Save");
// Change the lang attribute
document.documentElement.lang = "en"; // changes the lang on the html tag
Other Important Global Attributes
Beyond style, title, and lang, there are other global attributes that can be applied to nearly every HTML element.
| Attribute | Description |
|---|---|
| id | Specifies a unique identifier for the element. |
| class | Specifies one or more class names (space-separated). |
| hidden | Hides the element. Equivalent to display: none. |
| tabindex | Controls Tab key focus order. -1 removes the element from the focus sequence; positive integers set the order. |
| draggable | Makes the element draggable. Used with the Drag and Drop API. |
| contenteditable | Allows the user to edit the element's content directly in the browser. |
| data-* | Custom data attributes. Store arbitrary data on an element and access it from JavaScript. |
| dir | Specifies text direction. Values: ltr (left-to-right), rtl (right-to-left), auto. |
<!-- contenteditable: an inline-editable note area -->
<div contenteditable="true" style="border: 1px solid #ccc; padding: 8px;">
Click here to edit this text.
</div>
<!-- data-*: store data on buttons and read it from JavaScript -->
<button data-user-id="42" data-action="delete">Delete</button>
<script>
var btn = document.querySelector('[data-action="delete"]');
btn.addEventListener("click", function() {
var userId = this.dataset.userId; // "42"
console.log("Deleting user " + userId);
});
</script>
<!-- dir: right-to-left text for Arabic -->
<p dir="rtl" lang="ar">مرحبا</p>
Common Mistakes
Mistake 1: Misusing inline style attributes vs. CSS classes
Inline style attributes have high CSS specificity and are difficult to override with class-based rules, which reduces maintainability. Styles that define design patterns should be defined as CSS classes in a <style> tag or an external stylesheet.
<!-- NG: fixed styles written as inline attributes (hard to override with CSS) --> <p style="color: red; margin: 20px;">Important notice</p>
The corrected version looks like this:
<!-- OK: define styles as a CSS class -->
<style>
.notice { color: red; margin: 20px; }
</style>
<p class="notice">Important notice</p>
Mistake 2: Omitting the lang attribute
Omitting the lang attribute on the html element prevents screen readers and translation tools from correctly identifying the page language. Always specify lang="en" (or the appropriate language code) on pages in that language.
<!-- NG: no lang attribute --> <html> <head><meta charset="UTF-8"></head> <body><p>English content here.</p></body> </html>
The corrected version looks like this:
<!-- OK: specify the lang attribute --> <html lang="en"> <head><meta charset="UTF-8"></head> <body><p>English content here.</p></body> </html>
Browser Compatibility
Chrome
1 and later ○
Firefox
1 and later ○
Safari
1 and later ○
Edge12 and later ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera
3.5 and later ○
iOS Safari1 and later ○
Android Browser4.4 and later ○4 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○* Version data based on MDN.
If you find any errors or copyright issues, please contact us.
シェアする