Learn HTML

HTML: mark tag

Description of HTML mark tag

The HTML “mark” tag is a semantic tag introduced in HTML5 that is used to highlight or emphasize text on a web page. When this tag is used, the enclosed text is typically rendered by the web browser as highlighted or with a yellow background, although the exact appearance may vary depending on the browser and user agent.

The syntax for using the “mark” tag is quite simple. To mark a section of text, simply wrap it in the opening and closing “mark” tags, like so:

<mark>This text should be highlighted</mark>

The “mark” tag is useful for calling attention to specific words or phrases, such as search terms or important keywords. It can also be used to highlight annotations or corrections in text.

It’s worth noting that the “mark” tag should be used for highlighting text for visual purposes only. If you want to add semantic emphasis to text (i.e., indicate that it is particularly important), it’s better to use the “em” tag or “strong” tag, which carry more semantic weight.

 

Syntax of HTML mark tag

The HTML <mark> tag is used to highlight a section of text on a webpage. Here’s the basic syntax of the <mark> tag:

<mark>Highlighted text</mark>

The text that you want to highlight goes between the opening and closing tags. You can also use CSS to style the <mark> tag as per your requirement.

Global Attributes

There is no “mark” tag in HTML. However, if you’re referring to the <mark> tag, it is an inline element that is used to highlight or mark a specific piece of text within a document.

Here are some global attributes that can be used with the <mark> tag:

  • class: specifies one or more class names for the element, which can be used to apply styles using CSS.
  • id: specifies a unique identifier for the element, which can be used for scripting or styling purposes.
  • style: allows you to apply inline styles to the element.
  • title: provides additional information about the element, which is displayed as a tooltip when the user hovers over it.
  • dir: specifies the direction of the text within the element (either “ltr” for left-to-right or “rtl” for right-to-left).
  • lang: specifies the language of the element’s content.
  • accesskey: specifies a shortcut key that can be used to activate or focus the element.
  • tabindex: specifies the tab order of the element within the document.
  • contenteditable: allows the content of the element to be edited by the user.
  • data-*: allows you to store custom data attributes on the element, which can be used for scripting or styling purposes.

Event Attributes

The <mark> tag is used in HTML to highlight text that has special emphasis or importance within a block of text. When the <mark> tag is used, the enclosed text is typically displayed in a distinctive color (usually yellow) or with other styling, such as a darker background or bolded text.

The <mark> tag is an inline element, which means that it should be used within a block-level element, such as a paragraph or a heading. It does not create a new line or break up the flow of text.

Here are some common attributes used with the <mark> tag:

  • class: This attribute is used to define a class name for the element, which can be used to apply CSS styles to the element.
  • id: This attribute is used to give the element a unique identifier, which can be used to link to the element or apply styles to it using CSS.
  • title: This attribute is used to provide additional information about the element, which is displayed as a tooltip when the user hovers over the element with their mouse.
  • style: This attribute is used to apply inline styles to the element, such as changing the color or background color of the highlighted text.
  • data-*: This is a custom attribute that allows you to add your own data to the element. You can replace the asterisk with any name you choose, and the attribute value can be any valid string. This attribute is often used to store data that is not visible to the user, but can be accessed and manipulated using JavaScript.

Other Attributes

The <mark> tag in HTML does not have any specific attributes other than the global attributes that can be used with any HTML element.

Global attributes are the attributes that can be used with any HTML element, such as class, id, style, title, and data-*. These attributes provide a way to add metadata, style, and functionality to the elements of an HTML document.

However, it’s worth noting that the use of attributes like class, id, and style can be particularly useful with the <mark> tag, as they allow you to apply specific styling or functionality to the highlighted text.

For example, you can use the class attribute to create a CSS class that applies a specific background color and text color to the <mark> element, like this:

<style>
.highlight {
background-color: yellow;
color: black;
}
</style>

<p>This is some <mark class="highlight">highlighted</mark> text.</p>

You can also use the id attribute to create a unique identifier for the <mark> element, which can be used to link to the element from elsewhere in the document, like this:

<p>Click <a href="#highlight">here</a> to jump to the highlighted text.</p>

<p>This is some <mark id="highlight">highlighted</mark> text.</p>

