HTML - Formatting

Previous Page Next Page  

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

Inserted Text

Inserted Text in HTML, often represented by the <ins> element, is used to indicate content that has been added to a document. This element is particularly useful in scenarios where you need to highlight new or updated information within a document. In this tutorial, we'll explore how to use the <ins> element effectively and provide examples to illustrate its usage.

Usage of <ins> Element:

The <ins> element is used to mark up text that has been inserted into a document, typically to signify new or updated content. It is paired with the <del> (deleted text) element, which represents content that has been removed or deleted. Together, these elements help to provide a clear indication of changes made to a document.

Syntax:

The <ins> element has a simple syntax: 

<ins>Inserted Text</ins>

This element does not have any required attributes, as its purpose is to simply mark up the inserted text.

Example:

Let's consider an example where we have a paragraph of text with some newly added content: 

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <ins>New content added.</ins>
  Nulla facilisi.
</p>

In this example, the <ins> element is used to mark up the text "New content added." This indicates to the reader that this text has been inserted into the document.

Styling Inserted Text:

You can apply CSS styles to the <ins> element to customize its appearance according to your design requirements. For example, you can change the color, font size, or background color of the inserted text using CSS. 

ins {
  color: green;
  font-weight: bold;
}

With the above CSS styles, any text marked up with the <ins> element will be displayed in green and bold.

Accessibility Considerations:

When using the <ins> element, it's important to consider accessibility. Screen readers and other assistive technologies may announce the presence of inserted text to users who rely on them. Therefore, ensure that the inserted text is meaningful and provides context to all users, including those with disabilities.

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

These tags are commonly used with CSS to allow you to attach a style to a section of a page.

Previous Page Print Page Next Page  
Advertisements

ads