Skip to content
DIG 245 Critical Web Design

HTML Reference

Markup Languages

Section titled “Markup Languages”
  • Markup languages structure and format, and define text.
  • Markdown is a common simple markup language, used by Wikipedia and Github README files.
  • Handy for writing plain text documents that look like rich text.
example.md
# Hello, World!


- This is
- a list


A [link](https://davidson.edu)

HTML

Section titled “HTML”
  • HTML (HyperText Markup Language) is used to structure the content of web pages.
  • Hypertext is text displayed with clickable links to other text(s).

HTML Structure

Section titled “HTML Structure”

The structure of tags defines how browsers parse (interpret and render) the page.

  • <html> is the page “root” element.
  • The <head> and <body> are enclosed (“nested”) inside the <html> element.
  • <head> is for displaying meta content about the page (like the <title> which appears on the tab).
  • <body> is for visible content that will appear within the browser window.
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- the head of the document has meta content *about* the page -->
    <title>Critical Web Design</title>
</head>
<body>
    <!-- the body contains visible content—what users see -->
    <p>Hello world!</p>
</body>
</html>

HTML Elements

Section titled “HTML Elements”
  • HTML elements tell the browser how to display the content they contain or “wrap”.
  • HTML elements are represented by tags which label pieces of content such as <p> (paragraph), <h1> (heading), etc.
  • Nested elements are those where the opening and closing tags are always contained. You should close all tags in the opposite order in which they appear.

Terms & References

Section titled “Terms & References”

Explore these terms and references and continue working on today’s hw.

HTML Terms

Section titled “HTML Terms”
Term Definition
Element The element includes the opening tag, content between, and the closing tag. (e.g. <b>Content</b>)
Tag The opening or closing part of an HTML element. Can be an opening, closing, or self-closing tag. (e.g. <b>)
Attribute Provide additional information to HTML elements. Attributes are specified in the start tag and usually come in name/value pairs like: name=“value”. (e.g. <a href="https://google.com">Google</a> )
Whitespace Spaces, tabs, and carriage returns are examples of whitespace you use in writing HTML. When the browser renders this page all whitespace will be collapsed to a single space.
Block-level HTML elements have default display values depending the element type. A block-level element (e.g. <div>) always starts on a new line and takes up the full width of its parent element. Inline elements (e.g. <span>) do not start on a new line and only take as much width as necessary.
Bookmarks a.k.a. “targeted anchors” are used to allow readers to jump to specific parts of a Web page when clicked. (e.g. clicking <a href="#section2">Jump to section 2</a> will jump to <p id="#section2">Content</p>)
Absolute URLs Absolute URLs are the full path or “web address” and always start with https:// or file:///. (e.g. https://google.com)
Relative URLs Relative URLs are relative path from one file to another. (e.g. images/cat.png or ../section2/file.html)
Comments Comments in HTML can be used to make notes about the code but do not appear on the web page. In the example above <!-- visible content goes here --> is a comment and not visible to users.

HTML Elements

Section titled “HTML Elements”

Examples of common HTML elements

Term Definition
<html> The root element of an HTML page
<head> Contains meta information about the document
<title> The title element goes in the <head> and appears at the top of the browser tab
<body> Contains the visible page content
<p> A paragraph
<br> A line break
<ul> An unordered list. List items within this element appear as bullets.
<ol> An ordered list. List items within this element appear with numbers.
<li> A list item

References

Section titled “References”

Critical Web Design Tutorials and references

Popular tutorials and guides - You should still look for other ones that you might like better!

Technical references - The most accurate and comprehensive way to understand a code language.