Layout

Learning Objectives:

In this section, students will:

  • Review the different ways headers, footers, and other sections can be used in HTML.
  • Understand how DIV and SPAN elements can be used to separate and better organize HTML content.

Layout

While elements like the headings and paragraph tag can help in organizing content within a HTML document, there are other elements designed for this purpose.

Headers

header.png

Much like a document like have a header, HTML also has a tag called HEADER to create the same organizational flow.

In HTML, a HEADER tag is often used to introduce content or contain information about a document.

Footers

Footer

Like the use of the HEADER tag, the FOOTER can act like the footer of a larger document or merely to indicate the end of some section.

Divisions

Beyond the use of the HEADER and FOOTER tags, there are also divisions. In HTML, this is abbreviated as “div”. Most websites with multiple sections use the DIV element to divide up content into logical sections.

DIV

Spans

When the task is to mark some selection of text, a DIV might be too much. Using only a few words or phrases to make a single divisions is often a waste of code. For the purpose of using only text, there is a different element: SPAN.

SPAN

Like the STRONG and EM tags covered in earlier parts, the SPAN tag is an example of an in-line tag. That is, it can be nested into other tags and does not disrupt content flow. Like a DIV but specialized for text, it can be used to find or act on some words or phrases within other elements and often as nested within other tags.

Play with the Code:

Take a moment to play with the code and concepts in the embedded viewer below. Watch how code added in the HTML window is updated in the Result window.

Try it Yourself:

Based on the ongoing CV example from previous modules, organize your CV using headers, footers, and division elements.

  • For "Skills" and other possible sections, organize your content into sections using DIV elements. Give this element the ID of "skills" and move (copy and paste) the previous content into this new element.

Test your response on Mozilla Thimble Links to an external site..

Video: