Table of Contents

  1. Paragraphs
  2. Quotes
  3. Headings
  4. Tables
  5. Lists
  6. Addresses
  7. Code
  8. Special Characters
  9. Miscellaneous

Paragraphs

Welcome to the Corporate “Common Page Elements” document. Here you will find the most common HTML elements used throughout your website with recommendations and instructions for making the most out of them. What you are reading now is text wrapped inside of a paragraph element, or a

tag for short.

This will be the most common form of text that you use throughout your website, so reading this paragraph will give you a good idea about how default text looks inside of the Corporate WordPress Theme. The fonts being used in the theme are Playfair Display and Source Sans Pro, and they are being loaded by Google Fonts. Click here to see how paragraphs with different alignments are displayed.

Quotes

The

element represents content that is quoted from another source, for example:

Be careful to leave your sons well instructed rather than rich, for the hopes of the instructed are better than the wealth of the ignorant. —Epictetus

You will notice that the author source above doesn’t have any special styling; that’s because it’s treated as normal text within the blockquote. If you would like to add more meaning to your quoted text then take advantage of the tag, for example:

Be careful to leave your sons well instructed rather than rich, for the hopes of the instructed are better than the wealth of the ignorant. —Epictetus

Here’s how that would look in your WordPress text editor:


	

		Be careful to leave your sons well instructed rather than rich, for the hopes of the instructed are better than the wealth of the ignorant. —Epictetus

You can also simply italicize your source from within WordPress’ visual editor.

tinymce-quote

Headings

h1, h2, h3, h4, h5, and h6 tags are all used to define headings in HTML documents. Header 1 tags are more important than Header 2 tags, and Header 2 tags are more important than Header 3 tags. With WordPress’ visual editor you can easily create headings for your business website’s content.

Header 1: This is the most important heading, for example the title of your website or the title of a post or page.

Header 2: This heading is important, but less important than the most important heading, for example the description of your website, which you can set by going to Settings → General from within your WordPress Dashboard, or a new section within a post or page.

Header 3: This heading can be used as a sub-section of content that has been marked off with a Header 2. For example, you might have a section of content on your page with the heading Legal Services that you would like to break into sub-sections titled Business Law, Entertainment Law, and Intellectual Property Law.

Header 4: Header 4’s can be considered minor headings.

Header 5: Header 5’s can be considered minor sub-headings.

Header 6: This is the least important heading and you probably won’t find much use for it unless you have a large amount of information on your website that needs deep levels of organization.

Tables

Tables can be as simple or as powerful as you’d like them to be. Here’s a table showing all of the most common table elements combined:

Employee Ratings
First Name Last Name Score
Average 95
John Doe 93
Jane Doe 92
John Smith 97
Jane Smith 98

And here’s the code of the above table:


	Employee Ratings
	
		

			First Name
			Last Name
			Score
		

	
	
		

			Average
			95
		

	
	
		

			John
			Doe
			93
		

		

			Jane
			Doe
			92
		

		

			John
			Smith
			97
		

		

			Jane
			Smith
			98

Lists

There are three types of lists that are most prominent when writing page content: unordered lists, ordered lists, and description lists. Here are some examples of how they appear when using Corporate.

Unordered Lists

Unordered lists are useful for information that has no apparent hierarchy of importance, for example a shopping list or a list of services that your business provides to its customers:

  • Men’s Haircuts
  • Women’s Haircuts
  • Children’s Haircuts
  • Facials
  • Manicures
  • Pedicures
  • Spa Treatments
  • Massages

You can also make nested unordered lists:

  • Men’s Care
    • Haircuts
    • Beard Trimming
    • Bald Head Razor Shave
  • Women’s Care
    • Haircuts
    • Eyebrow Waxing
    • Manicures
  • Massage
    • Hot Stone Massage
    • Swedish Massage
    • Thai Massage

Making unordered lists within your posts and pages is easy. Simply click the bullet list button in your visual editor and start typing your list.

To create a nested list, click the increase indent button in your visual editor while typing your unordered list:

Ordered Lists

Use ordered lists for information that has ranking, for example the top ten global cities in the world to visit:

  1. New York City
  2. London
  3. Singapore
  4. Hong Kong
  5. Paris
  6. Tokyo
  7. Zürich
  8. Washington, D.C.
  9. Chicago
  10. Boston

