HTML Heart Code

This page contains HTML code for adding a "heart" symbol to your website or blog.

To display a heart within your text, you will need to use the HTML entity for displaying the heart. This is because the heart is a special character — there is no way of entering a "heart" into the keyboard. But not only this, you should use the HTML entity to ensure that your users see the heart in the same way that you intended.

HTML Entity Number

Here's how you use the HTML entity number to display a heart on a webpage.

HTML Entity Name

Here's how you use the HTML entity name to display a heart. The result is the same as when using the entity number above.

Usage Example

Here's an example of a heart within a sentence (using the <p> tag).

Adding Styles

You can add styles to your heart to make it stand out more. Styles can be added using Cascading Style Sheets (CSS).

In this example, we use the <span> tag to apply styles to the heart within the sentence.

Warning About Copy/Paste

Note that it can be tempting to "copy and paste" a heart from some other source (eg, a Word document) into your blog or website, but it's best to avoid doing this. You should always use one of the HTML entities on this page to ensure that the heart appears correctly for your users.

About HTML Entities

HTML entities are used in HTML when you need to display a special character on a web page. These are often characters or symbols that can't easily be typed into a keyboard.

Check out this list of special characters for a comprehensive list of HTML entities.