Learn HTML – Part 61 – mark Tag – Highlight Text

Learn HTML – Part 61 – mark Tag – Highlight Text

The HTML mark tag is used to highlight text that is important or relevant.

It displays the text with a highlighted background, usually yellow by default.


What is the mark Tag?

The mark element represents text that is marked or highlighted for reference.

It is commonly used to emphasize search results or important information.


Basic Syntax

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

Example – Highlighted Text

<p>
Learn HTML to build <mark>modern websites</mark> easily.
</p>

Output:

Learn HTML to build modern websites easily.


When to Use mark?

  • Highlight important keywords
  • Show search results
  • Emphasize relevant text
  • Improve readability

Styling the mark Tag

The appearance of mark can be customized using CSS.

<style>

mark {
   background-color: orange;
   color: white;
}

</style>

Output:

This is custom styled text.


Why Use mark?

  • Draws attention to key information
  • Improves user experience
  • Useful for highlighting search matches
  • Provides semantic meaning

The mark tag highlights important or relevant text in HTML.


Common Mistakes Beginners Make

  • Using mark for styling instead of meaning
  • Overusing highlights
  • Confusing mark with strong or em tags

Conclusion

The HTML mark tag is used to highlight important text in a webpage.

It improves readability and helps users quickly identify key information.

What’s Next?

Now that you understand the mark tag, the next step is learning about the time tag, which is used to represent dates and times.

Next: Learn HTML – Part 62 – time Tag – Date & Time →


Series: Learn HTML Series

Facebook
WhatsApp
Twitter
LinkedIn
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Articles from the Series

learn-html-part-63-complete-html-project-thumbnail
Learn HTML – Part 63 – Complete HTML Project (Build a Web Page)
Learn HTML – Part 63 – Complete HTML Project In this final lesson, we will build a complete HTML webpage...
learn-html-part-62-time-tag-date-time-thumbnail
Learn HTML – Part 62 – time Tag – Date & Time
Learn HTML – Part 62 – time Tag – Date & Time The HTML time tag is used to represent dates and times...
learn-html-part-60-figcaption-tag-figure-caption-thumbnail
Learn HTML – Part 60 – figcaption Tag – Figure Caption
Learn HTML – Part 60 – figcaption Tag – Figure Caption The HTML figcaption tag is used to define a caption...
learn-html-part-59-figure-tag-media-content-thumbnail
Learn HTML – Part 59 – figure Tag – Media Content
Learn HTML – Part 59 – figure Tag – Media Content The HTML figure tag is used to group media content...
learn-html-part-58-track-tag-video-subtitles-thumbnail
Learn HTML – Part 58 – track Tag – Video Subtitles
Learn HTML – Part 58 – track Tag – Video Subtitles The HTML track tag is used to add subtitles, captions,...
learn-html-part-57-source-tag-media-sources-thumbnail
Learn HTML – Part 57 – source Tag – Media Sources
Learn HTML – Part 57 – source Tag – Media Sources The HTML source tag is used to define multiple media...
learn-html-part-56-picture-tag-responsive-images-thumbnail
Learn HTML – Part 56 – picture Tag – Responsive Images
Learn HTML – Part 56 – picture Tag – Responsive Images The HTML picture tag is used to display responsive...
learn-html-part-55-dialog-tag-modal-dialog-thumbnail
Learn HTML – Part 55 – dialog Tag – Modal Dialog
Learn HTML – Part 55 – dialog Tag – Modal Dialog The HTML dialog tag is used to create modal or popup...
learn-html-part-54-summary-tag-details-caption-thumbnail
Learn HTML – Part 54 – summary Tag – Details Caption
Learn HTML – Part 54 – summary Tag – Details Caption The HTML summary tag is used to define a visible...
learn-html-part-53-details-tag-expandable-content-thumbnail
Learn HTML – Part 53 – details Tag – Expandable Content
Learn HTML – Part 53 – details Tag – Expandable Content The HTML details tag is used to create expandable...
Scroll to Top