R.I.B.H.U. Academy^®

Using Inline Level HTML Elements

    You have seen (in previous pages,) many HTML elements, some of which are BLOCK level, and some are INLINE level. Inline level and some Block level HTML elements cannot be used as BOX type HTML elements, (for example, <span></span> , <p></p> , <pre></pre> , <h1></h1> , and other heading elements, etc.) that is, another BLOCK level elements cannot be placed inside them.

    However, some HTML elements, which are treated as INLINE level, can wrap the BOX type or other BLOCK level elements. One of them is <a href=""> </a> (ANCHOR tag) in which href attribute is must, and value for it, inside two double-quotes, should be absolute/relative path or (#id_name) local path of a WEB-PAGE.

    Here, inside <a href="https://ribhuacademy.com"> Go to Another Website </a>, absolute path is the full name of WEB-PAGE (or another website), to which the ANCHOR tag will target. The relative path is the WEB-PAGE file name in the same (present) website. The local path is the location to the HTML element in the same (present) WEB-PAGE.

    However, in the <link href="" /> HTML element, the value for href attribute is not the name of WEB-PAGE or name of WEBSITE, but it is the actual file with extension, for example, .css (for stylesheet code) or .js (for javascript code).

Hyperlinks:

    The basis of internet (web) is the HYPERLINKs, which enables us (all users) to browse and go around the WEB. This HYPERLINK is created with <a href="" title=""> </a> (ANCHOR tag can also contain title attribute). title attribute inside anchor tag also give information when mouse is moved over <a href="" title=""> LINK </a>. You can wrap many things, for example, an image, texts, or a BOX type HTML element, inside <a > </a> element. You can see an example of this, at the top of this website, that is, all three things inside a DIV element, LOGO (image), BRAND NAME (<h1></h1>), and SLOGAN (<h2></h2>), and other DIV elements, are enclosed inside one ANCHOR element.

    This nesting of different HTML elements inside one ANCHOR element can easily be achieved with Bootstrap framework. Also, many other parts (sections) of a WEB-PAGE can easily be created with Bootstrap framework. All these things, that is, creating HTML structure, designing WEB-PAGEs (applying CSS), and manipulating or interacting with WEB-PAGE (for example, enlarging images on clicking with left-mouse-button or tapping with your finger on mobile phone - applying JavaScript) can be written in TEXT / CODE Editor. But, you should not forget the mantra: DRY (Don't Repeat Yourself).

<a href="#id_name" title="go to specific ID in same page"> LINK </a> element is used to anchor LOCAL LINK (in the same page, to a HTML element, inside which specific ID is placed).

<a href="" target="_blank"> LINK </a> target attribute inside the ANCHOR tag is used with four different values: _blank will open the texts LINK in new tab of the web-browser.

<a href="" target="_self"> </a> should be used to open the LINK texts in current browsing tab. This is the default behaviour, when target attribute is not present.

<a href="" target="_parent"> </a> should be used to open the LINK texts in the browser's previous (parent) page. If there is no parent page, it behave like _self.

<a href="" target="_top"> </a> is used to open the LINK texts at the top of parent page.

Some Useful Inline Level HTML Elements:

    Consider the word 'texts' in following examples:

<b> </b> element should be used to see the texts inside it, visually BOLD.

<strong> </strong> element should be used few times, for Search Engine Optimization that texts inside it, is strongly important.

<i> </i> element should be used to see the texts inside it, visually ITALIC.

<em> </em> element should, similarly, be used few times, for Search Engine Optimization that texts inside it, is emphasized.

<small> </small> element should be used to make texts inside it smaller than current font-size (approximately 80%).

<mark> </mark> element should be used to highlight texts inside it, with yellow background-color. However, some framework, e.g. Bootstrap will make those texts custom highlight with light-yellow (#fcf8e3) background-color.

<del> </del> element should be used to show texts inside it, visually deleted.

<s> </s> element should be used to strike texts inside it.

<ins> </ins> element should be used to (underline) inserted texts inside it.

<u> </u> element is obsolete, and is also used to underline texts inside it.

 element should be used to sub-script the _texts inside it. For example, molecular formular of water is H₂O.

 element should be used to super-script the ^texts inside it. For example, (a + b)² = a² + 2ab + b² .

<q> </q> element should be used to quote texts inside it. However, nested <q> text1 <q> text2 </q> text3 </q> will show those quotes differently.

<abbr title="Recreative Interaction on Biodiversity & Humanity Universe"> R.I.B.H.U. </abbr> element should be used to surround the abbreviated texts, that is, R.I.B.H.U. inside it, which will show information from title attribute, when mouse is moved over it (pointer: [cursor attribute] of mouse is changed to help).

<cite> </cite> element should be used to cite texts inside it.

<code> </code> element should be used to code texts inside it (font-family is changed to monospace). However, some framework, e.g. Bootstrap will make these <code> </code> in crimson (#c7254e) font-color, with white (#f9f2f4) background-color.

<kbd> </kbd> element should be used to enclose keyboard input texts inside it (font-family is changed to monospace). However, some framework, e.g. Bootstrap will make these <kbd> </kbd> in white (#fff) font-color, with dark-gray (#333) background-color.

<bdo dir="rtl"> See texts in different languages </bdo> as described in following examples:

اردو، عربی اور عبرانی میں تحریریں دائیں سے بائیں لکھی جاتی ہیں۔         URDU

تتم كتابة النصوص باللغة الأردية والعربية والعبرية من اليمين إلى اليسار.     ARABIC

טקסטים באורדו, ערבית ועברית נכתבים מימין לשמאל.   HEBREW