HTML Formatting

 

HTML Formatting

HTML provides us with several tags to help format text, <b> for bold, <i> for italic, <u> for underlining, etc. These tags are divided into two categories:

Physical Tags: These tags are presentational. They don't add extra meaning to the text. For example,

<p> This text is <i>italic</i>.</p>

Browser Output

Italic text with

Here, the <i> is only for text styling and has no other meaning.

Semantic Tags: These tags add some special meaning to the text along with adding style to the text. For example,

<p> This text is <em>emphasized</em>.</p>

Browser Output

Italic text with

Here, the <em> is used to emphasize text. Screen readers also emphasize text inside the <em> tag while dictating.

Note: The formatting tags are mostly inline tags like <b>, <u>, <i>, etc and are used for styling texts.

HTML Formatting tags

Below are listed the formatting tags available in the latest version of HTML.

  • <b> tag - Bold Text
  • <i> tag - Italic Text
  • <u> tag - Underlined Text
  • <strong> tag - Strong Text
  • <em> tag - Emphasized Text
  • <mark> tag - Highlighted Text
  • <sup> tag - Superscript Text
  • <sub> tag - Subscript Text
  • <del> tag - Deleted Text
  • <ins> tag - Inserted Text
  • <big> tag - Big Text
  • <small> tag - Small Text

HTML <b> and <strong> tag

The HTML <b> is a physical tag used to simply make text bold.

<p> This text is <b>bold</b>.</p>

Browser Output

Bold text with

The HTML <strong> tag is a semantic tag that is used to signify that the text inside the tag is of higher importance. This is shown by making the text bold.

<p> The text is <strong>strong</strong>.</p>

Browser Output

Bold text with

HTML <i> and <em> tag

The HTML <i> tag is a physical tag used to make the text italic. It is used to indicate foreign text, scientific nomenclature, thoughts, etc.

<p> This text is <i>italic</i>.</p>

Browser Output

Italic text with

The HTML <em> tag is a semantic tag that is used to signify that the text inside the tag is being emphasized. It is a semantic tag as opposed to <i>, which doesn't hold any semantic meaning.

<p> This text is <em>emphasized</em>.</p>

Browser Output

Italic text with

HTML <u> tag

The HTML <u> tag is a physical tag used to make the text underlined.

<p> This text is <u>underlined</u>.</p>

Browser Output

Underlined text with

HTML <mark> tag

The HTML <mark> tag is a physical tag that is used to highlight text.

<p> This text is <mark>marked</mark>.</p>

Browser Output

Underlined text with

HTML <sup> and <sub> tag

The HTML <sup> tag is used to create superscript text. The text is placed half a character height above other text and is a size smaller.

<p> This text is <sup>superscripted</sup>.<p>

Browser Output

Superscript text with

The HTML <sub> tag is used to create subscript text. The text is placed half a character height below other text and is a size smaller.

<p> This text is <sub>subscripted</sub>.<p>

Browser Output

Subscript text with

HTML <ins> and <del> tag

The HTML <del> tag is a semantic tag used to represent that the text is deleted or changed.

<p> This text is <del>deleted</del>.</p>

Browser Output

Deleted text with

The HTML <ins> tag is a semantic tag used to represent that the text has been inserted in the document. The <ins> tag generally follows some deleted text.

<p> This text is <del>deleted</del> <ins>inserted</ins>.</p>

Browser Output

Inserted text with

HTML <big> and <small> tag

The HTML <big> tag is a physical tag used to make text one font size larger than the surrounding text.

<p> This text is <big>bigger</big>.</p>

Browser Output

Bigger text with

The HTML <small> tag is a physical tag used to make text one font size smaller than the surrounding text.

<p> This text is <small>smaller</small>.</p>

Browser Output

Small text with

Comments

Post a Comment

Popular posts from this blog

Introduction to Computer

Image
Computers are electronic devices that are designed to process, store, and retrieve data. They are used for a wide variety of purposes, from personal computing to complex scientific simulations and industrial automation. A computer consists of various hardware components, including a central processing unit (CPU), memory, storage devices, input/output (I/O) devices such as keyboards, mice, and displays, and various other peripherals. Computers communicate with each other over networks, which are interconnected groups of computers that share resources and information. The internet is a global network that connects millions of computers around the world and enables communication and information sharing on an unprecedented scale. The field of computer science is concerned with the study of computers and computational systems, including their design, development, and application. It encompasses many subfields, including artificial intelligence, computer graphics, databases, programming lang...
Read more

History of Computer

Image
  History of Computer Topics  Definition of computer  Earliest computer  Computer History  Computer Generations Definition of Computer  Computer is a programmable machine.  Computer is a machine that manipulates data according to a list of instructions.  Computer is any device which aids humans in performing various kinds of computations or calculations.  Definition of Computer Three principles characteristic of computer:  It responds to a specific set of instructions in a well-defined manner.  It can execute a pre-recorded list of instructions.  It can quickly store and retrieve large amounts of data.  Earliest Computer  Originally calculations were computed by humans, whose job title was computers.  These human computers were typically engaged in the calculation of a mathematical expression.  The calculations of this period were specialized and expensive, requiring years of training in mathematics.  T...
Read more

Computer Generation

Image
 There are five generations of computer:  First generation– 1946 - 1958  Second generation– 1959 - 1964  Third generation– 1965 - 1970  Fourth generation– 1971 - today  Fifth generation– Today to future The First Generation   The first computers used vacuum tubes for circuitry and magnetic drums for memory, and were often enormous, taking up entire rooms.  They were very expensive to operate and in addition to using a great deal of electricity, generated a lot of heat, which was often the cause of malfunctions. The Second Generation   Transistors replaced vacuum tubes and ushered in the second generation of computers.  One transistor replaced the equivalent of 40 vacuum tubes.    Allowing computers to become smaller, faster, cheaper, more energy-efficient and more reliable.  Still generated a great deal of heat that can damage the computer. The Third Generation  The development of the integrated circuit was ...
Read more