Doctype, head

!DOCTYPE

Кожен html-файл повинен починатися зі строки-сігнатури <!DOCTYPE ... >

Цей елемент призначений для того, щоб браузер розумів як інтерпретувати веб-сторінку.

Зараз ми завжди будемо використовувати простеньку строку: <!DOCTYPE html>, вона означає, що наша сторінка написана згідно стандарту HTML5.

Раніше ця сігнатура мала значно монструозніший вигляд, описувала строгий, перехідний синтаксиси HTML, використання фреймів, і виглядала приблизно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Детальніше з цим елементом можна ознайомитися в вікіпедії чи на проекті htmlbook.ru (webref.ru).

HEAD

Між тегами <html> та <body> повинен знаходитися ще один блок: <head>

Цей блок не відображається на сторінці і містить певні установки для налаштування браузера.

Ось приклад блока <head>:


				<!DOCTYPE html>

				<html>

				<head>

				  <meta charset="utf-8">

				  <title>Frontend. Заняття 4.</title>

				  <meta name="keywords" content="">

				  <meta name="description" content="">

				  <meta name="format-detection" content="telephone=no">

				  <link type="text/css" rel="stylesheet" href="css/style.css">

				  <script type="text/javascript" src="js/script.js"></script>

				</head>

				<body>

				  <div ...>

Метатег з кодуванням повинен бути першим, що браузер зустріне в тезі head.

Тег <title> містить в собі строку - заголовок сторінки. Цю строку можна побачити на вкладці браузера

Tag title — Текст з тега <title> відображається на вкладці браузера

Далі йдуть мета-теги. Вони описують мета-дані сторінки та підлаштовують браузер для її відображення:
- ключові слова інформації, що представлена на сторінці;
- опис інформації, що представлена на сторінці;
- format-detection - це параметр, від значення якого залежить як будуть представлені різні формати даних.

В нашому випадку значення "telephone=no" означає те, що браузери мобільних додатків не будуть намагатися представити телефон у вигляді посилання. Клік на таке посилання дає змогу одразу зателефонувати за вказаним номером, але небажане посилання може попортити зовнішній вигляд сторінки.

Тег <link> призначений для підключення ресурсів, в даному випадку - файл стилів.

Тег <script> призначений для підключення скриптів чи їх безпосереднє включення в код сторінки.