1.1: HTML

Learning Objectives

  1. HTML is a set of tags that defines elements on all web pages

  2. Understand basic HTML document structure

  3. Understand how to use common tags

Introduction

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>My First Header</h1>
    <p>My first paragraph</p>
  </body>
</html>

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. 

<h1>My First Heading</h1>
<p>My first paragraph.</p>

Basic HTML Structure

All HTML documents generally start with the following declaration to use the latest version of HTML.

<!DOCTYPE html>

After the DOCTYPE declaration is typically a set of html opening and closing tags surrounding all page content.

<!DOCTYPE html>
<html>
  Page content
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>My First Header</h1>
    <p>My first paragraph</p>
  </body>
</html>

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 nameDescriptionBlock vs inline

div

Divider tag. Serves as group for other tags.

Block

span

Span tag. Apply styles to inline content.

Inline

h1, h2, ..., h6

Header tags. h1 is largest and h6 is smallest.

Block

p

Paragraph tag. Used to separate paragraphs of text.

Block

b, i

Bold and italicise tags.

Inline

a

Anchor tag. Link to another page with a URL.

Inline

img

Image tag. Render an image.

Inline

ol, ul, li

Ordered list, unordered list, list item. Render a list.

Block

table, tr, td

Table, table row, table data. Render a table.

Block

Anchor Tags (a)

Anchor tags link to other webpages and require an href parameter that contains a URL. 

<a href="rocketacademy.co">Best Coding Bootcamp</a>

To make the link open in a new tab, include the parameter target="_blank".

<a href="rocketacademy.co" target="_blank">Best Coding Bootcamp</a>

Image Tags (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.

<img src="images/rocketrocks.png" alt="Rocket rocks!" />

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.

<a href="rocketacademy.co" target="_blank">
  <img src="images/rocketrocks.png" alt="Rocket rocks!" />
</a>

List Tags (ol, ul, li)

Wrap lists with ol (ordered) or ul (unordered) and wrap each list item with li.

Ordered List
<ol>
  <li>Study</li>
  <li>Practise</li>
  <li>Success</li>
</ol>
Unordered List
<ul>
  <li>Great students</li>
  <li>Great teachers</li>
  <li>Great school</li>
</ul>

Table Tags (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.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
Previous1: FrontendNext1.2: CSS

Last updated