## Lecture 1 (13:00) - HTML5 and Layout

- XHTML (2000) succeeded HTML4, allowing XML integration such as SVG, MathML and CML.

### HTML5

- Flexible parsing and compatibility
- Moved towards platform combining HTML5, CSS and JS
- Improved semantic elements
- New input attributes ex. date, time, email, url
- Global attributes ex. id, tabindex, style

### Doctypes

```html
<!DOCTYPE html>
```

```html
<?xml version="1.0" ?>
```

### Comments

```html
<!-- This is a comment -->
```

### ID Attribute

- Global attribute.
- Must be unique between elements.
- Must start with a letter or underscore.
- Can be used by CSS or JS to identify elements.

### Class Attribute

- Any HTML element can also carry a class attribute.
- Identifies collections of elements to manipulate as a group.
- Element can have multiple classes, separated with spaces.
- Class name should describe the class it belongs to.

### Block Elements

- Some elements will always appear to start in new lines.
- Examples include `<h1>`, `<p>`, `<ul>`, `<li>`.

### Inline Elements

- Some elements will always appear to continue on the same line.
- Examples include `<a>`, `<b>`, `<em>`, `<img>`.

### Grouping Elements

#### Block

- `<div>` Element allows for a group of elements to be grouped together within a single block element.
- Without styling each div, they will start on new lines.
- HTML5 introduced alternatives for semantic reasons.
	- `<article>` `<section>` `<header>` `<aside>` `<nav>`
- Good practice to break a page into smaller sections.

#### Span

- `<span>` element is the inline equivalent of `<div>`
- Most commonly used in order to be able to controlthe appearance with CSS.

## Lecture 2 (15:00)

### Page Information

- `<meta>` contained in `<head>`, contains information about the page.
- Not visible to user, but used in search engine rankings and info.
- Common attributes are defined in pairs.

#### Name, Value `<meta>`

##### Description

- Description of page
- Used & Displayed by search engines
- max. 155 characters.

##### Keywords

- Comma separated list of search terms
- Not used by search engines anymore

##### Robots

- Indicated whether search engines should include page
	- `noindex` - Don't include this page.
	- `nofollow` - Include this page but not linked pages.

### Special Characters

- Some characters reserved by HTML
- To display them, they must be escaped.
	- ex. `&lt;`, `&gt;`
- Or by using ASCII / Unicode Values
	- ex. `&#60;`, `&#62;`

### Traditional HTML Layout vs. HTML5

![](Pasted%20image%2020231019151742.png)

#### HTML5 Elements

- `<header>`, `<footer>`. Used as either header or footer at the top or bottom of a page, respectively. Can also be used for an individual `<section>` or `<article>` within the page.
- `<nav>`. Contains major navigational blocks ex. Primary site navigation.
- `<article>`. Container for syndicated or singular sections ex. news or blog article.
- `<aside>`. Contained within `<article>` and contains relevant but not necessary information.
- `<section>`. Groups related items together ex. Grouping `<article>` elements, or splitting them up.
- `<hgroup>`. Groups heading elements ( `h1`, `h2`, etc.. ) into one header.
- `<figure>`. Contains information referenced by the main flow of the document. Can be used for Images, Videos,Graphs, Diagrams, Code Samples, Text etc. Can use a `<figcaption>` element to define a caption.

#### Sectioning Elements

- HTML5 elements must strictly be used as designed.
- Where no element is valid, `<div>` is still used.
- Any content outside of `<header>`, `<footer>` and `<aside>` is considered content, hence there is no "`<content>`" tag.
- `<main>` element is used to specify content however, but can only be used once and cannot be nested inside `<section>` or any similar element.