HTML Symbol Codes

A Selection Of Some HTML Symbols

Below is an extensive list of the character codes for use in your HTML. Some characters are reserved in HTML. Reserved characters in HTML must be replaced with character entities, for example if you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. Characters, not present on your keyboard, can also be replaced by entities.

Find the symbol or charcter code you need in the table below

Description	Entity Name	Hex Code	Symbol
Latin small f with hook = function	ƒ	ƒ	ƒ
Greek capital letter alpha	Α	Α	Α
Greek capital letter beta	Β	Β	Β
Greek capital letter gamma	Γ	Γ	Γ
Greek capital letter delta	Δ	Δ	Δ
Greek capital letter epsilon	Ε	Ε	Ε
Greek capital letter zeta	Ζ	Ζ	Ζ
Greek capital letter eta	Η	Η	Η
Greek capital letter theta	Θ	Θ	Θ
Greek capital letter iota	Ι	Ι	Ι
Greek capital letter kappa	Κ	Κ	Κ
Greek capital letter lambda	Λ	Λ	Λ
Greek capital letter mu	Μ	Μ	Μ
Greek capital letter nu	Ν	Ν	Ν
Greek capital letter xi	Ξ	Ξ	Ξ
Greek capital letter omicron	Ο	Ο	Ο
Greek capital letter pi	Π	Π	Π
Greek capital letter rho	Ρ	Ρ	Ρ
Greek capital letter sigma	Σ	Σ	Σ
Greek capital letter tau	Τ	Τ	Τ
Greek capital letter upsilon	Υ	Υ	Υ
Greek capital letter phi	Φ	Φ	Φ
Greek capital letter chi	Χ	Χ	Χ
Greek capital letter psi	Ψ	Ψ	Ψ
Greek capital letter omega	Ω	Ω	Ω
Greek small letter alpha	α	α	α
Greek small letter beta	β	β	β
Greek small letter gamma	γ	γ	γ
Greek small letter delta	δ	δ	δ
Greek small letter epsilon	ε	ε	ε
Greek small letter zeta	ζ	ζ	ζ
Greek small letter eta	η	η	η
Greek small letter theta	θ	θ	θ
Greek small letter iota	ι	ι	ι
Greek small letter kappa	κ	κ	κ
Greek small letter lambda	λ	λ	λ
Greek small letter mu	μ	μ	μ
Greek small letter nu	ν	ν	ν
Greek small letter xi	ξ	ξ	ξ
Greek small letter omicron	ο	ο	ο
Greek small letter pi	π	π	π
Greek small letter rho	ρ	ρ	ρ
Greek small letter final sigma	ς	ς	ς
Greek small letter sigma	σ	σ	σ
Greek small letter tau	τ	τ	τ
Greek small letter upsilon	υ	υ	υ
Greek small letter phi	φ	φ	φ
Greek small letter chi	χ	χ	χ
Greek small letter psi	ψ	ψ	ψ
Greek small letter omega	ω	ω	ω
Greek small letter theta symbol	ϑ	ϑ	ϑ
Greek upsilon with hook symbol	ϒ	ϒ	ϒ
Greek pi symbol	ϖ	ϖ	ϖ
bullet = black small circle	•	•	•
horizontal ellipsis = three dot leader	…	…	…
prime = minutes = feet	′	′	′
double prime = seconds = inches	″	″	″
overline = spacing overscore	‾	‾	‾
fraction slash	⁄	⁄	⁄
blackletter capital I = imaginary part	ℑ	ℑ	ℑ
blackletter capital R = real part symbol	ℜ	ℜ	ℜ
trade mark sign	™	™	™
alef symbol = first transfinite cardinal	ℵ	ℵ	ℵ
leftwards arrow	←	←	←
upwards arrow	↑	↑	↑
rightwards arrow	→	→	→
downwards arrow	↓	↓	↓
left right arrow	↔	↔	↔
downwards arrow with corner leftwards = carriage return	↵	↵	↵
leftwards double arrow	⇐	⇐	⇐
upwards double arrow	⇑	⇑	⇑
rightwards double arrow	⇒	⇒	⇒
downwards double arrow	⇓	⇓	⇓
left right double arrow	⇔	⇔	⇔
for all	∀	∀	∀
partial differential	∂	∂	∂
there exists	∃	∃	∃
empty set = null set = diameter	∅	∅	∅
nabla = backward difference	∇	∇	∇
element of	∈	∈	∈
not an element of	∉	∉	∉
contains as member	∋	∋	∋
n-ary product = product sign	∏	∏	∏
n-ary sumation	∑	∑	∑
minus sign	−	−	−
asterisk operator	∗	∗	∗
square root = radical sign	√	√	√
proportional to	∝	∝	∝
infinity	∞	∞	∞
angle	∠	∠	∠
logical and = wedge	∧	∧	∧
logical or = vee	∨	∨	∨
intersection = cap	∩	∩	∩
union = cup	∪	∪	∪
integral	∫	∫	∫
therefore	∴	∴	∴
tilde operator = varies with = similar to	∼	∼	∼
approximately equal to	≅	≅	≅
almost equal to = asymptotic to	≈	≈	≈
not equal to	≠	≠	≠
identical to	≡	≡	≡
less-than or equal to	≤	≤	≤
greater-than or equal to	≥	≥	≥
subset of	⊂	⊂	⊂
superset of	⊃	⊃	⊃
not a subset of	⊄	⊄	⊄
subset of or equal to	⊆	⊆	⊆
superset of or equal to	⊇	⊇	⊇
circled plus = direct sum	⊕	⊕	⊕
circled times = vector product	⊗	⊗	⊗
up tack = orthogonal to = perpendicular	⊥	⊥	⊥
dot operator	⋅	⋅	⋅
left ceiling = APL upstile	⌈	⌈	⌈
right ceiling	⌉	⌉	⌉
left floor = APL downstile	⌊	⌊	⌊
right floor	⌋	⌋	⌋
left-pointing angle bracket = bra	⟨	〈	〈
right-pointing angle bracket = ket	⟩	〉	〉
lozenge	◊	◊	◊
black spade suit	♠	♠	♠
black club suit = shamrock	♣	♣	♣
black heart suit = valentine	♥	♥	♥
black diamond suit	♦	♦	♦

