The Browser Triad

# The Browser Triad
            ## HTML, CSS and Javascript

---

## 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.
            - Semantic HTML elements describe content and provide "meaning" to the browser (handy for screen readers)
            - HTML elements can be nested (i.e. one element inside another) giving them _parent/child_ relationships.

---

## HTML Syntax
            ![HTML Syntax](../../assets/images/html-css/grumpy-cat-small.png)

![Attribute Syntax](../../assets/images/html-css/grumpy-cat-attribute-small.png)

See: [Getting started with HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)

---

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

---

### CSS Syntax
            ![CSS Syntax](../../assets/images/html-css/css-declaration-small.png)

See: [CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/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.

---

## The Box Model
            - Everything on a web page is a box. Web designers are really box designers.
            
            - HTML creates the boxes and CSS styles the boxes according to the Box Model.

- See: [Introduction to the CSS basic box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)

---

## Box Model Diagram
            ![Box Model](../../assets/images/html-css/box-model.png)

Source: [CSS: Box Model Explained](https://levelup.gitconnected.com/css-box-model-explained-60fc76fe9c4d)

---

## `display` Property
            The display property controls which box model "mode" an HTML element is in. We will be covering the following display modes in this course:
            - `none`: removes the element from the document
            - `inline`: word level
            - `block`: paragraph level
            - `flex`: one-dimensional layouts (covered later)
            - `grid`: two-dimensional layouts (covered later)
            
            ---

## Inline elements
            Used for word-level styles such as **bold** and _italicize_.
            - They respect `left` & `right` margins and padding, but **not** `top` & `bottom`;
                - Use `line-height` to separate content in the up/down direction;
            - They cannot have a `width` and `height` set;
            - They allow other elements to sit to their left & right.
            - See:
                - [block vs inline elements](https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block) 
                - [Understanding the CSS box model for inline elements](https://hacks.mozilla.org/2015/03/understanding-inline-box-model/)
        
            ---

## Common inline elements
 - `strong`: For **bolding** text
 ```
 Hello, World! How are you doing?
 ```
 - `em`: For _italicizing_ (emphasize) text
 ```
 Hello, World! How are you doing?
 ```
 - `img`: HTML images
 ```
 Images <img src="/path/to/image.png"> act like words by default.
 ```
 - You will often use `display: block` on images to make them behave more intuitively.

---

## Block-level elements
            Are used for paragraph-like content. They:
            - Respect all sides of `margin` and `padding`;
            - Can have `width` and `height` set;
            - Force a line break after the block element;
            - Are full-width if width is not defined;
            - Are zero height if there is no content.
        
            ---

## Common Block-level elements:
 ```
 <main>
 <h1>Hello World!</h1>
 How are you doing?
 </main>
 ```
 - Headings: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
 - Paragraphs: `p`
 - Lists: `ul` (bulleted), `ol` (numbered)
 - Layout: `header`, `footer`, `main`, `nav` 
 - Generic: `div`
 - used for layout with no semantic meaning

---

## Common quirks
            You will often have to deal with common quirks to the box model:
            - HTML images are inline by default and behave like words. Use `display: block` to fix this;
            - Block level elements are zero height if they're empty and seem to disappear. Either add content or set an explicit `height` to the element;
            - Buttons, links and most form elements are also inline by default. Use `display: block` as needed.

---

## Frequently Asked questions

---

## What's the difference between `` and ``?
 This also applies to `` and ``.
 - `` is the old way of bolding and is deprecated (i.e. it shouldn't be used anymore). Use `` instead.
 - Similarly, `` is the old way of bolding and is deprecated. Use `` instead.

---

## Can I use `font-weight` in CSS instead of `` in HTML?
 - You can make all content inside an element bold with the `font-weight` CSS property (italicize with `font-style`).
 - If you want to make individual words in a sentence bold or italic, it's best to wrap the words with a `` (for bold) or `` (for italics). The browser will style the words as bold/italic for you.