Table of Contents
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.
Headings
h1
,h2
,h3
,h4
,h5
, andh6
tags are all used to define headings in HTML documents.Header 1
tags are more important thanHeader 2
tags, andHeader 2
tags are more important thanHeader 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:
- New York City
- London
- Singapore
- Hong Kong
- Paris
- Tokyo
- Zürich
- Washington, D.C.
- Chicago
- Boston
You can also nest ordered lists, for example in the following business planning steps:
- Talk to client
- Get a feel for rapport
- Talk about project scope
- Write down notes after chat
- Send proposal to client
- Make sure to spell all names correctly
- Check proposal amount for errors
- Sign off and send to client
- Kick off project with client
- Let client know what to expect
- Begin work on first phase of project
- 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:
- Ordered List Item One
- Unordered Sub-List Item
- Unordered Sub-List Item
- Ordered List Item Two
- Ordered Sub-List Item
- Ordered Sub-List Item
Here’s a final example showing what you can do with ordered and unordered lists:
- Unordered List Item One
- Ordered Sub-List Item
- 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-7149The 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 thePanel
constructor (the constructorPanel
is wrapped in opening and closingtags.
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
...
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:
strikethroughAnd 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