In summary, while the <mark> tag does not have any specific attributes other than the global ones, the use of attributes like class, id, and style can be particularly useful when styling or adding functionality to highlighted text.

Notes on HTML mark tag

Here are some important notes on the <mark> tag in HTML:

  1. The <mark> tag is used to highlight text that has special emphasis or importance within a block of text.
  2. The <mark> tag is an inline element and should be used within a block-level element, such as a paragraph or a heading.
  3. The highlighted text within the <mark> tag is typically displayed in a distinctive color, such as yellow.
  4. The <mark> tag does not have any specific attributes other than the global attributes that can be used with any HTML element.
  5. The use of attributes like class, id, and style can be particularly useful when styling or adding functionality to highlighted text.
  6. The <mark> tag can be used to improve the accessibility of a document by providing visual cues to assistive technologies, such as screen readers.
  7. The use of the <mark> tag should be limited to highlighting text that has actual semantic importance within the document and not used purely for decorative purposes.
  8. It’s worth noting that the use of too many <mark> tags can make the text harder to read and may detract from the overall readability of the document.
  9. Finally, it’s important to remember that the <mark> tag is just one of many ways to add emphasis or importance to text in HTML, and its use should be considered within the broader context of the document’s semantic structure and design.

Browser Compatibility

The HTML mark tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML mark tag

We will discuss the <mark> tag below, exploring examples of how to use the <mark> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

 

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

 

In this example, we start with the <!DOCTYPE> declaration, which specifies that this is an HTML5 document.

Next, we have the <html> tag, which contains the visible content of the document.

Inside the <html> tag, we have the <head> tag, which contains metadata about the document such as the title, which is “Example HTML5 Document with Mark Tag” in this case.

Inside the <head> tag, we have the <title> tag, which sets the title of the document as it appears in the browser’s title bar.

Next, we have the <body> tag, which contains the visible content of the document.

Inside the <body> tag, we have an <h1> tag with the text “Welcome to my website!”.

After that, we have a <p> tag with the text “Here’s some text with a ” followed by the <mark> tag, which highlights the phrase “highlighted phrase”. The <mark> tag is closed with the </mark> tag, followed by the rest of the sentence which is “in it.”.

Below that, we have another <p> tag with the text “Here’s some more text with another ” followed by another <mark> tag that highlights the phrase “highlighted phrase” as well. The <mark> tag is closed with the </mark> tag, followed by the rest of the sentence which is “in it.”.

Finally, we close the <body> and <html> tags to complete the document. When you open this HTML file in a web browser, you should see the two highlighted phrases on the page.

 


 

HTML 4.01 Transitional Document

Unfortunately, the <mark> tag is not supported in HTML 4.01 Transitional. It was introduced in HTML5. The closest equivalent in HTML 4.01 would be to use the <span> tag with a class or style attribute to apply a highlight effect to text. Here’s an example of how you could achieve this:

<!DOCTYPE html>
<html>
<head>
<title>Example HTML 4.01 Document with Highlighted Text</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Here's some text with a <span class="highlight">highlighted phrase</span> in it.</p>
<p>Here's some more text with another <span style="background-color: yellow;">highlighted phrase</span> in it.</p>
</body>
</html>

In this example, we start with the <!DOCTYPE> declaration, which specifies that this is an HTML 4.01 document in Transitional mode.

Next, we have the <html> tag, which contains the visible content of the document.

Inside the <html> tag, we have the <head> tag, which contains metadata about the document such as the title, which is “Example HTML 4.01 Document with Highlighted Text” in this case.

Inside the <head> tag, we have a <style> tag, which defines a CSS rule for the .highlight class. This rule sets the background color to yellow, which will be applied to any elements with the highlight class.

Next, we have the <body> tag, which contains the visible content of the document.

Inside the <body> tag, we have an <h1> tag with the text “Welcome to my website!”.

After that, we have a <p> tag with the text “Here’s some text with a ” followed by a <span> tag with the class="highlight" attribute, which applies the yellow highlight effect to the text “highlighted phrase”. The <span> tag is closed with the </span> tag, followed by the rest of the sentence which is “in it.”.

Below that, we have another <p> tag with the text “Here’s some more text with another ” followed by another <span> tag with the style="background-color: yellow;" attribute that applies the same highlight effect to the text “highlighted phrase”. The <span> tag is closed with the </span> tag, followed by the rest of the sentence which is “in it.”.