More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.

HTML and CSS only Drop Down Menu

Ok, let's keep this simple, that what you want after all isn't it!

The Look...

simple drop down menu

The Menu In Action...

• Home
• About
• Services ▼
  • Web Design
  • Graphic Design
  • App Design
• News
• Contact

And now the code...

The HTML...

Copy and paste the code below into your webpage. Edit the Text and links to suit your site.

<div class="navbar"> <ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li> <a href="#">Services ▼ </a> <ul><li><a href="#">Web Design</a></li><li><a href="#">Graphic Design</a></li><li><a href="#">App Design</a></li></ul></li><li><a href="#">News</a></li><li><a href="#">Contact Us</a></li></ul></div>
The down arrow is achieved using the symbol code "& # x 2 5 B C" (without the spaces)

The CSS...

Copy and paste the code below into your CSS stylesheet. Edit the colours and padding to suit your site.

.navbar ul {
  text-align: left;
  display: inline;
  margin: 0px ;
  padding: 15px 4px 17px 0px ;
  list-style: none ;
}

.navbar ul li {
  font: bold 16px sans-serif;
  color:#fff;
  display: inline-block;
  margin-right: -3px;
  position: relative ;
  padding: 15px 20px ;
  background: #0099CC ;
}

.navbar ul li:hover {
  background: #555;
  color: #fff;
}

.navbar ul li ul {
  padding: 0 ;
  position: absolute;
  top: 43px;
  left: 0 ;
  width: 180px ;
  display: none ;
  opacity: 0 ;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s ;
  -moz-transition: opacity 0.2s ;
  -ms-transition: opacity 0.2s ;
  -o-transition: opacity 0.2s ;
  -transition: opacity 0.2s ;
}

.navbar ul li ul li { 
  background: #555 ; 
  display: block; 
  color: #fff ;
  text-shadow: 0 -1px 0 #000;
}

.navbar ul li ul li:hover { background: #666; }

.navbar ul li:hover ul {
  display: block ;
  opacity: 1 ;
  visibility: visible;
}

More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.

Learn A New Skill For The New Year!

Giving things up for new year is a common practice but also a very difficult one that most people break after just a few weeks. So in 2015 make your resolution be to learn something new, to up-skill, to re-skill; here's a few good reasons why ...

• A new skill to put you ahead of other job candidates
• A new skill for a change in career, 
• A new skill to enhance your studies 
• Or just a new skill for fun! 

But what skill should I choose? Well, design skills are one of the most adaptable and sought after skills around as they show you to be creative and innovative but also logical and organised. So here are the top 5 design areas for you to up-skill in...

Web Design:

More and more business is being done online everyday and because of this every business from your local coffee shop to the multinational corporations has a website. This means there is a growing demand for web designers to create, update, moderate and redesign all these websites. To get in on the action, you will need to learn HTML5, CSS3 and at least a little JavaScript. These programming skills will be further enhanced with knowledge of SEO (Search Engine Optimisation) and design skills like the ability to use Photoshop. Using the web design process is also an essential skill that is unfortunately overlooked by many web developers who call themselves "designers".

Graphic Design:

Sample Poster

A lot of people group the ability the use Photoshop and being a graphic design together as if they were the same thing... they are not! Photoshop is a great software and the Adobe Creative Suite of which it is part is certainly the industry standard for graphic designers but there is a lot more to graphic design that using software, after all, graphic design still existed before computers! Back then, just like for modern graphic designers, the graphic design process, an understanding of colour theory, typography and composition were all keys skills. Some more modern techniques such as the use of attention grabbing techniques in your imagery and the use of the most powerful words in your typography will further enhance your skill base.

Games Design:

Games design with Unreal Engine

The games design process can be completed by just one person but that person would need to be highly skilled in many different areas of the design process and production stages and have a lot of time on their hands! For these reasons computer games, much like anything else, are designed and built by a team of people each with their own specific set of relevant skills. See which role would interest you most or dabble in a little bit of each before focussing on one area to learn. Start your journey here.

Interior Design:

An example of the Urban Interior design style

 Interior design is another misunderstood craft with numerous people claiming to be interior designers simply because they have "an eye for it". The interior design process, when done properly, is a complex task which requires multiple skills and the knowledge of key areas such as interior design styles, colour theory, room layout techniques and an awareness of a multitude of materials and finishes for walls, floors and furniture. Perspective drawing skills and the ability to create presentation boards for potential clients are also valuable skills for any professional interior designer.

Furniture Design:

The most practical and hands on of our top 5 skills for the new year is furniture design. Like all the others understanding the process is key and the furniture design process should be your starting point. After that a look into furniture design history will give you an understanding of traditional and contemporary furniture styles. An awareness of the available and industry standard furniture materials is also a must which will be complemented by a knowledge of the different furniture joinery techniques when you go to build your design prototypes.