Learning HTML: Part 4: Layout

Learning HTML

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

Screenshot 2018-09-09 13.28.50

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

Screenshot 2018-09-09 13.30.37

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.

Screenshot 2018-09-09 13.38.11

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.

Screenshot 2018-09-09 13.41.43

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:

Remix on Mozilla Thimble!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s