HTML - The Structural Layer
We'll do most of this in class
HTML describes the structure of pages
What is a markup language?
- It's a collection of codes, embedded in a document, that explain the meaning or desired formatting of the marked text
- It's a way of describing, using instructions buried in the document, what the document is supposed to look like
- Every electronic text processing tool uses some kind of markup language, though you may not necessarily be able to see the commands
HTML follows the same three-part-instruction model that command line instructions used in UNIX or LINUX.
So an HTML tag is a form of a command, but this tag (command) is directed at the browser.
HTML Elements and tags
An element is composed of content that is to be displayed and tags that tell the browser what structure the content is to be understood to be.
For instance, these tags tell the content of the element how to display.
<b>content</b> tells the browser to show the word "content" as bold, or content
For another instance, these tags tell the content of the element how to display.
<i>content</i> tells the browser to show the word "content" as italicized, or content
Attributes and values of tags
Some elements - such as a Heading 4
attributes that define the properties of the element - such as a style
values - such as centering
style="text-align:center;">centering a Heading 4</h4>
tells the browser to show the words "centering a Heading 4" in Heading 4 style and centered, or
centering a Heading 4
They follow rules about nesting and placement.
In general, both sides of the content must be balanced and consistent.
style="text-align:right;">the marked-up content</h3></p>
tells the browser to
open heading 3 in a style in which the text is displayed to the right of the line
the marked-up content
close heading 3
in mirrored order
or, as it will display
the marked-up content
HyperText Document structure
The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag;
it is an instruction to the web browser about what version of HTML the page is written in.
- <html> the outermost element, indicates that the enclosed text is html and therefore must use an html-capable program to open it
the first element inside <html> is the HEAD
a container for information about the
document; this is where one might place
meta-information about the document as well as
- remember, balanced and consistent; one must close the HEAD, </head>
- a container for information about the document; this is where one might place meta-information about the document as well as the <title>page title</title>
the BODY element contains all the text and other
material that is to be displayed
- and, of course, the document is balanced as it is closed, </body>
- and consistent, as HTML is closed as well - </html>
So the structure should look like
<!DOCTYPE html version>
<!-- this is a comment; the html version should be specified -->
<p>a paragraph in the body of the page</p>
<!-- this is a comment -->
Although we can get away without putting end tags on elements (because many browsers are lax about it), we will adopt the habit of always closing any tag we open so that we are compliant with current and future standards.
We may wish to enhance the metadata in the <head>
<title> INLS201-001 Fall 2017 Information Tools | Sample Page </title>
<meta name ="description" content ="sample page for INLS201-001 Fall 2017 Information Tools" />
<meta name ="keywords" content ="information literacy, information tools, information, tasks, hard coding" />
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<link rel ="stylesheet" type ="text/css" href ="notyet.sample-style.css" />
Metadata typically define document title, styles, links, scripts, and other meta information.