Finally, we close the <body> and <html> tags to complete the document. When you open this HTML file in a web browser, you should see the two highlighted phrases on the page with a yellow background color.


 

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <mark> tag might look like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML 1.0 Document with Mark Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Here's some text with a <mark>highlighted phrase</mark> in it.</p>
<p>Here's some more text with another <mark>highlighted phrase</mark> in it.</p>
</body>
</html>

 

In this example, we start with the <?xml> declaration, which specifies that this is an XML document that uses the UTF-8 character encoding.

Next, we have the <!DOCTYPE> declaration, which specifies that this is an XHTML 1.0 Transitional document.

Inside the <!DOCTYPE> declaration, we have a system identifier that specifies the location of the DTD (Document Type Definition) for XHTML 1.0 Transitional.

Next, we have the <html> tag, which contains the visible content of the document.

Inside the <html> tag, we have the xmlns attribute, which specifies the XML namespace for XHTML.

Inside the <html> tag, we have the <head> tag, which contains metadata about the document such as the title, which is “Example XHTML 1.0 Document with Mark Tag” in this case.

Inside the <head> tag, we have the <title> tag, which sets the title of the document as it appears in the browser’s title bar.

Next, we have the <body> tag, which contains the visible content of the document.

Inside the <body> tag, we have an <h1> tag with the text “Welcome to my website!”.

After that, we have a <p> tag with the text “Here’s some text with a ” followed by the <mark> tag, which highlights the phrase “highlighted phrase”. The <mark> tag is closed with the </mark> tag, followed by the rest of the sentence which is “in it.”.

Below that, we have another <p> tag with the text “Here’s some more text with another ” followed by another <mark> tag that highlights the phrase “highlighted phrase” as well. The <mark> tag is closed with the </mark> tag, followed by the rest of the sentence which is “in it.”.

Finally, we close the <body> and <html> tags to complete the document. When you open this XHTML file in a web browser, you should see the two highlighted phrases on the page.


 

 

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <mark> tag might look like thing that displays the caption “Customer Information” above the grouped controls.

Yes, the <mark> tag is also supported in XHTML 1.0 Strict. Here is an example of an XHTML 1.0 Strict document that uses the <mark> tag:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML 1.0 Strict Document with Mark Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Here's some text with a <mark>highlighted phrase</mark> in it.</p>
<p>Here's some more text with another <mark>highlighted phrase</mark> in it.</p>
</body>
</html>

In this example, we start with the <?xml> declaration, which specifies that this is an XML document that uses the UTF-8 character encoding.

Next, we have the <!DOCTYPE> declaration, which specifies that this is an XHTML 1.0 Strict document.

Inside the <!DOCTYPE> declaration, we have a system identifier that specifies the location of the DTD (Document Type Definition) for XHTML 1.0 Strict.

Next, we have the <html> tag, which contains the visible content of the document.

Inside the <html> tag, we have the xmlns attribute, which specifies the XML namespace for XHTML.

Inside the <html> tag, we have the <head> tag, which contains metadata about the document such as the title, which is “Example XHTML 1.0 Strict Document with Mark Tag” in this case.

Inside the <head> tag, we have the <title> tag, which sets the title of the document as it appears in the browser’s title bar.

 


 

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <mark> tag might look like thi “Customer Information” above the grouped controls.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML 1.1 Document</title>
</head>
<body>
<p>This is an example paragraph of text. <mark>Some text within this paragraph is marked.</mark> The rest is not.</p>
</body>
</html>

 

In this example, the document starts with the usual XML declaration and DOCTYPE declaration for an XHTML document. The <html> element has a xmlns attribute that specifies the namespace for XHTML.

Inside the <body> element, there is a single <p> element that contains a sentence of text. The word “marked” in this sentence is wrapped in a <mark> element. This tag is used to highlight text in a way that’s similar to a highlighter pen on paper. When the document is rendered in a web browser, the marked text will be displayed with a distinctive background color.

Note that the <mark> tag is not available in older versions of HTML, such as HTML 4.01. However, it is supported in all modern web browsers.

 

 

About the author

Home4Cloud