The Head Tag

Head tags are used to describe the content of the page. The page title, metadata, and character encoding all go in the head tag. UTF-8 is the global standard now for head tags, which enables your page to handle any language now. You can also include author and content meta. Example meta is located at the top of this document.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph

Paragraphs always begin on a new line.

To place the Lorem Ipsum placeholder, type 'Lorem' and then press Tab

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quasi nam iusto, nihil, vitae maiores sequi rem, saepe possimus deserunt libero veniam voluptatum architecto quia in nulla? Ipsa, illum accusantium.

To intentionally create a new line, use the in-line break tag

A 'horizontal' can be placed using hr.

Here is a strong tag Lorem.

Here is an emphasis tag. Lorem

Here is a small tag

The mark tag is used to highlight text

To indicate a strike-thruugh, used the delete tag

To underline, use the ins tag

We use _sub for subscripts

And we use ^sup for superscripts

the span element is an in-line element and only takes up the necessary width.

Lists

• Unordered lists are used
• when the order of the contents
• doesn't matter

1. Ordered lists are used
2. when the order of the contents
3. DOES matter

Description lists

are a list of terms with a description for each term

Ice Cream

A soft, sweet frozen food

Coffee

Is a hot beverage

HTML Attributes

This img attrbute is used to import images. The format is img src=""

You can define the width and height for the images

alt tags are used to describe the image for times when the image isn't displayed and/or for screen readers. The image has been left out of the file in this example in order to demonstrate the Alt tag.

The anchor tag is used to create hyperlinks to other pages

You can also link to other files within the same folder

For example, this link goes to the contact.html file and is embedded within the text of this paragraph.

Using the target tag can tell the link where to load. The most common is the target="_blank", which tells the link to load in a new page. The Contact link above opens in a new page using the target attribute.

Here's how you list rows and columns using the Table tag.

You use thead for the table header, tbody for the table body, tr for table row. Table rows can have as many columns as you'd like. To specify the Heading for the column, you use the th tag. To specify data that goes in the table rows, you use the td tag for table data

Forms

Forms are used to collect data. Users typically enter data which is sent to a web server for processing and storage. Every for begins with a Form tag. Use the label element to display an input label. Use the input tag to accept an input. Input tags are self closing. The example below uses the 'text' type of input. A good practice for forms is to tie the label to the input using id and for tags. Below, we give the input an id of username and give the label a for tag of username. When you click on the label for the element, it will focus the cursor on the input for the element. I've added some break tags for spacing

Semantic HTML

When grouping elements or content in a webpage, it is possible to use div and span tags. However, these tags tell nothing about their content. A semantic element clearly describes their meaning in a human and machine-reable way. Semantic HTML suggests to the developer the type of data that will be populated. Semantic HTMl helps search engines to influence page search rankings. Screen readers can also use them asa signpost to help visually impaired users navigate pages.

There are roughly 100 semantic elements in HTML 5.
Here are some of the more popular types.