Thursday, June 11, 2020

HTML Inline Elements

These HTML Inline Elements are also called phrase elements because they’re intended to wrap around a short string of a few words, or even a single word, to give it added meaning and formatting that sets it apart from the other words that surround it. Text elements in HTML come in two basic flavors: physical and logical.

Physical elements, such as <B> for bold and <I> for italic, are used to specify how text should be displayed. Logical elements, such as <STRONG> and <EM>, indicate what text is, but not necessarily how it should look.

Physical Character-Formatting Elements

HTML supports various elements that can be used to influence physical formatting. They have the same effect in all the browsers such as Netscape Navigator, Internet Explorer and Mozilla.

<b> Element: Anything that appears in a <b> element is displayed in bold. Note: This <b> element has the same effect as the <strong> element, which you will meet later, and is used to indicate that its contents have strong emphasis.

This is in <B>bold</B> text.

<i> Element: The content of an <i> element is displayed in italicized text. The <i> element has the same effect as the <em> element, which you will meet later, and which is used to indicate that its contents have emphasis.

This is in <I>italic</I> text.

<u> Element: The content of a <u> element is underlined with a simple line:

This text is <U>underlined</U>.

<s> and <strike> Element: The content of an <s> or <strike> element is displayed with a thin line through the text (<s> is just the abbreviated form of <strike>).

This is a <STRIKE>strikethough</STRIKE> example.

The <tt> Elemen: The content of a <tt> element is written in monospaced font.

This is in <TT>teletype</TT> text.

The <sup> Element: The  superscript  element  moves  the  text  higher  than  the  surrounding  text  and  (if possible) displays the text in a smaller size font.

This is a <SUP>superscript</SUP>.

The <sub> Element: The subscript element moves the text lower than the surrounding text and (if possible) displays the text in a smaller size font. 

This is a <SUB>subscript</SUB>.

The <big> Element: The content of the <big> element is displayed one font size larger than the rest of the text surrounding it. If the font is already the largest size, it has no effect. You can nest several <big> elements inside one another, and the content of each will get one size larger for each element.

Logical Elements (Phrase Elements)

The logical tags, similar to the general html document tags, allow the browser for rendering information in such a manner that it make accessible to browser. Any text that should be emphasized with code <em> and can be displayed with italics or bold.

All logical tags help the author for keeping a track of what you are saying without any sort of distraction. If you need someone’s address, it will be presented in an appropriate manner. Unfortunately, the logical tags are loosing out importance but still it serves some important purpose. 

See the Pen Logical Tags by PANKAJ (@pankkap) on CodePen.

HTML Character Entities: Add Special Characters in HTML

            There are times when it becomes necessary to display symbols or special characters in HTML that are not available on a standard keyboard, such as ©. You may also need to display special characters in HTML that have a special meaning in HTML (<,>,&, etc). To accomplish this, HTML uses the Special Character Entity tag.

            To add special characters in HTML, type an ampersand (&), followed by the pound sign (#), followed by the number of the code, and ended with a semicolon (;). For example, the © (copyright) symbol can be displayed by using &#169;. There are literally hundreds of special character entities currently available. A few of the more common tags are listed in the table below.

Some Useful HTML Character Entities

Character Entities Reference:

HTML <span> tag

HTML <span> tag is used as a generic container of inline elements. It is used for styling purpose to the grouped inline elements (using class and id attribute or inline style).

The <span> tag does not have any default meaning or rendering.

The <span> tag can be useful for the following task:

  • To change the language of a part of the text.
  • To change the color, font, background of a part of text using CSS
  • To apply the scripts to the particular part of the text.

Note: HTML <span> is much similar as <div> tag, but <div> is used for block-level elements and <span> tag is used for inline elements.


<span>Write your content here......</span>

See the Pen Span Tag by PANKAJ (@pankkap) on CodePen.