Submitted by Ryan Johnson, technology training coordinator

Learning HTML is essential if you work on a type of website development at Penn State, whether you are using Drupal for the Libraries website or using WordPress at Sites at Penn State. Below are some basic commands to get you started and if you want to learn more, try Lynda.com’s HTML Essential Training Tutorial

Text Formatting
Paragraphs
The paragraph element is perhaps the most common element found on the web today. This element fits under the loosely-defined category of “structural markup” and is a block-level element.

<p>Your paragraph here.</p>

Headings
Like paragraphs elements, heading elements are block-level elements that will help us convert some of our text into structure for our document. However, unlike paragraphs, there are different kinds of headings, or more specifically, different levels of headings.

<h1>Your page/site title here</h1>
<h2>Your main sections here</h2>
<h3> Your sub-sections here</h3>

Bold Text
This makes the weight of your font bold.
<b>Your bold text.</b>

Italic Text
This makes your text italicized.
<i>Your italic text.</i>

Underlined Text
Underlines your text.
<u>Your underlined text. </u>

Strike-through
Places a line through your text to strike it out.
<s>Your crossed out text here.</s>

Lists
Lists create structural blocks, much like headings and paragraphs, but the syntax for creating lists is slightly more complicated. Not only do we have to specify the boundaries of the entire lists, but we also have to identify individual items in the list. There are two common types of lists: ordered lists (numbers, letters, etc.) and unordered lists (bullets).

<ol>

<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>

</ol>

<ul>

<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>

Attributes
Attributes do not supply any additional content to an element, but instead, they modify the markup itself. Attributes are inserted directly into the opening tag, but do not appear in any form in the closing tag. The attribute name is always followed by an equal sign, and then the value of the attribute in the double quotes.

This is an example: <tag attr=”value” attr2=”value2″>Content</tag>

Aligning Elements
You can align your headings and paragraphs using an attribute of in-line CSS.

<h1 style=”text-align:center;”>Your aligned heading</h1>

<h1 style=”text-align:left;”>Your aligned heading</h1>

<h1 style=”text-align:right;”>Your aligned heading</h1>

<h1 style=”text-align:justified;”>Your aligned heading</h1>

Hyperlinks
You can create hyperlinks that allow you to jump from one web page to another by using the anchor element and attaching the hypertext reference attribute.
<a href=”http://yourlink.com”>Your text here.</a>

Empty Elements
Most elements must have an opening tag and a closing tag, which surround the content they are modifying. However, there are some elements that are not permitted to have content. This is an example:
<empty />

Line Breaks
This is like hitting the enter key–it puts your content on a new line.
<br />

Images
To include an image on your webpage you will need to have the image uploaded somewhere online. Then, simply use the link to reference the image with the src attribute and the alt attribute to describe your image for screen readers and search engines.
<img src=”http://yourimageline.com” alt=”describe this image” />