HTML comes with several language tags which we will investigate here.
The Bidirectional Isolation Element
The Bidirectional Override Element
The Ruby Parantheses Element
The <rp> tag and its' closing </rp> tag are used for providing parentheses or other content around a ruby text component of a ruby annotation and is shown as a fallback when browsers don't support ruby annotations.
The Ruby Text Element
The Ruby Text Characters Element
The Ruby Element
Creating A Webpage
Lets create a webpage for our formatting tags to see what they do!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- Copy and paste the following code into the document.
<!DOCTYPE html> <!-- Language Tags --> <html lang="en"> <head> <title> HTML Language Tags </title> </head> <body> <h2>Using HTML Language Tags.</h2> <h3>Bidirectional Tags.</h3> <p>The Arabic word for utopia is <bdi>يوتوبيا </bdi></p> <bdo dir="ltr">The text will flow from left to right</bdo><br> <bdo dir="rtl">The text will flow from right to left</bdo> <h3>Ruby Annotation Tags.</h3> <ruby> 伦 <rp>(</rp><rt>lún</rt><rp>)</rp> 敦 <rp>(</rp><rt>dūn</rt><rp>)</rp> <rtc> London</rtc> </ruby> </body> </html>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
formattags.htmlfile to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.
After doing either of these you should see a similar webpage in your browser to the following screenshot:
The first thing to note is is how the text is completely reversed when using the <bdo> tag with the rtl attribute.
It should also be noted with ruby annotations that this is one of the rare occasions nowadays where redering tags in different browsers is noticeable as you will notice if you render the HTML in Chrome and Firefox. The <rtc> element appears on the right in Chrome and on top in Firefox.
Lesson 10 Complete
In this lesson we learnt about the various language tags and their uses within our web pages.
That's it for the basic lessons, we begin the intermediate tutorials with a look at metadata.
The <bdi> Bidirectional Isolation tag
The <bdo> Bidirectional Override tag
The <rp> Ruby Parantheses tag
The <rt> Ruby Text tag
The <rtc> Ruby Text Characters tag
The <ruby> Ruby tag