Elements & Semantics

With a basic understanding of HTML and CSS in hand it is time to dig a little deeper and see what actually assembles these two languages.

In order to start building web pages you need to learn a little about which HTML elements are used to display different types of content. You will also want to know how these different elements behave, to help ensure you achieve your desired outcome.

Headings

Headings are block level elements that come in six different rankings, h1 through h6, and are key identifiers for users reading a page. Headings help to quickly break up content and provide hierarchy. They are also used to help search engines index and determine the value of content on a page.

<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
Demo of above code

This is a Level 1 Heading

This is a Level 2 Heading

This is a Level 3 Heading

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.

<p>Lorem ipsum Ex irure aliquip nostrud sunt mollit laboris qui esse nostrud enim. Lorem ipsum Esse sunt non anim amet nulla esse aliquip exercitation adipisicing reprehenderit et do in irure consectetur officia nostrud quis do.</p>
<p>Lorem ipsum Nostrud aute dolore est pariatur magna reprehenderit reprehenderit aliqua est id. Lorem ipsum Aliqua cillum quis Excepteur amet ullamco quis sed quis in commodo pariatur.</p>
Demo of above code

Lorem ipsum Ex irure aliquip nostrud sunt mollit laboris qui esse nostrud enim. Lorem ipsum Esse sunt non anim amet nulla esse aliquip exercitation adipisicing reprehenderit et do in irure consectetur officia nostrud quis do.

Lorem ipsum Nostrud aute dolore est pariatur magna reprehenderit reprehenderit aliqua est id. Lorem ipsum Aliqua cillum quis Excepteur amet ullamco quis sed quis in commodo pariatur.

Bold Text with Strong

<strong>This is bold</strong>
Demo of above code
This is bold

Italicize Text with Emphasis

<em>This is a Italics</em>
Demo of above code
This is a Italics

Hyperlinks

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.

<a href="http://www.transpiresolutions.com"> Transpire Solutions Website Link</a>

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.

<a href="http://www.transpiresolutions.com" target="_blank"> Transpire Solutions Website Link</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.

<a href="mailto:contact@transpiresolutions.com"> Email Us</a>
Demo of above code
Email Us

comments powered by Disqus