HTML 5: Intermediate

Span and Div

All the tags we saw thus far have clear, semantic meanings. <p> for paragraph, <h1> for main heading and <table> for constructing a data table.

However, the span and div tags don't have much of a meaning, and are simply used to section off content from one another.

So what's the difference?

<span> displays in-line

The <span> element get shown in-line, meaning whatever it wraps it will get displayed within the line.

A common in-line element you're familiar with already are the <em> tags. Text within the <em> tags are simply placed within its containing element.

<div> displays block

<div>, on the other hand, displays block, meaning it has a line break before and after it.

A common block-displaying element is the <p> tags or the <h1> tags, which break off a space before and after it.

So when we would ever use these tags?

We can use span and div tags with an id or class attribute. With these attributes set, we are able to target specific elements for styling with CSS.

Additionally, breaking off content into smaller chunks with a div class makes for better organization.

Images

To place an image on a page, use the <img> tag. The <img> tag has no closing tag.

Important Attributes of the img tag

src

Used to locate the source of the image.

width/height

Set the width and height of the image.

Note that specifying the width and height together may distort the photo.

If you'd like for the photo to scale, just use one of the two.

alt

Used to show an alternative desciption.

In case we want to display additional information for users who cannot see the image.

We can specify the image from a source on another server using an absolute link, or from our own using a relative link.

 <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="HTML 5 Logo" width="200px">

Or relative:

 <img src="/code/img/main-logo.svg" alt="Code Snippets Academy logo">

Sample image formats

There are several image formats, each with their advantages and disadvantages. It's important to understand the filesize and its quality, as a super-high resolution may take a lot longer to load on the page. If your users are impatient, they may navigate elsewhere!

JPEG

JPEG is a lossy compression format that compresses the original image. The upside to JPEGs are a smaller file size, but the drawback is that the image becomes not as clear.

GIF

GIFs contain no more than 256 colors, thus lowering the file size. We can have some pixels in the GIF to be transparent.

PNG

With a PNG, we can have 16 million colors, as well as alpha transparency. Very high resolution, so high file size.

The holy grail of them all: SVG

Scalable Vector Graphics (SVG) is an XML-based vector image format for 2d graphics. The great thing about these is no matter how large or small it gets, the image does not blur or lose quality.

Forms

Forms are used to handle user input, and allows the user to submit some information.

Forms are to be enclosed within a <form> tag, with an attribute "action", which points to the script that should be run when a form is submitted.

We don't yet have the tools to process the forms, but in later tutorials, we'll use a back-end server language to do so. :-)

Labels

Firstly, we need to make labels for our input fields, which we can with the <label> tag. We specify which form it's for with the "for" attribute, which is to match with the "id" in our <input> tag. Now when users click on the label, the focus is placed on the corresponding input.

Input Elements

HTML offers a variety of input elements that we can use to gather data from the user. We use the <input> element with a "type" attribute.

Additionally, we use the "name" attribute so that we can retrieve the input data once the form is handled. For a standard text box:

<input type="text" name="textbox">

Password box:

<input type="password" name="password">

Checkbox:

<input type="checkbox" checked>

Radio buttons:

<input type="radio">

After adding labels for each input field, your form should look somthing like this:

<form>
  <label for="firstName">First Name</label>
  <input type="text" name="firstName" id="firstName">
</form>

Text Area

For a bigger submission box, such as one where you put an "about me", we use the <textarea> tag. It's basically a large, multi-line textbox. The two attributes are "rows" and "cols", specifying the textbox dimensions.

Select Boxes

To make select boxes, use the <select> tag.

<select>
  <option>Banana</option>
  <option>Kiwi</option>
  <option>Applie</option>
  <option>Strawberry</option>
</select>

Select your favorite fruit from the following:Banana Kiwi Apple Strawberry

Grouping related objects within a select box

To group related objects within a drop-down menu, use <optgroup>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="bmw">BMW</option>
  </optgroup>
</select>

Select a car:Volvo Saab Mercedes BMW Honda Toyota

Submit

And the most important input button, the submit!

<input type="submit">

After this button is clicked, the page is redirected to wherever the "action" attribute points to.

Sectioning

HTML 5 has come out with a few tags for parts of our page that hold more special meanings.

Article

The <article> specifies independent, self-contained content. Imagine replicating a traditional newspaper page with numerous articles.

Sections

<section> defines sections of a document. This can be used to break apart pieces of an article, or the chapters, headers or footers.

Headers

The <header> element represents a container for introductory content or a set of navigational links.

A header can contain:

• one or more heading elements
• logo or icon
• authorship information

Note: You can have more than one header

Footer

The <footer> defines a footer for a document or section.

A footer can contain:

• authorship information
• copyright information
• contact
• sitemap
• facebook, twitter, instagram social media page
• legal documents

Asides

An <aside>contains content that is aside from the content it is placed in, but still related to the surrounding content.

Navigation

The <nav> element defined a set of navigation links. This is often what you see at the top or side of most pages.