HTML tags & CSS properties useful for setting type on the web.
Common HTML tags for formatting text
bold
italic
strikethrough
underline
anchor
link
superscript
subscript
Span tags can be used to add additional styling not otherwise associated with HTML, such as ...
span (text-transform)
span (letter-spacing)
span (background-color)
span (font-family)
You can combine things, too:
bold + text-transform
italic + letter-spacing
strikethrough + font-family
background-color + text-transform
Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut justo non velit mollis facilisis eu a odio. Bold. Phasellus ut velit non sapien cursus luctus sit amet superscript. Sed mi mauris, laoreet a semper sit amet, underline a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque quam orci, strikethrough, viverra sed sapien. Integer non neque span (background-color) a nibh laoreet maximus quis quis lorem. Donec rhoncus et sapien id finibus. Italic odio sit amet augue span (text-transform) sagittis ullamcorper. span (font-family). Suspendisse nec vulputate tortor, vel ornare subscript. Nulla suscipit quis est non condimentum. Phasellus commodo eget ex quis convallis. Maecenas span (letter-spacing) tincidunt bold + text-transform dictum eros, sit amet fringilla sapien dignissim a. Integer elementum facilisis felis. Nunc nec viverra lorem.
Blockquote. Praesent gravida a nunc a convallis. Pellentesque efficitur tellus in massa vehicula, in consequat lectus bibendum. Proin egestas leo at mauris facilisis, et fermentum sem semper. Maecenas hendrerit tincidunt ex—eu dictum lacus placerat et. Sed egestas sed magna ut rhoncus. Sed eu malesuada lorem. Phasellus eget nisl a mauris malesuada pellentesque. Proin commodo libero diam, sed viverra odio egestas id.
(Horizontal Rule)
Center aligned. Sed luctus placerat sem. In ac nunc hendrerit, maximus tellus lacinia, posuere mi. Vestibulum sit amet augue sed orci mollis egestas. Mauris ultrices ante ut nisi faucibus, tincidunt fringilla enim finibus. Quisque lorem neque, interdum sit amet felis a, elementum finibus ex. Aliquam mollis ac purus nec pulvinar. Nullam efficitur dui vitae lacinia blandit. Nam sit amet odio vel eros varius condimentum. Nulla facilisi.
Right aligned. Pellentesque scelerisque, ex non commodo mattis, diam nunc euismod ex, quis congue lacus felis at purus. Mauris fringilla urna eu massa dapibus, in rhoncus diam iaculis. Praesent sagittis, orci nec ullamcorper finibus, elit turpis consequat erat, sed facilisis sapien eros eu ipsum. Maecenas ipsum felis, ornare non convallis sed, rhoncus ac justo. Aliquam lobortis tortor mi, in dignissim orci vehicula non. Fusce luctus vitae lorem vel pulvinar. Cras vulputate cursus vehicula. Curabitur elit libero, aliquam vel libero eget, viverra congue urna. Aliquam ultrices a metus ut vehicula. Maecenas vitae eros nec ligula rutrum volutpat at quis mauris. Etiam egestas accumsan ligula, et convallis lorem lacinia vitae. Maecenas a ullamcorper augue.
Indented. Ut volutpat mi enim, ut tempor tellus bibendum at. Maecenas vehicula orci sed dignissim aliquet. Nulla facilisi. Nullam convallis imperdiet velit ut laoreet. Proin elementum, ligula a blandit commodo, urna felis ultricies odio, ut euismod libero massa id nibh. In a sapien ac sem suscipit feugiat. Vivamus nec odio lectus. Proin ac diam turpis. Nullam maximus tincidunt nisi, sed placerat neque semper non. Donec sed tincidunt nunc. Vivamus justo dolor, luctus finibus hendrerit nec, porttitor a erat. Aliquam ullamcorper at massa quis lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nunc metus ipsum, aliquam lacinia velit sed, fringilla aliquam arcu. Duis vel gravida est. Mauris mollis commodo sem. Nunc finibus mi nisl. Cras tincidunt massa sodales, consectetur lectus sit amet, eleifend quam. In finibus mauris at sapien auctor dapibus. Cras lectus dui, cursus scelerisque tellus sed, dictum facilisis quam. Cras elementum malesuada imperdiet. Cras efficitur non leo id efficitur. Duis dignissim augue sed lorem accumsan, a consequat metus imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque aliquet nulla ut odio aliquam euismod.
Sed id tincidunt massa, non tincidunt metus. Duis facilisis maximus tortor sagittis dictum. Maecenas dictum pulvinar urna, vel gravida augue. Suspendisse potenti. Quisque nec elit viverra, faucibus sapien ut, consequat lectus. Donec eu sapien interdum dolor ultricies dictum quis eget purus. Morbi fermentum lobortis pellentesque. Fusce porttitor lobortis nunc a consectetur. Proin ullamcorper dui ac justo porta, vitae imperdiet est laoreet.
In odio nisi, tempor vitae mollis vel, mattis tincidunt leo. Nullam faucibus vestibulum sem in dapibus. Suspendisse sollicitudin facilisis tellus pulvinar scelerisque. Nulla id diam nisi. Morbi dapibus lacus sed mi condimentum egestas. Donec ultrices urna vel dolor imperdiet, sit amet iaculis risus faucibus. Phasellus aliquet ipsum leo, eget dignissim enim consectetur dignissim. In eget massa quis enim venenatis sagittis.
Morbi porta, ipsum et aliquam bibendum, nulla felis egestas lorem, nec suscipit tellus nunc nec libero. Sed eget augue vel metus finibus malesuada. Vivamus pulvinar euismod urna, at interdum elit gravida sed. Pellentesque dictum tortor at elit faucibus fermentum. Duis mollis est vitae nibh consectetur, ac rhoncus sem pretium. In elementum gravida iaculis. Ut vulputate mollis felis at interdum.
Aliquam eu condimentum est. Nulla consequat, augue non sagittis tempus, ligula odio rutrum eros, consectetur finibus felis erat eu felis. Nulla lobortis tristique eros, at pellentesque velit lacinia non. ---------- >> You can also use the span tag as a purely structural element, to target text with JavaScript, or for inter-page linking within your HTML. << ---------- Pellentesque fringilla sollicitudin efficitur. Donec pretium molestie hendrerit. Phasellus turpis ex, varius id consectetur at, dapibus sit amet ligula. Quisque mauris lacus, aliquet id pellentesque non, ultricies ut dui. Maecenas dolor enim, lacinia eget justo eget, posuere molestie orci. Aliquam sit amet urna vitae metus ullamcorper suscipit in sit amet ex.