How to Highlight text in Html

Highlight text with Html5 <mark> tag

To emphasize text within an HTML document using the <mark> tag, we need to adhere to the following procedures outlined below. By following these instructions, we can effectively emphasize text.

To begin, the initial step involves entering the HTML code into a text editor or accessing the HTML file in a text editor where the text highlighting is intended to be applied.

Example

<!Doctype Html>

<Html>   

<Head>    

<Title>   

Highlight the text in Html

</Title>

</Head>

<Body> 

The text which we want to highlight.

</Body> 

</Html>

Next, we need to position the cursor at the beginning of the desired text for highlighting. Subsequently, we should enter the opening <mark> tag. Remember, the <mark> tag is a paired tag, necessitating its closure immediately after the text intended for highlighting.

Example

I Love <mark> my India.</mark>

Step 3 involves saving the HTML file and subsequently opening it in a web browser for viewing.

Example

<!Doctype Html>

<Html>   

<Head>    

<Title>   

Highlight the text in Html

</Title>

</Head>

<Body> 

I Love <mark> my India.</mark>

</Body> 

</Html>

The screenshot below displays the result of the HTML code provided above:

Highlight text using Internal CSS

To emphasize text using an Internal Cascading Style Sheet (CSS), we need to adhere to the following guidelines. By following these steps, we can effectively emphasize text.

To begin, we need to input the HTML code into a text editor or open the current HTML file in the text editor where we intend to emphasize the text.

Example

<!Doctype Html>

<Html>   

<Head>    

<Title>   

Highlight the text using CSS

</Title>

</Head>

<Body> 

The text which we want to highlight.

</Body> 

</Html>

Step 2: Next, the cursor needs to be positioned within the head tag right after the title tag in the Html document. Inside the <style> tag, the styles should be specified as demonstrated in the subsequent block. Subsequently, the background-color attribute should be entered into the class.

Example

<Head>    

<Title>   

Highlight the text using CSS

</Title>

<style>

.class_name

{ 

background-color : yellow; 

}

</style>

</Head>

Step 3: Next, it is necessary to apply the class within the <span> element to emphasize the text.

Example

<span class="class_name"> the text we want to mark as highlight</span>

Step 4 involves saving the HTML file and subsequently opening it in a web browser to view the changes.

Example

<!Doctype Html>

<Html>   

<Head>    

<Title>   

Highlight the text using CSS

</Title>

<style>

.highlighttext

{ 

background-color:#FFFF00; 

}

</style>

</Head>

<Body> 

The text which <span class="highlighttext"> we want to highlight</span>.

</Body> 

</Html>

Input Required

This code uses input(). Please provide values below: