Jan 04
Using HTML Symbol Entities
Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. For example, to display the less than sign (<), you need to enter < (entity name) or < (entity number). Among the entity list, there are quite a lot of symbol entities that we can use in layout design. For examples: → ♥ ♫ ✓ ✗ • ☞ ✁ ★ “ ⊕. Have you seen the snowman ☃ symbol before? If not, continue on this post to find more surprises.
The Advantages of Using Entities Rather Than Images
- It loads fast because it is text base.
- Scalable according to font size.
- Easy to change color and sizing.
Apostrophe & Quotation Marks
Most common typography mistakes found on the internet are probably the misuses of apostrophe and quotation marks. We often misuse the prime symbol ( ‘ ) as the apostrophe ( ’ ) and the double prime ( " ) as the quotation marks ( “ ” ).
To correct this, you can use the right single quote entity (’) as the apostrophe. Use the left double quote (“) and right double quote (”) for the quotation marks.
Arrows
I particularly find the arrow symbols useful because they can be used as direction arrows or breadcrumb separators.
Link Separators
My favorite entities for separating links are bullet • ( • ) and dot operator ⋅ ( ⋅ ).
Trademark, Copyright, Degree, and Currency
The other commonly used entities are probably the trademark, copyright, degree, and currency symbols.
Trademark ™ | © Copyright | Registered Trademark ®
Degree: 29° | 26 ℃ | 60 ℉
Currency: ¢ Cent | £ Pound | ¥ Yen | € Euro
Symbols For Web Design
Here some entities that you can perhaps use for design layout:
✉ ✍ ✎ ✓ ☑ ☒ ✗ ⊕ ⊗ ☞ ☜ ♫ ✄ ✁ ∞ ♨ ☢ ✈ ☰ ☷ ♥ ★ ☆ ☺ ☹
Miscellaneous Symbols
Here are some miscellaneous symbols that you will most likely never going to use (but they are cool):
♔ ♕ ♖ ♘ ♆ ✠ ♂ ♀ ♠ ♣ ♥ ♦ ☣ ☮ ☃ ☂ ☯ ☠
Rendering Issues
Note that Mac and Windows have different rendering system. The symbol entities will most likely appear different on different operating systems. Check before you use it.
Reference Links
- For a full list of entity reference, check Bigbaer.com - Character Entity Reference.
- W3Schools.com - Symbols Entities
- Webstandards.org - Symbol Entities
Billings App Giveaways Job Board 75% Coupon Code
Comments
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
There are 117 comments (+Add)
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
Loading ...
117 surda http://surda.cn
August 10th, 2010 at 9:47 am
cool.
116 rio http://rior06.student.ipb.ac.id
July 20th, 2010 at 2:12 am
great post, very informative, thanks
115 kai http://oki.maulana08.student.ipb.ac.id
July 19th, 2010 at 8:46 pm
so inspirative… thanks for info…
114 Arief http://ariefh08.student.ipb.ac.id
July 19th, 2010 at 2:02 am
I just now from you.. .thanks. your blog is very great
113 doris http://dorismanp06.student.ipb.ac.id
July 16th, 2010 at 1:57 pm
great post, very informative, thanks
112 Kojeje http://ekos06.student.ipb.ac.id
July 16th, 2010 at 8:30 am
Wow.. nice html
thanks for sharing
111 eric http://ericsons06.student.ipb.ac.id/
July 15th, 2010 at 6:01 am
wonderfull…
new inspiration for me..
110 eric http://ericsons06.student.ipb.ac.id/
July 14th, 2010 at 4:59 pm
thank you for share
109 ilham http://ilhama06.student.ipb.ac.id
July 13th, 2010 at 2:01 am
thank YOU
108 utari http://tric06.student.ipb.ac.id/
July 8th, 2010 at 11:51 am
great post, very informative, thanks