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
<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
div tags with an
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.
To place an image on a page, use the
<img> tag has no closing tag.
Important Attributes of the
- Used to locate the source of the image.
- 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.
- 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">
<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 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.
GIFs contain no more than 256 colors, thus lowering the file size. We can have some pixels in the GIF to be transparent.
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 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. :-)
Firstly, we need to make labels for our input fields, which we can with the
We specify which form it's for with the "for" attribute, which is to match with the "id" in our
Now when users click on the label, the focus is placed on the corresponding input.
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">
<input type="password" name="password">
<input type="checkbox" checked>
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>
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.
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:
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:
And the most important input button, the submit!
After this button is clicked, the page is redirected to wherever the "action" attribute points to.
HTML 5 has come out with a few tags for parts of our page that hold more special meanings.
<article> specifies independent, self-contained content.
Imagine replicating a traditional newspaper page with numerous articles.
<section> defines sections of a document.
This can be used to break apart pieces of an article, or the chapters, headers or footers.
<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
<footer> defines a footer for a document or section.
A footer can contain:
- authorship information
- copyright information
- facebook, twitter, instagram social media page
- legal documents
<aside>contains content that is aside from the content it is placed in, but still related to the surrounding content.
<nav> element defined a set of navigation links. This is often what you see at the top or side of most pages.