Learning HTML
- Part 1: Headings and Paragraphs
- Part 2: HTML Anatomy and Nesting Elements
- Part 3: Attributes
- Part 4: Layout
- Part 5: Links and Document Structures
HyperText Markup Language (HTML) is the de facto language of web documents. Created in part from existing languages and tools in 1991, it first became standardized in 1995 and has grown in popularity and usage over the last decades. Nearly all webpages are now written in HTML, and it is understood by all major web browsers.
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
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
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.
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.
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.
Codepen Example:
See the Pen Learning HTML: Layout by Dan Cox (@videlais) on CodePen.
Mozilla Thimble Example:
Digital Ephemera 