You can also nest ordered lists, for example in the following business planning steps:

  1. Talk to client
    1. Get a feel for rapport
    2. Talk about project scope
    3. Write down notes after chat
  2. Send proposal to client
    1. Make sure to spell all names correctly
    2. Check proposal amount for errors
    3. Sign off and send to client
  3. Kick off project with client
    1. Let client know what to expect
    2. Begin work on first phase of project
    3. Eliminate distractions

As with unordered lists, making ordered lists is easy. Simply click the numbered list button in your visual editor and begin making your list:

Mixed Lists

Feel free to mix unordered and ordered lists and you wish:

  1. Ordered List Item One
    • Unordered Sub-List Item
    • Unordered Sub-List Item
  2. Ordered List Item Two
    1. Ordered Sub-List Item
    2. Ordered Sub-List Item

Here’s a final example showing what you can do with ordered and unordered lists:

  • Unordered List Item One
    1. Ordered Sub-List Item
    2. Ordered Sub-List Item
  • Unordered List Item Two
    • Unordered Sub-List Item
    • Unordered Sub-List Item

Definition Lists

There’s no easy way to add definition lists into your page without clicking over to the text tab in the WordPress post editor, but these less than popular (but very useful) page elements may end up being used by your company for fresh content or content that has been imported into WordPress from another system. Let’s take a look at how definition lists appear in the Corporate theme:

Firefox
A free web browser created by a global non-profit dedicated to putting individuals in control online.
Chrome
Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.
Safari
Safari in OS X Mavericks brings you all-new ways to find and enjoy the best of the web.
Opera
Get faster, cheaper internet with the latest browsers for phones, tablets and computers from Opera.
Internet Explorer
Internet Explorer is the browser built for touch, now with larger tabs, simpler controls, and fluid response to gestures.

Definition lists are a wonderful way to semantically display terms and descriptions; give them a try by utilizing the

,

, and

tags.


	

		Firefox
	

	
A free web browser created by a global non-profit dedicated to putting individuals in control online.

Addresses

The address element comes in handy when you’d like to include contact information about your business into your web page.

We Cobble, LLC
4023 Kennett Pike #50098
Wilmington, Delaware 19807
Phone: +1-646-481-7149

The code for the above block is as follows:


	We Cobble, LLC
	4023 Kennett Pike #50098 
	Wilmington, Delaware 19807
	Phone: +1-646-481-7149

Do keep in mind that the address element should only be used for your business’ contact information. If you would like to reference the contact information of other businesses or include arbitrary contact information in one of your posts or pages, then simply use normal paragraph text.

Code

For the software engineers and other IT professionals who use this theme to display code, here’s how the and 

 elements are handled:

This is the Panel constructor (the constructor Panel is wrapped in opening and closing  tags):

function Panel(element, canClose, closeHandler) {
	this.element = element;
	this.canClose = canClose;
	this.closeHandler = function () { if (closeHandler) closeHandler() };
}


What you see directly above this line is a fragment of computer code that's wrapped in opening and closing 


 ... 


 tags.




Special Characters


From within WordPress' visual editor you can easily add special characters into your page content:




You'll find those characters by clicking the Omega button.






Misc.


We hope that the above guide will prove to be beneficial to you as you plan to create new website content for your business.


Here are several final common text styles that you will use: bold text; click the B button from within the visual editor to turn your text bold; italic text; click the I button from within the visual editor to italicize your text.


 


If you've made a mistake that you would like to redact, take advantage of the strikethrough button in your visual editor. Hopefully you won't have to use this button too much on your business blog. Likewise, if you'd like to indicate that you've added text into a blog post or page, then you could wrap it inside of opening and closing insert tags. For example, like how we've done it here—this text was added after the page was published.


Here's what the code for strikethroughs looks like:


strikethrough


And here's what the code for inserts looks like:


For example, like how we've done it here—this text was added after the page was published.


Finally, here's a look at how this theme handles superscripts and subscripts: everyone knows the famous formula E=mc2; most people are also very familiar with the chemical formula for water, H2O.


Here's the code we use to take advantage of these tags:


Superscripts: E=mc2
Subscripts: H2O