Geekers - Various purposes in writing are available in HTML in the form of elements - elements with various uses. In this discussion, the material that will be discussed is about how to make abbreviations and change the direction of text in HTML.
For those of you who want to write abbreviations in HTML documents, you can use the <abbr> … tag pair. </abbr> which is used to explain the length of an abbreviation such as PMR, MPR, PMI, RI, and so on.
Next, you must be wondering about the use of changing the text direction in HTML. HTML is a global language. Text written in HTML documents is not only in English or Indonesian, which are generally written from left to right, but is also available for languages with special characters written from right to left, such as Arabic.
For this reason, HTML provides a special tag to change the direction of text, namely the <bdo> tag. For a more complete explanation, let's look at the explanation below:
A. Write abbreviations in HTML with the <abbr> tag
The abbr element shows an abbreviation which means an abbreviation or acronym such as PHP, HTML, HTTP, WWW, and so on where all of these abbreviations certainly have an extension. The <abbr> tag is used to explain what an abbreviation stands for. Explaining what an abbreviation stands for can provide useful information for web browsers, translators, readers and search engines.
Inside the <abbr> tag there are attributes, namely:
Attribute Value Function
 Title  Abbreviation of the abbreviation  Explains what the abbreviation stands for and does not contain other information.
The abbreviation of an abbreviation in the title attribute will be visible in the browser if you point the pointer or mouse over the abbr element (abbreviation).
The following is an example of using the <abbr> tag in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Writing Abbreviations in HTML</title>
</head>
<body>
<p>DARPA sponsored the development of networks that use <abbr title="Internet Protocol">IP</abbr>,<abbr title="Transmission Control Protocol">TCP</abbr>, and <abbr title="User Datagram Protocol" >UDP</abbr>.</p>
</body>
</html>
After you run the code above in a web browser, it will appear as shown below:
How to Create Abbreviations and Change Text Direction in HTML How to Create Abbreviations and Change Text Direction in HTML
If you point the pointer to an abbreviation that exists, for example on IP, the abbreviation will appear as shown below:
shorthand using hover tag shorthand using hover tag
B. Changing the text direction in HTML with <bdo> tag
The bdo element stands for Bi-Directional Override which is used to change the direction of the text that is being applied to an element in HTML. This tag includes the inline tag type and is also displayed following the existing text flow.
Inside the <bdo> tag there are attributes, namely:
Attribute Value Function
dir ltr (left to right) Displays text from left to right
rtl (right to left) Displays text from right to left
The following is an example of writing code and using tags
in HTML :
<!DOCTYPE html>
<html>
<head>
<title>Changes the Text Direction in HTML</title>
</head>
<body>
<p>Example Text:</p>
<bdo dir="ltr">Left to right example</bdo></br>
<bdo dir="rtl">Right to left example</bdo>
</body>
</html>
After you run the code above in a web browser, it will appear as shown below:
Using bdo tags in html Using bdo tags in html
From the picture above, you can see the result of using the <bdo> tag with the ltr (left to right) and rtl (right to left) values. The use of rtl (right to left) is rarely used in English and Indonesian because in general both languages are written from left to right.
You now understand the function of the two tags? If so, make sure you proceed to the next HTML material regarding the use of kbd, samp, code and var elements in HTML.
([26]Submit) Part 10: How to Make a Quote
([28]Submit) Part 12: Elements of Kbd, Samp, Code, and Var