html dir attribute
The dir attribute on the html element:
- → allows you to set element's text directionality
- 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 |
|---|---|---|---|---|---|---|---|
| 6. | dir | = | ltr, rtl, auto | < dir="ltr"> ... <⁄> < dir="rtl"> ... <⁄> < dir="auto"> ... <⁄> |
Video demonstration html dir attribute
HTML5 html dir attribute Tutorial
| min | video details |
|---|---|
| 00:02 | launch dir.php file in browser |
| 00:04 | open dir.php file in Notepad++ |
| 00:12 | dir attribute's values: ltr, rtl, auto |
| 00:17 | a) dir attribute, value: ltr, applied on html starting tag |
| 00:21 | saving the modifications in Notepad++ and refreshing the file in browser |
| 00:25 | testing: <html dir="ltr"> |
| 00:25 | result: the whole content's directionality is: ltr (letf-to-right) |
| 00:27 | b) dir attribute, value: rtl, applied on html starting tag |
| 00:31 | saving the modifications in Notepad++ and refreshing the file in browser |
| 00:33 | testing: <html dir="true"> |
| 00:33 | result: the directionality of the whole page's content is: rtl (right-to-left) |
| 00:37 | c) dir attribute, value: auto, applied on html starting tag |
| 00:42 | saving the modifications in Notepad++ and refreshing the file in browser |
| 00:44 | testing: <html dir="auto"> |
| 00:44 | result: text's directionality is unknown; the browser decides |