{"id":8,"date":"2017-01-11T10:19:37","date_gmt":"2017-01-11T10:19:37","guid":{"rendered":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/?page_id=8"},"modified":"2018-04-07T21:06:14","modified_gmt":"2018-04-07T21:06:14","slug":"typography","status":"publish","type":"page","link":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"<table>\n<thead>\n<tr>\n<th>Table Head Column One<\/th>\n<th>Table Head Column Two<\/th>\n<th>Table Head Column Three<\/th>\n<\/tr>\n<\/thead>\n<tfoot>\n<tr>\n<td>Table Footer Column One<\/td>\n<td>Table Footer Column Two<\/td>\n<td>Table Footer Column Three<\/td>\n<\/tr>\n<\/tfoot>\n<tbody>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Short Text<\/td>\n<td>Testing a table cell with a longer amount of text to see what happens, you&#8217;re not using tables for site layouts are you?<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<tr>\n<td>Table Row Column One<\/td>\n<td>Table Row Column Two<\/td>\n<td>Table Row Column Three<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ol>\n<li>Ordered list item one.<\/li>\n<li>Ordered list item two.<\/li>\n<li>Ordered list item three.<\/li>\n<li>Ordered list item four.<\/li>\n<li>By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ol>\n<ul>\n<li>Unordered list item one.<\/li>\n<li>Unordered list item two.<\/li>\n<li>Unordered list item three.<\/li>\n<li>Unordered list item four.<\/li>\n<li>By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ul>\n<blockquote><p>Currently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they&#8217;ll be more semantic (and easier to style) like the version below.<\/p><\/blockquote>\n<blockquote cite=\"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/\"><p>HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.<\/p>\n<footer><cite><br \/>\n<a href=\"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/\">John Doe, htmlpie<\/a><br \/>\n<\/cite><\/footer>\n<\/blockquote>\n<h1>Level One Heading<\/h1>\n<h2>Level Two Heading<\/h2>\n<h3>Level Three Heading<\/h3>\n<h4>Level Four Heading<\/h4>\n<h5>Level Five Heading<\/h5>\n<h6>Level Six Heading<\/h6>\n<p>This is a standard paragraph created using the WordPress TinyMCE text editor. It has a <strong>strong tag<\/strong>, an <em>em tag<\/em> and a <del>strikethrough<\/del> which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include <cite>citations<\/cite>, <abbr title=\"abbreviation\">abbr<\/abbr>, bits of <code>code<\/code> and <var>variables<\/var>, <q>inline quotations<\/q>, <ins datetime=\"2011-12-08T20:19:53+00:00\">inserted text<\/ins>, text that is <s>no longer accurate<\/s> or something <mark>so important<\/mark> you might want to mark it. We can also style subscript and superscript characters like C0<sub>2<\/sub>, here is our 2<sup>nd<\/sup> example. If they are feeling non-semantic they might even use <b>bold<\/b>, <i>italic<\/i>, <big>big<\/big> or <small>small<\/small> elements too.\u00a0Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this <a title=\"HTML5 Semantics\" href=\"http:\/\/csswizardry.com\/2011\/01\/html5-and-text-level-semantics\">article by Harry Roberts<\/a> which gives a nice excuse to test a link.\u00a0\u00a0It is also worth noting in the &#8220;kitchen sink&#8221; view you can also add <span style=\"text-decoration: underline;\">underline<\/span>\u00a0styling and set <span style=\"color: #ff0000;\">text color<\/span> with pesky inline CSS.<\/p>\n<p style=\"text-align: left;\">Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"text-align: right;\">This is a right aligned paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"text-align: justify;\">This is a justified paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p style=\"padding-left: 30px;\">Finally, you also have the option of an indented paragraph.\u00a0Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.<\/p>\n<p>And last, and by no means least, users can also apply the <code>Address<\/code> tag to text like this:<\/p>\n<address>123 Example Street,<br \/>\nTestville,<br \/>\nWest Madeupsburg,<br \/>\nCSSland,<br \/>\n1234<\/address>\n<p>&#8230;so there you have it, all our text elements<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table Head Column One Table Head Column Two Table Head Column Three Table Footer Column One Table Footer Column Two Table Footer Column Three Table Row Column One Short Text Testing a table cell with a longer amount of text to see what happens, you&#8217;re not using tables for site layouts are you? Table Row &hellip;<br \/><a href=\"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/typography\/\" class=\"more-link pen_button\">Continue reading <span class=\"screen-reader-text\">Typography<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/pages\/8"}],"collection":[{"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":3,"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/pages\/8\/revisions\/752"}],"wp:attachment":[{"href":"https:\/\/www.htmlpie.com\/preview\/pen-multipurpose-wordpress-theme\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}