Wednesday 21 August 2013

Elements & Semantics - Part 2

Paragraphs

Headings are often followed with supporting paragraphs. Paragraphs are defined by using the p block level element. Numerous paragraphs can appear one after the other, adding information to a page.
  1. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  2. <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>

Paragraphs Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Bold Text with Strong

To make text bold, and to note it as important, the strong inline level element is used. It is important to understand thesemantic difference between strong and b, both of which will make text bold. strong is semantically used to denote text with a strong importance, as is mostly the case when wanting to bold text. b on the other hand semantically meansstylistically offset, which isn’t always the best case for text deserving prominent attention. Gauge the significance of the text you are looking to set as bold and choose an element accordingly.
  1. <p>Duis in <strong>voluptate</strong> velit esse cillum.</p>

Bold Text Demo

Duis in voluptate velit esse cillum.

Italicize Text with Emphasis

To italicize text and place a stressed emphasis on it the em inline level element is used. As with strong, there are two different tags used to italicize text, each with a slightly different semantic meaning. em semantically means to place astressed emphasis on text and thus is the most popular option for italicizing text. The other option is i, which semantically values text to be rendered in an alternate voice. Again, you will need to gauge the significance of the text you want to italicize and choose an element accordingly.
  1. <p>Quae ars <em>putanda</em> est, expeteretur si nih.</p>

Italicize Text Demo

Quae ars putanda est, expeteretur si nih.
One of the core elements of the internet is the hyperlink, established by using an anchor. Hyperlinks are defined using the a inline element however they require a source to direct the link. The href attribute, known as hyperlink reference, is used to set the destination of a link.
By nature the a element is an inline element, however with the introduction of HTML5, a elements now have the ability to wrap block or inline level elements. This is a break from the standard convention yet permissible to turn entire blocks of content on a page into a link.
  1. <a href="http://shayhowe.com">Shay</a>

Hyperlinks Demo

Relative & Absolute Paths

The two most common types of links include links to other pages within a website and links to other websites. How these links are identified is by their path, also known as the value of their href attribute.
Links pointing to other pages within the same website should have a relative path, in which the domain is not in thehref attribute value. Since the link is pointing to another page on the same website the href attribute value only needs to include the page being linked to, /about.html for example. Should the page being linked to reside within a subdirectory the href attribute value needs to reflect this as well. Say the about.html page resides within the pagesdirectory, the relative path would then be /pages/about.html.
Linking to other websites outside of the current one requires an absolute path, where the href attribute value must include the full domain. A link to Google would need the href attribute value of http://google.com, starting withhttp and including the domain, .com in this case.
  1. <!-- Relative Path -->
  2. <a href="/about.html">About</a>
  3. <!-- Absolute Path -->
  4. <a href="http://www.google.com/">Google</a>

Linking to an Email Address

Occasionally you will encounter a link to an email address. When clicked, this link opens the default email client and populates some information. At a minimum the email address where the message is being sent is populated, however other information such as a subject and body text may also be populated.
To create an email link the href attribute value needs to start with mailto: followed by the email address to where the email should be sent. To create an email link to shay@awesome.com the href attribute value would bemailto:shay@awesome.com.
Additionally, a subject and body text for the email can also be populated. To add a subject line include the subject=parameter following the email address. Multiple words within a subject line require spaces to be encoded using %20. Adding body text works very similar to that of the subject, using the body= parameter in the href attribute value. Again, spaces must be encoded using %20 and line breaks must be encoded using %0A.
Altogether, a link to shay@awesome.com with the subject of “Still Awesome” and body text of “This is awesome” would look like mailto:shay@awesome.com?subject=Still%20Awesome&body=This%20is%20awesome. Please notice, the first parameter requires a ? to bind it to the email address and additional parameters require a & to bind them the previous parameter.
For more information on building email links, including how to add multiple email addresses, cc, and bcc parameters, please see Joost de Valk guide, The Full mailto Link Syntax.
  1. <a href="mailto:shay@awesome.com?subject=Still%20Awesome&body=This%20is%20awesome">Email Me</a>

Email Link Demo

Opening Links in a New Window

One feature available with hyperlinks is the ability to determine where the link is opened once clicked. Typically links open in the same window from which they are clicked, however links may open in a new window. To trigger the action of opening a link in a new window the target attribute is used with a value of _blank. The target attribute determines where the link is displayed, and the _blank value specifies a new window.
  1. <a href="http://shayhowe.com/" target="_blank">Shay Howe</a>

Opening Links in a New Window Demo

Linking to Elements within the Same Page

Periodically you will see links that simply link to another portion of the same page. In the case of this guide, links found within the “In this Lesson” section link down the page to the appropriate section. Perhaps more commonly found online are “Back to Top” links that return users to the top of a page.
Creating an on page link is accomplished by specifying an ID on the element you wish to link to. Then, using the ID of that element in a links href attribute value. As an example, putting the main ID on the body element allows you to link to the top of a page using the href value of #main.
  1. <a href="#awesome">Awesome</a>
  2. <div id="awesome">Awesome Section</div>

On Page Links Demo

Awesome Section