The dir Attribute
As I mentioned in a previous post, HTML elements have a text direction property. This relates to whether or not the text is left to right or right to left.
But it actually has three valid states:
As you can probably guessed, 'ltr' means left to right and 'rtl' means right to left but the auto state is less intuitive. The auto state makes an attempt at guessing the directionality of the text from the text within the element. It does this by looking at the first character with a strong directionality and inferring the direction state from that.
This automatic behaviour can lead to some subtle bugs when an element could contain more than one language. An example would be in a messaging application where the location of the previous chats is determined based on the language used (so your messages on the left and the other persons on the right when in a ltr language and vice versa for a rtl language). Then if the members of the chat swapped languages, it would be unclear as to who said what.
When the dir attribute is not set, it is the same as its parent unless it is the root element in which case the default is 'ltr'.
The Class Attribute
The class attribute is a very powerful attribute that allows you to add the element to a group, This group can then be styled or interacted with independently of anything else.
In a previous post, I used the example of ship names for a class which is an example of placing elements into a group and giving it semantic information. In this case, it meant that the element represented a Ship Name.
Elements can belong to multiple different classes at once. This is done by including a list of classes separated by spaces such as:
<div class="Name Ship_Name Full_Name" />/prep>
Classes should be semantic rather than presentational which means that you should have classes like Ship_Name and IconList rather than FloatLeft or SmallMargin.
The style Attribute
The style attribute is available as part of the CSS Specification. It has no bearing on semantic meaning of the document and only affects the display of the element.
Although I could go into great detail here, I don't really consider this to be part of the HTML 5 specification and instead a part of the CSS specification.odeProject
