HCDE 532: HTML and CSS basics

In the 1990s, early versions of HTML mixed content and presentation in the same file. In 1997, HTML 4 was the first step in separating presentation from content. Today, separating content (HTML) from presentation (CSS) is the best way to build websites that will work on a variety of output devices.

A webpage is composed of three parts:

  1. Markup: the HTML code that makes tells the browner how to display content on the web page
  2. Text: the text (or copy) on your web page.
  3. References to external files:
    • Auxiliary files like javascript or CSS (cascading stylesheets) that make the page work
    • Multimedia: images, video, audio files
    • Documents: PDFs, CSVs and as well as proprietary file types
    • Other web pages

HTML Documents

We call web pages HTML documents. The file format usually has the extension “.html” or “.htm”. HTML documents are plain text (ASCII) files that contain code that tells the browser how it should display the page. But there are no display police; “should” is not “must.”
This is what a very simple HTML document might look like:

<!DOCTYPE html>
<title>A Plain Web Page</title> 
<p>This is a one-paragraph web page.</p> 

To view an HTML document, a browser talks to the web server before before displaying it.
What you see is your browser’s interpretation of how the web page should look. (Note: this is why it is important to test your site using a variety of browsers.)

Introduction to HTML5

HTML5 is the fifth revision of the HTML. Its core aims have been to improve the language to support for multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets.
See Also: HTML HOME | W3 Schools

Anatomy of an HTML5 Document

  • the doctype is much simpler
  • the character encoding is much shorter
<!DOCTYPE html>
<!-- tells the browser what markup language is being used -->
<!-- begin contents of the web page -->
<!-- begin information about the web page -->
<meta charset="utf-8" />
<!-- tells the browser what content type is being used -->
Title of the document
<!-- the page title -->
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
<!-- link to stylesheet -->
<!-- end information about the web page -->
<!-- begin visible page content -->
Hello, World!
<!-- page content -->
<!-- end visible page content -->
<!-- end contents of the web page --> 

 Example: Hello, World!


The doctype tells the browser what standards to use to interpret the code.
Doctypes are placed at the top of an HTML page:


Tags (elements)

The HTML tag tells the browser to expect HTML: this ASCII document is designed to be viewed in a web browser.

  • The <head> tag calls out the portion of your HTML page that will contain the header information of your page – meta data information that is not displayed on a web page by a browser
  • The page title lives between the opening and closing <title> tags
  • There a variety of <meta> tags; one tells the browser which character set we will be using.
  • The <body> tag identifies the portion of the HTML document that the browser will render (or show) to the reader
  • H1 – H6 elements “briefly describe the topic of the section they introduce.” They form a semantic structure that can “be used by user agents, for example, to construct a table of contents for a document automatically.” An <h1> tag is our main headline and an <h2> tag is our sub headline.
  • A <p> is the paragraph tag.
  • The anchor tag, <a>, is how we build hyperlinks.


See Also: HTML Tag List | W3 Schools


Although most HTML elements are paired, with an opening and closing tag, some are not. From Castro:

castro castro

Elements can have attributes

If you think of an element like a noun (socks) then you can think of an attribute as an adjective (red).

This example from Castro is perhaps the most important element-attribute pair in HTML: the anchor and HREF.


But the ability to separate content from presentation is pretty darn important, too:



Parents and children

When one element contains another one, we have a parent-child relationship. This family-tree-like structure is a key feature of HTML.

When elements are nested, we need to be aware of the position of our closing tags so that the child is completely enclosed by the parent.


Block and inline

There are two key types of elements: block and inline. Block elements force a line break (think the “return” key). Inline elements do not.

The browser will collapse any spaces that we put in our code, unless surrounded by <pre></pre> tags. We force new lines using block elements like p, div, section, article, aside, header, footer, nav.


Special characters

Because we are using a limited character set (ASCII), we have to explicitly write special characters like & and < and >.  Castro has information about these special characters.

  • & is &amp; or &#38;
  • < is &lt; or &#60;
  • > is &gt; or &#62;



Using HTML5 semantic elements when you build your web pages means your sites will be more structurally consistent. The resulting pages will be more accessible to anyone who uses a screen reader as well as for search bots and other programs that need to interpret the content of a web page.

Our code will be cleaner as we fight against divitis!


HTML 5 semantics
From CodePen.io

What Is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to separate presentation from structure

There are three types of CSS:

  • External style sheets save a lot of work and are stored as CSS files
  • Internal style sheets live in the head of an HTML document
  • Inline style sheets affect specific bits of text within the body of an HTML document

An HTML document can be displayed with different styles: See how it works

See Also: CSS Introduction | W3 Schools

Structure of a CSS File

* {  margin: 0;
    padding: 0;
    border: 0;

body { /* CSS Selector */
    /* CSS Rule */
    font-family: Arial, Helvetica, sans-serif; color: #000;

h1 {
    width: 500px;
    margin-top: 25px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 50px;
    border-bottom: 1px solid #85898A;

h2 {
    width: 500px;
    font-size: 21px;
    line-height: 21px;
    font-style: normal;
    padding-top: 8px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 50px;

p {
    width: 500px;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: justify;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 50px;

ul {
    width: 500px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 50px;

li {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0px;
    margin-left: 20px;

a {
    text-decoration: underline;

a:hover {
    text-decoration: none;

What Is XHTML?

  • XHTML stands for eXtensible HyperText Markup Language
  • XHTML is almost identical to HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined as an XML application
  • XHTML is a W3C Recommendation

See Also: XHTML | W3 Schools

XHTML Syntax Rules

  • Attribute names must be in lower case
  • Attribute values must be quoted
  • Attribute minimization is forbidden
  • The XHTML DTD defines mandatory elements