Are you going to add an important line or warning in your post? Do you need to Highlight it?
There are certain situations when you will need to highlight a text portion in HTML or WordPress. If you are using WordPress then you know that there is no option to highlight text in the editor. But you can highlight text easily in WordPress by editing some HTML code.
Highlight Text By HTML
Highlighting a portion of the post in WordPress is not a big deal. You just need to edit some of the HTML code of your post.
Click on the text tab in WordPress editor. The text section in WordPress editor allows you to edit HTML code of your posts.
Don’t worry if you are new to HTML, just follow the steps.
Add the text between
<mark> and the
</mark> HTML tag in the text section.
Example: Howdy Bloggers, <mark>this is highlighted text</mark>
Output: Howdy Bloggers, this is highlighted text
Don’t add the code to the visual section of WordPress editor, it will output the code same as it is.
Modification In Highlighted Color
By default the background color of mark tag is yellow.
You can also change the highlight color or simply background color of text.
You will need to add some CSS styling to mark tag for changing the background color.
style="background-color: orange" in your mark tag.
Example: Howdy Bloggers, <mark style=”background-color: orange”>this text is highlighted red.</mark>
Output: Howdy Bloggers, this text is highlighted orange.
However, it doesn’t seem pretty. You should avoid using many background colors in your posts because it can distract users.
It is hard to read text with different background colors.
Logic Behind This: How it Worked?
So, you want to know how it worked.
Its simple, you have added an HTML mark tag. The mark HTML tag defines the text to be highlighted. It is used in a situation to grab users attention.
You can add a warning or important text in mark tag to highlight it. It will prevent readers to miss important texts.
You have used CSS styling in next part. CSS is used to style web pages.
I will not go in depth about CSS, you can read more about it here.
In our second example, we have used CSS property “background-color”. As the name indicates, it defines the background color of the element.
You have seen the power of using HTML and CSS with WordPress.
You should know that highlighting too much text will distract readers. Use them only when necessary don’t get carried away.
Adding highlighted text grabs readers attention on important texts and warnings in your post.
Using highlighting in a smart way can also boost your sales.
I will recommend you to use highting wisely and in a limited amount.
What type of texts do you highlight in your posts? Let us know in comments.