1 Structure

Question 1

What do Body, Head and Title tags do

Answer 1

Title can go anywhere but usually in the head, defines the browser title

Body defines the main page

Head is for information about the page

Question 2

What parts make up an HTML element?

Answer 2

the opening tag and any attributes
the content
and the closing tag

Question 3

Why does the home page have to be called index.html?

Answer 3

web servers will by default look for an index.html page when users land on our websites - and not having one will cause big problems.

Question 4

What is the HTML element that defines that this is an HTML doc?

Answer 4

&lthtml>

Question 5

Specify the language of the page

Set it to UK english

Answer 5

&ltlang=”en”/>

&ltlang=”en-uk”/>

Question 6

Encode the charset

Answer 6

&ltmeta charset=”UTF-8”/>

Question 7

Why use UTF-8 over other charsets like:
ASCII
ANSI
8859

Answer 7

UTF-8 has the most and is the most compatible
ANSI and UTF-8 are both encoding formats. ANSI is the common one byte format used to encode Latin alphabet; whereas, UTF-8 is a Unicode format of variable length (from 1 to 4 bytes) which can encode all possible characters.
https://www.w3schools.com/html/html_charset.asp

Question 8

VS Code shortcut to create HTML boilerplay

Answer 8

!

Question 9

What does this do:

&ltmeta http-equiv=”X-UA-Compatible” content=”IE=edge”>

Answer 9

IE before version 11 will not necessarily use edge mode if you don’t specify it. So if you want to support older versions of IE the meta tag is necessary.

In IE you can also add intranet sites to the “compatibility view” list which will render them in quirksmode, X-UA-Compatible overrides this setting. I learned that the hard way because a company I was in changed compatibility view settings for all users, via group policy.

It’s one of those things that you just put there for ease of mind. X-UA-Compatible probably does not matter in 2020 but it’s easy enough to add, for those 0.003% of edge cases.

Question 10

What does this do:

&ltmeta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Answer 10

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Question 11

What makes normalize.css better than some other CSS resets?

Answer 11

It selectively styles only those elements that are inconsistent between browsers and makes them consistent.
It doesn’t completely eliminate all styling, just makes them similar.
This prevents some unnecessary css chaining.