HyperText Markup Language (HTML)
Basic HTML Document Structure
Important Links
- Excellent tutorials for learning to code in HTML1
- All the HTML Elements from the W3C School
- How to obtain public server space for your web pages.
The following terms are used when talking about HTML
encoding:2
element
or tag
attribute
value
An HTML document lives in your publicly accessible server
space
in the form of code.3 However,
when someone navigates to your page, any of the browsers they use automatically
transforms them into what looks like a web page. The styling of your web page is
achieved by the css code's rendering of the HTML elements. Here, the css is to
be found inside the <style> tag nested in the HTML document's <head>the body element
has a margin, but nothing else is styled:

The most basic elements of an HTML document, in the code
view, are:
<!DOCTYPE html> is called the
document declaration: it tells the browser to use the software inside it for
displaying HTML.
The open and close "html" tags,
<html></html>
open and close the whole document.
An HTML document has two main parts, visible in the image above
right:
<head> </head><body> </body>
Anything in the "head" element is information for the browser
software, not something people see, with one exception. The title tag nested
inside the open-and-close head tags appears on the tab in people's browsers:
<head>
<title>title for browser tab</title>
</head>
Anything in the "body" element will be seen when people visit
your web site using your URL or web address. In HTML, the "h" stands for
"header," and so the codes "h1" "h2" "h3" "h4" etc. determine the size of
the text from largest to smallest. "p" is a paragraph tag.4
That basic code appears in a browser looking like a web page,
albeit an ugly one!
Web designers style their pages by using "CSS" code, which
stands for Cascading StyleSheets. CSS can be a separate document, or the
code can be used inside the HTML "head" tag, inside an element (between
tags) called "style":
To the right, you can see that I have told the browser to
make red the font of text inside <h3> elements
(any and all of them).
Now, my web page looks like this (to the right) in
browsers:
Inside the <style> element, the code switches from HTML to CSS code:
an HTML element
(here, h3) that is
followed by two curly brackets that
open { and close } the list of properties (here, color) to be applied to that element's
appearance in a browser. Each property
(color) is followed by a colon that introduces a value
(red) for that property, and
then closes with a semi-colon.
All the CSS properties and values are listed and
explained by the W3C Schools, and Zen Garden CSS offers beautiful examples of how css code
can be used (which you can copy and use yourself, offering credit to the
original coder). The Digital Editions textbook offers a tutorial on CSS.
Commonly used HTML 5 tags:
- <main></main> (optional)
- <section></section> (optional)
- <div></div> (short for "division")
- <img></img> (the image tag)
- <a></a> (the link tag)
- <table></table>
- <ol></ol> (numbered list)
- <ul></ul> (bullet-point list)
- <br/> (a self-closing
tag
that makes a hard return, vertical space)
Home
Notes
1. W3C Schools provide excellent tutorials and reference materials for
many kinds of coding including HTML 5. The She
Codes Foundation offers classes but also answers questions for free.
Among the many HTML textbooks, I recommend
David DuRocher's HTML / CSS QuickStart Guide: The Simplified Beginners Guide to
Developing a Strong Coding Foundation, Building Responsive Websites, and
Mastering the Fundamentals of Modern Web Design, published by ClydeBank
Media
which
offers many "QuickStart" guides for coding; Julie C. Meloni's HTML, css, and
JavaScript: All in One in Pearson Education's Sams Teach Yourself Series,
latest edition, 2019.
Jon Duckett's HTML & CSS: design and build websites
(Indianapolis, IN: Wiley, 2014) is a beautiful book well worth having for its sense
of design. See also the css portion of this website
for a full explanation. Back
2. For a full discussion of these terms, pleases see the Introduction's Basic Overview of Digital Editing and the dictionary of Digital Editing Terms. Back
3. See also the discussion of File Structure in the SetUp section of this textbook. Back
4. A full list of tags is available from the W3C School. Back