1.1: HTML
Learning Objectives
HTML is a set of tags that defines elements on all web pages
Understand basic HTML document structure
Understand how to use common tags
Introduction
HTML (HyperText Markup Language) defines elements on web pages. All web pages, even the most complex ones rely on HTML to represent their elements. In upcoming modules we will learn how to use CSS and JS to apply styling and interactivity to HTML elements.
HTML comprises tags and content between them. Web browsers read HTML and render content between tags based on tag specifications. For example, browsers will render content between "Header 1" (h1
) opening (<h1>
) and closing (</h1>
) tags as large headers, and content between opening and closing "Paragraph" tags (p
) in paragraph format.
Basic HTML Structure
All HTML documents generally start with the following declaration to use the latest version of HTML.
After the DOCTYPE
declaration is typically a set of html
opening and closing tags surrounding all page content.
The first set of tags within the outermost html
tags is usually the head
tags. head
tags contain important site metadata such as title (what's displayed in the browser tab bar), SEO metadata and links to stylesheets for styling and JavaScript for interactivity.
body
tags typically follow head
tags. body
tags contain the content of the page. The following example includes body
tags with h1
and p
tags within them, specifying content to render on the page.
That is the basic structure of all HTML pages. Feel free to play around with live examples on W3Schools.
Common HTML Tags
Summary
The following are common HTML tags we are most likely to use and encounter. Block elements occupy full page width and inline elements only occupy width of their content.
Tag name | Description | Block vs inline |
---|---|---|
| Divider tag. Serves as group for other tags. | Block |
| Span tag. Apply styles to inline content. | Inline |
| Header tags. | Block |
| Paragraph tag. Used to separate paragraphs of text. | Block |
| Bold and italicise tags. | Inline |
| Anchor tag. Link to another page with a URL. | Inline |
| Image tag. Render an image. | Inline |
| Ordered list, unordered list, list item. Render a list. | Block |
| Table, table row, table data. Render a table. | Block |
Anchor Tags (a
)
a
)Anchor tags link to other webpages and require an href
parameter that contains a URL.
To make the link open in a new tab, include the parameter target="_blank"
.
Image Tags (img
)
img
)Image tags are self-closing and do not have separate opening and closing tags. They require src
and alt
parameters representing the source of the image and alternate text describing the image for accessibility, SEO and to display if the image is not available. src
can be either a file path or a URL.
We can wrap tags in each other to combine their functionality. For example, we can make an image a link by wrapping an img
tag with an a
tag.
List Tags (ol
, ul
, li
)
ol
, ul
, li
)Wrap lists with ol
(ordered) or ul
(unordered) and wrap each list item with li
.
Table Tags (table
, tr
, th
, td
)
table
, tr
, th
, td
)Wrap tables with table
, table rows with tr
, table headers in the 1st row with th
and table data in subsequent rows with td
.
Last updated