The Browser Triad

HTML, CSS and JS each do different and very important jobs in every web browser:

HTML: Content Layer
CSS: Presentation Layer
Javascript: Behaviour Layer

HTML - Content Layer

HTML defines the meaning and structure of web content.

<section class="intro">
  <h1>About Temi</h1>
  <p>Temi loves to watch TV shows! Her most recent shows are:</p>
  <ul>
    <li>The Brothers Sun</li>
    <li>Selling Sunset</li>
    <li>The Fall of the House of Usher</li>
  </ul>
</section>

Semantic HTML elements describe content and provide "meaning" to the browser (handy for screen readers)

HTML Syntax

Attribute Syntax

See: Getting started with HTML

CSS - Presentation Layer

The CSS that control the visual appearance of a web page. Examples: typography, layout, colour, etc.

body {
  font-size: 20px;
  text-align: center;
  color: rebeccapurple;
  background-color: lightgrey;
}

h1 {
  border-bottom: 2px solid black;
}

CSS Syntax

See: CSS Basics

Javascript - Behaviour Layer

The Javascript that controls the interactive behaviour of a web page.

In practice, the behaviour layer is responsible for everything the content and presentation layers can't do (yet).

Javascript will be covered in more detail later.

Further Learning

Video: HTML Tutorial for Beginners: HTML Crash Course by Mosh Hamedani
Getting started with HTML
CSS Basics

The Browser Triad

HTML, CSS and Javascript