Table of Contents

Text Formatting and Attributes

Text Formatting in HTML

There is a list of elements in HTML for defining a text with a special meaning. In a web page there we have lots of texts which we wanna to highlight, so that is why formatting elements are designed.

Here is a list of HTML Formatting elements and their functions:

– used to display bold text.
– used to display an important text.
- used to display an italic text.
– used to display a subscripted text.
<ins> – used to describe an inserted text.
– used to describe a small text.
<del> – used to describe a deleted text.
<big> – used to describe a big text.
– used to describe a marked text.

Let’s see how you can use these formatting elements in your code.

<body>
 <p> normal text </p>
 <p> <b> bold text </b> </p>
 <p> <i> italic text </i> </p>
 <p> <strong> strong text </strong> </p>
 <p> <sub> subscripted text </sub> </p>
 <p> <ins> inserted text </ins> </p> 
 <p> <small> small text </small> </p>
 <p> <del> deleted text </del> </p> 
 <p> <big> big text </big> </p> 
 <p> <mark> marked text </mark> </p> 
</body>

Output

normal text

bold text

italic text

strong text

_{subscripted text}

inserted text

small text

~~deleted text~~

big text

marked text

HTML Attributes

All HTML elements can have attributes. Attributes provide additional information about HTML elements and tags. Attributes are always specified in the start tag, and it modifies the tag.

The href Attribute

As we know that in HTML links are defined using the <a> tag. Here we use the href attribute to define the link’s destination address:

Example

<a href = "https://crus4.com"> crus4 </a>

Output

crus4

Once you click on the “crus4” it will redirect you to our site crus4.com

The src Attribute

To insert an image in a HTML page we use <img> tag. The <img> tag does not have a closing tag. The URL address of an image can be defined using the src attribute.

Example

<img src ="table.jpg"/>

This is the HTML image syntax. The text table.jpg that is placed between the quotation marks is actually the image location. e.g, if you have an image named “table.jpg” in the same folder as the HTML file, your code will look the as the above.

Note:- You can also link an image to another document, by simply nest the <img> tag inside the <a> tags

We will discuss in depth about an <img> tag in the next post, here I just wanna to clear your doubts about attributes.

Next

Introduction to web development

Introduction to HTML, CSS & JS

History of HTML | Boilerplate Explained

How to download VS Code in your laptop | #1 best text editor for HTML

Basics of HTML #1

Text Formatting and Attributes in HTML – crus4