
DOM (Document Object Model) is a programming api for your HTML (or XML) documents. Basically it is an object representing parsed code of your page.

It has tree-like structure and allows you to traverse, access and modify its nodes.

You are probably familiar with DOM API methods:

```js
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)

// ... etc.
```

## Why Updating DOM Is Expensive

When you update DOM it can cause browser to run two expensive operations: **reflow** and **repaint**.

**Reflow** happens where there is a change to DOM layout. It calculates dimensions and positions of page elements. And it does it for every element and it's children.

**Repaint** goes through elements and determines visual changes (opacity, color, outline, visibility) and then updates pixels on the screen.

> Because of how updating DOM is expensive - React is using technique called [Virtual DOM](https://maksimivanov.com/posts/virtual-dom/).

What Is DOM


HTML entities are strigns inside HTML code that start with ampersand `&` and end with semicolon `;`. They allow you to add wide variety of characters to your HTML code.

For example `<` and `>` characters are reserved in HTML because they are used to enclose HTML tags. But if you need to display one of them on the page you can use `&gt;` to display `>` and `&lt;` for `<`.

HTML entities can be referenced by name, like we did with `&gt;` and `&lt`, but they also have numeric references: **hexadecimal** and **decimal**.

For examle `&gt;` can also be referenced as `&#62;` and `&lt;` can be referenced as `&#60;`.

Some of the entities don't have named reference and can only be referenced by their decimal or hexadecimal reference. Like for example celsius sign `&#8451;`

Here is a list of some popular HTML entities:

| Character | Entity                  | Hexadecimal   | Decimal   | Name             |
|-----------|-------------------------|---------------|-----------|------------------|
| ©         | `&copy;`                | `&#x000A9;`   | `&#169;`  | COPYRIGHT SIGN   |
| ®         | `&reg;` `&circledR;`    | `&#x000AE;`   | `&#174;`  | REGISTERED SIGN  |
| ™         | `&trade;`               | `&#x02122;`   | `&#8482;` | TRADE MARK SIGN  |
| >         | `&gt;`                  | `&#x0003E;`   | `&#62;`   | GREATER-THAN SIGN|
| <         | `&lt;`                  | `&#x0003C;`   | `&#60;`   | LESS-THAN SIGN   |
| ;         | `&semi;`                | `&#x0003B;`   | `&#59;`   | SEMICOLON        |
| &         | `&amp;`                 | `&#x00026;`   | `&#38;`   | AMPERSAND        |
| "         | `&quot;`                | `&#x00022;`   | `&#34;`   | QUOTATION MARK   |
| #         | `&num;`                 | `&#x00023;`   | `&#35;`   | NUMBER SIGN      |
| ★         | `&starf;` `&bigstar;`   | `&#x02605;`   | `&#9733;` | BLACK STAR       |
| ☆         | `&star;`                | `&#x02606;`   | `&#9734;` | WHITE STAR       |
| ✂         |                         | `&#x02702;`   | `&#9986;` | BLACK SCISSORS   |
| ✓         | `&check;` `&checkmark;` | `&#x02713;`   |	`&#10003;`|	CHECK MARK       |
| ✗         | `&cross;`               | `&#x02717;`   |	`&#10007;`|	BALLOT X         |
| ✩         |                         |`&#x02729;`    |	`&#10025;`|	STRESS OUTLINED WHITE STAR
| ✪         |                         |`&#x0272A;`    |	`&#10026;`|	CIRCLED WHITE STAR
| ❞         |                         |`&#x0275E;`    |	`&#10078;`|	HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT
| ❤         |                         |`&#x02764;`    |	`&#10084;`|	HEAVY BLACK HEART
| ←         | `&larr;` `&leftarrow;` `&LeftArrow;` `&slarr;` `&ShortLeftArrow;` |`&#x02190;`|`&#8592;` |	LEFTWARDS ARROW
| ↑         | `&uarr;` `&uparrow;` `&UpArrow;` `&ShortUpArrow;`	| `&#x02191;`	| `&#8593;`	| UPWARDS ARROW
| →         | `&rarr;` `&rightarrow;` `&RightArrow;` `&srarr;` `&ShortRightArrow;` | `&#x02192;` | `&#8594;`| RIGHTWARDS ARROW
| ↓         | `&darr;` `&downarrow;` `&DownArrow;` `&ShortDownArrow;`| `&#x02193;`| `&#8595;`| DOWNWARDS ARROW
| €         | `&euro;`| `&#x020AC;`| `&#8364;`|EURO SIGN
| ▶         | 	|`&#x025B6;`|	`&#9654;`	|BLACK RIGHT-POINTING TRIANGLE
| ▽         | `&xdtri;` `&bigtriangledown;`|	`&#x025BD;`|	`&#9661;`|	WHITE DOWN-POINTING TRIANGLE
| ◉         | 	|`&#x025C9;`	|`&#9673;`|	FISHEYE
| ∑         | `&sum; &Sum;`	|`&#x02211;`|	`&#8721;`	|N-ARY SUMMATION
| ℹ         | 	|`&#x02139;`|	`&#8505;`	|INFORMATION SOURCE
| №         | `&numero;`	|`&#x02116;`|	`&#8470;`|	NUMERO SIGN
| ℗         | `&copysr;`	|`&#x02117;`|	`&#8471;`	|SOUND RECORDING COPYRIGHT
| ℃         | |	`&#x02103;`|	`&#8451;`|	DEGREE CELSIUS
| ℉         | |	`&#x02109;`|	`&#8457;`|	DEGREE FAHRENHEIT 


Html Entities


How do you serve a page with content in multiple languages?

Serving webpages in multiple languages is a very big topic and for me it breaks down into three main parts.

First we need to recognize what language is preferred by current user.

## Choosing The Right Language To Serve

Essentially you have two options - either to let user specify the preferred language explicitly, or make your best guess based on existing data about the user.

Let's begin with setting language explicitly.

### Setting Language Explicitly

First way to allow user to choose the language of the page is to include locale segment into the url.

You can see this approach on developer.mozilla.org:

* (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language)[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language]

It also provides some additional benefits. For example it provides consistency when sharing multilingual content.

So if I decide to share this page by copying the url from address bar, I can be sure that my friend will receive same version of it, because locale was included into the url.

Alternatively you can add some language selection mechanism that will store the picked language in current session, for example in cookies. So you'll be able to serve the localized version of your page, based on that information.

This is good, it allows your users to specify preferred language and doesn't require them to know that this functionality already exists in their browser.

### Guessing Language Preference

There is special `Accept-Language` request header that you can use to get the language preference.

This header has a list of locales with priorities, where default priority is 1.

```
Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5
```

All major browsers allow users to specify preferred languages. To do this in Firefox you go to `about:preferences`, **General** tab and click the **Choose** button on **Language** section. By moving languages up and down you'll specify their priority.

This information will end up in the `Accept-Language` request header.

After we know what language is preferred we need to serve the page properly, which includes specifying the proper encoding, and also providing the meta information in headers and html tags, telling what is the language of the content we are serving.

## Providing Language Info For Current Page

Why is it so important to properly set the charset?

Well, if you don't do that browser might use the default one, which is either [Latin-1](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) or [Windows-1252](https://en.wikipedia.org/wiki/Windows-1252) in html5, both of which being single byte encodings, therefore providing only 256 characters.

As you can imagine it's not enough to properly display text containing characters from multiple alphabets.

First thing browser will check when trying to get the correct charset is the `Content Type` header.

The syntax for it is the following.

First goes the MIME type, in our case `text/html`, then after a semicolon goes charset.

Another way to provide the charset for the html document is by using the `<meta charset="utf-8"/>` tag. Actually you should always do this even if charset is already provided in headers. In this case just make sure they match.

There is also an html attribute `lang`, that allows you to provide the info about the language of the current page or part of the page, for example a paragraph.

Look at this:

If most of your page is in English but you have a few paragraphs in German or French - you can specify language of those paragraphs by setting the `lang` attribute.

And lastly we need to make sure to let search engines know that we have localized versions of some page, so they won't be treated as content duplicates.

## Optimizing For SEO

Serving same page in multiple languages can lead to a lot of duplicated content, which can harm ranking your page in search engines.

To avoid that you should specify the canonical url - with default or main language of your content and specify localized versions of this page as alternatives with language specified in `hreflang` field. Using `<link rel="alternate" hreflang='en-gb'>`

[Watch the video on YouTube](https://www.youtube.com/watch?v=9wJPOPywU3w)


How do you serve a page with content in multiple languages?


If you open any webpage, and look at it's source code, you'll always see
a little thingy just before the opening html tag. So what is it, and what does it do?

This string is a document type declaration, and it's important to note that it's not an html tag itself, but it's an instruction for the browser on what version of HTML is used on this page.

Good news, modern web developers don't have to know any doctypes other than doctype html, because since the html5 it's the only doctype you should set for your webpages.

Before html5, there were several others that had more complex syntax. You had to specify the link to the actual doctype declaration. For example like in this html4.01 strict. We specify the link to the doctype on w3.org website

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

`https://www.w3.org/TR/html401/strict.dtd`

If you open the link, you will see how those type declarations used to look. It was a structured document that was telling browser what elements and attributes are allowed to use in current html version.

But as I said the modern type declaration doesn't' require you to specify the link to declaration file manually. And the only thing you have to worry about is to include this instruction in the beginning of your html document.

Now why, do you need to specify it?

In the dark ages of the internet, before the web standards, there we two huge browsers: Netscape Navigator and Microsoft Internet Explorer. And web pages were usually developed separately for each of them.

After the creation of the standards browsers introduced two ways of rendering, one for standards compliant websites and quirks mode to support the legacy sites.

So when you specify the doctype in the beginning of your document - you tell the browser that the webpage should be rendered in standards mode.

Otherwise if you omit it - you make the browser to use the quirks mode.

Let's look at the examples, I've created a two webpages with almost identical content. I've set the doctype for one page and omitted for another. Let's see how will they render.

If you right click the page and check out the page info, you'll see what mode is currently being used to render the page.

First thing I'd like you to note is different margin of the `h1` element. In quirks mode it doesn't have the top margin.

Next you can see that I have an orphaned list item element here. And in quirks mode this item has a bullet point.

Now take a look at the paragraph in the bottom. I have an uppercased class name for it. And in styles it has lowercase notation. As you can see in quirks mode class names are case insensitive, so the class name is still being applied.

You can check out the list of quirks that will be used for your page on Mozilla website.

Now to sum it up: Doctype is a type declaration that should go as the first line in your html document before the opening html tag. It makes browser render the page in standards mode. And you should only use the `<!doctype html>` since the html5 was released.

[Watch the video on YouTube](https://www.youtube.com/watch?v=5E1eQ_gNmyU)


HTML

What Is DOM

Html Entities

How do you serve a page with content in multiple languages?

What is doctype in HTML documents? And why do you have to specify the doctype?