We always remember to styling different components of our themes. But forget to style the content area of the website. Because content is produced dynamically by the user and when users use different kinds of text formatting tags in the content area, the style of the content area looks different from our theme style. In this post I will list out some important text formatting tags used by users in the main content of the website. So that you can style them and make them look part of the web design.
List of important typography tags are:
Heading Tags
The <h1> to <h6> tags are used to define headings. <h1> indicates most important heading and <h6> indicates least important headings.
Heading tags are differentiated by their font-size;
Hyperlink Tag
The <a> tag is used to link one page to another. It is differentiated by three different states: unvisited, visited and active.
Underline Tag
Underline tag is used to underline text. Its basically used to underline misspelled words. The text-decoration CSS property is set to underline by default.
In CSS3 text-decoration is shorthand property for text-decoration-line, text-decoration-style and text-decoration-color CSS properties. This properties in CSS3 allow us to style the underlined text. In lesser CSS versions it is not possible to style the underline.
Mark Tag
The mark tag is used to highlight text. Text is highlighted by making the default background-color of mark tag as yellow. You can style it by just changing the background-color of the tag.
Lists Tag
<ol> and <ul> are used to create ordered and unordered lists respectively. <li> is used to create list items. Lists can be styled using list-style CSS property.
Bold Tag
<b> tag is used to represent text in bold. It has font-weight set to bold by default. It can be styled using any typography CSS properties matching your theme.
Quote Tag
Quote tag is used to display a short quotation. Browsers insert quotation marks around the text using the ::before and ::after selectors content attribute set to close-quote.
It can be styled by styling using the ::before and ::after selectors.
Just for note, it has cite attribute to provide the source URL of the quote.
BlockQuote Tag
Blockquote is used a large quote. Browser usually indent block quotes by changing their margin-left and margin-right values.
Just for note, it has cite attribute to provide the source URL of the quote.
Cite Tag
<cite> is used to display title of some work(book name, song name, movie name etc). Its not used to display person name rather used to display the title of the work.
Browsers style this tag by making its font-style to italic.
Refer this article for details information on usage of quote, blockquote and cite tags.
Small Tag
<small> tag is used to display text in smaller size. Browsers set the font-size property of this tag to smaller.
We can resize the font-size of this tag relative to our theme to make it look better.
Address Tag
<address> tag is used to display address. Address text is display by making the font-style css property as italic.
Time Tag
<time> tag is used to display time. It doesn’t have any special CSS style attached to it by default, it inherits everything from its parent. But you can style it to make it look better for your theme.
Details and Summary Tags
<details> tag is used to specify additional details that the user can view or hide on demand. The content of a details element should not be visible unless the open attribute is set.
The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.
It doesn’t have any default CSS text formatting styling set therefore inherit everything from their parent.
Sup and Sub Tags
<sup> and <sub> is used to display superscript and subscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font.
<sup> has its vertical-align set to sub and font-size set to small by default. Similarly <sub> has its vertical-align set to sup and font-size set to smaller.
Strong Tag
<strong> is used to define important text. Browsers display the text by making font-weight as bold.
<strong> and <b> display the text in same style but difference is how they are used. <b> is used to style text in bold format and <strong> is used to emphasize the importance of the text. Due to their misuse, search engines give same SEO impact on both.
You can style strong tag such a way that the important text is displayed in a different way.
Delete Tag
<delete> tag is used to define text that has been deleted from the document. It has text-decoration property set to line-through.
Em tag
<em> tag is used to display emphasized or important text. Displayed by making the font-style as italic by default. Similarly we use the <dfn> to define a definition term.
People read emphasized text in a different tone, so this makes it different from <strong> tag. Its used to stress upon a text.
Difference between <em> and <i> tags is that <em> is used to display emphasized text whereas <i> is used for styling text. Due to their misuse, search engines give same SEO impact on both.
More difference here.
Description List Tag
<dl> tag is used to define a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).
<dl> and <dt> have no special text formatting set to it by default but <dd> has margin-left set by default.
Ins Tag
<ins> is used to display inserted text. The <ins> tags means content inserted after it was first published. The <u> tag is simply for underlining(styling) and has no meaning.
<ins> tag has text-decoration set to underline by default.
Abbreviation tag
<abbr> tag is used to display abbreviation(WWW, WHO, NATO etc). Its has no special text styling by default.
Bi-Driectional Tag
<bdo> is used display text in left-right or right-left direction. Its has no special text styling by default.
<code>, <samp>, <kbd>, <var> and <pre> are used to display programs and outputs in webpage.
<pre> has its white-space CSS property set to pre and font-family set to monospace. It also preserves line breaks.
<code> has its font-family CSS property set to monospace.
<samp> has its font-family set to monospace.
<kbd> has its font-family set to monospace.
<var> has its font-style set to italic.
pre is used to display text by preserving white space and line breaks. Code is used to display a piece of computer code. samp tag is used to display output of the program. kbd is used to display keyboard inputs. var tag is used to display variables.
Final Thoughts
Make sure these tags serve their native purpose while styling them. Make sure you provide awesome typography CSS properties values to the complete content area to make the typography look great. Thanks for reading this post.
@narayanprusty
