HTML — The Head Element

The HTML element is a container for the following elements: , , , , , and .

The HTML Element

The element is a container for metadata (data about data) and is placed between the tag and the tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML Element

The element defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab.

The element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

Example

The content of the document.

The HTML Element

The element is used to define style information for a single HTML page:

Example

The HTML Element

The element defines the relationship between the current document and an external resource.

The tag is most often used to link to external style sheets:

Example

Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML Element

The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples

Define the character set used:

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Setting the viewport to make your website look good on all devices:

Example

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

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:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

The HTML Element

The element is used to define client-side JavaScripts.

The following JavaScript writes «Hello JavaScript!» into an HTML element with >

Example

Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML Element

The element specifies the base URL and/or target for all relative URLs in a page.

The tag must have either an href or a target attribute present, or both.

There can only be one single element in a document!

Example

Specify a default URL and a default target for all links on a page:

Chapter Summary

• The element is a container for metadata (data about data)
• The element is placed between the tag and the tag
• The element is required and it defines the title of the document
• The element is used to define style information for a single document
• The tag is most often used to link to external style sheets
• The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
• The element is used to define client-side JavaScripts
• The element specifies the base URL and/or target for all relative URLs in a page

HTML head Elements

Tag	Description
	Defines information about the document
	Defines the title of a document
	Defines a default address or a default target for all links on a page
	Defines the relationship between a document and an external resource
	Defines metadata about an HTML document
	Defines a client-side script
	Defines style information for a document

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

HTML Стили

CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

:
Пример: применение стилей к элементу

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

• Внешняя таблица стилей &#8212 определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега .
• Внутренняя таблица стилей &#8212 определение правил таблицы стилей с использованием тега , который обычно располагается в разделе HTML-документа .
• Встроенный стиль &#8212 это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.

Давайте познакомимся со всеми тремя способами на конкретных примерах.

Внешняя таблица стилей

Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles. Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами и :

Пример: Внешняя таблица стилей

Текст первый
Текст второй
Текст третий

      
Текст первый
 
Текст второй
 
Текст третий
   

Внутренняя таблица стилей

Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента , который обычно находится в элементе , но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег позволяет записывать внутри себя код в формате CSS:

Пример: Внутренняя таблица стилей

Заголовок
Текст первый
Текст второй
Текст третий

     body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p 
Заголовок
 
Текст первый
 
Текст второй
 
Текст третий
   

В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen, цвет и тип шрифта для заголовков : color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов

: font-size:20px; color:red; text-align:center.

Встроенный стиль

Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе .

В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:

Пример: Приоритетность стилей

Заголовок
Текст первый
Текст второй
Текст третий

      body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p 
Заголовок
 
Текст первый
 
Текст второй
 
Текст третий
   

Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления.

Задачи

Выравнивание текста по центру

Задача HTML:

      
Это параграф.
  

Цвет фона страницы

Задача HTML:

     body h1 p 
Заголовок
 
Параграф
  

Тип шрифта для страницы

Задача HTML:

     body h1 p 
Заголовок
 
Параграф
  

Внешняя таблица стилей

В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.

Задача HTML:

      
Параграф первый
 
Параграф второй
 
Параграф третий
  

Источник

Атрибут type

Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого атрибута, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера .

Синтаксис

Значения

В качестве значения используется MIME-тип — text/css .

Значение по умолчанию

Обязательный атрибут

Обязателен в HTML4 и XHTML, не нужен в HTML5.

     a:link < color: #003366; >a:visited < color: #660066; >a:hover < color: #800000; >a:active 
Lorem ipsum dolor sit amet
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник