New HTML5 ‘mark’ and ‘summary’ Tags

HTML5 mark tag

I just learned that there is a new HTML5 tag that allows you to highlight text and do some cool stuff with it. It’s the ‘mark’ tag and you can make it any color you want and even round the corners! Of course this only works in certain browsers that support it. I’ve tried it in Chrome, Firefox 5, IE9. It doesn’t work in IE8 or 7. This is pretty cool and adds some neat design options. There is also another tag called the ‘summary’ tag. The summary tag allows you to show/hide content like you normally would do with jQuery! Check it out. Click the ‘Information’ text below:

Information

If your browser supports this element, it should allow you to expand and collapse these details.

 

Here’s the code I used for mark in the previous paragraph:


mark {
background-color:red;
color:white;
border-radius:5px;
padding:3px;
}

And for summary:

<details open=”open”>
<summary>Information</summary>
<p>If your browser supports this element, it should allow    you to expand and collapse these details.</p>
</details>

Leave a Reply

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