Html что значит: Тег | htmlbook.ru

Содержание

em, px, pt, cm, in…

См. также оглавление со всеми советами.

На этой странице:

em, px, pt, cm, in

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1.2in; margin: 0.5cm), и наоборот.

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

Ре­ко­мен­ду­ютсяМож­но ино­гдаНе ре­ко­мен­ду­ются
Экранem, px, %expt, cm, mm, in, pc
Печатьem, cm, mm, in, pt, pc, %px, ex

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑

72pt

Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

В прошлом CSS требовал, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах. Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные единицы обязаны работать правильно только при выводе на печать и на устройствах высокого разрешения.

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em.

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица

em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица

px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица

px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица

px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in и pc, как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px. Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px, а не pt, cm и т.д.

Используйте

em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела.

Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt, пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt, ни других абсолютных единиц, а использовать только em и px.

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства

(похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px, часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em. Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em: h2 {font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px, всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem. Один rem (от «root em», т. е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em, который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и h2 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

что это такое за язык разметки гипертекста

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

История HTML

Стандарт SGML

История языка разметки HTML начинается в 1986 году, когда Международная организация по стандартизации приняла стандарт SGML, который давал возможность выстраивать системы разметки любых разновидностей текста. Цель создания этого языка заключалась в том, чтобы размеченный текст можно было просматривать и редактировать про помощи разных программ на различных платформах. SGML нельзя назвать готовой системой для разметки текста, поскольку она определяет только правила записи элементов разметки. Технология SGML оказала влияние на множество разработок в компьютерной среде, но сам язык не стал сильно распространен.

Появление и развитие HTML

Британский ученый Тим Бернерс Ли в 1991 году, взяв за основу SGML, разработал технологию передачи гипертекстовой информации через сеть интернет и назвал ее HTML, что значит Hyper Text Markup Language (язык разметки гипертекста).

Первое время HTML соответствовал всем особенностям идеологии языка SGML. Позднее, в 1993 году была разработана новая версия HTML, которая называлась HTML 1.2. В этой версии использовалось более сорока тегов, из которых три тега были не рекомендованы к применению, поскольку они указывали на физические параметры текстового документа, тем самым противореча принципам SGML. Но эта версия по-прежнему была ориентирована на структурную и логическую разметку документа, хотя некоторые теги все же отчасти показывали, как страница будет выглядеть физически.

Серьезные изменения технология HTML получила в 1995 году, когда разработкой этого языка занялась компания W3C, которая представила версию языка 2. 0, а позже и 3.0, ставшую настоящим прорывом. Современные версии HTML во многом основаны именно на третьей версии языка.

HTML — что это за формат

Основным элементом в этом языке разметки являются теги. Теги представляют собой парную (как правило) конструкцию, которая нужна для того, чтобы задать определенные свойства тексту либо каким-то другим информационным данным, находящимся внутри этой конструкции. К примеру, если в тексте мы вставим следующую конструкцию — [b]Я учу HTML [/b], то надпись «Я учу HTML» будет выделена жирным шрифтом. А если мы напишем текст, окружив его конструкцией [font color=»red»]…[/font], то получим текст красного цвета.

HTML редакторы

А теперь поговорим о наиболее распространенных редакторах для работы с HTML.

Adobe Go Live CS

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

Notepad ++

Это неплохой по функционалу текстовый редактор, применять который можно как улучшенную замену стандартного блокнота, а также использовать его как редактор для HTML-страниц. Он поддерживает работу с макросами, проверяет правильность кода и позволяет устанавливать дополнительные плагины. Это приложение особенно будет удобно для новичков, поскольку обладает очень простым и понятным управлением. При этом программа работает с хорошим быстродействием и затрачивает минимум ресурсов ПК.

Aptana

Это достаточно мощное средство для работы с CSS, HTML и JavaScript. Если установить дополнительные плагины, то этот редактор позволяет работать и с другими языками сетевого программирования. У этого приложения очень широкие функциональные возможности, которые позволяют как создавать небольшие лендинг-страницы, так и верстать более серьезные веб-проекты.

Теги – что это такое, значение

В общем понимании слова тег – это метка, размечающая и каталогизирующая информацию для облегчения процесса поиска.

Иными словами, теги – это ключевые слова, по которым можно легко найти нужный материал. Эти слова кратко описывают, о чем этот материал.

Каждый, наверное, замечал, когда в постах в социальных сетях в самом конце (а иногда и в начале или середине) пишется знак решетки #, а после него слово или фраза. Это и есть тег. А если быть точнее, то его разновидность – хештег.

Оставив такую метку в своем посте, другие пользователи смогут легко найти его по данному слову. Достаточно кликнуть по точно такому же хештегу в другой записи или ввести слово в поиске социальной сети.

Но теги применяются не только в социальных сетях. Их также используют программисты для разметки веб-страниц (вы, наверное, слышали о так называемых HTML-тегах) или для каталогизации музыки (здесь роль тега будет исполнять жанр, альбом и т. д.).

Немного истории

Чтобы лучше понять, что означает тег, давайте поговорим немного о его появлении.

Впервые теги возникли во времена, когда люди стали активно использовать интернет для общения и обмена информацией. А если быть точнее, то это были первые зачатки того, что мы называем тегами.

Тогда еще не было социальных сетей. Люди общались на форумах. Общение происходило на разные темы, и каждая из них пользовалась своей популярностью. В тот момент большой надобности в тегах еще не было. Форумы ограничивались лишь разделами, темами и подтемами. Сейчас картина выглядит примерно также.

Но когда в Сети стали появляться первые файлообменники и торрент-трекеры, разработчики поняли, что ограничиваться лишь одними темами и подтемами невозможно. Нужен более мощный инструмент для структурирования данных. Тогда и появились категории – первые прототипы тегов.

Со временем, а именно с появлением социальных сетей, одних лишь категорий стало недостаточно, и появились теги в том виде, в котором мы привыкли их видеть сегодня.

Сегодня теги активно используются именно в социальных сетях. Они позволяют крайне быстро найти нужную информацию по хештегам, оставленным в постах, комментариях или под фото/видео.

Сегодня даже некоторые файлообменники отказываются от использования категорий в пользу системы tags.

Навигация с помощью тегов

Зачастую, просматривая тот или иной материал на страницах веб-ресурса или читая ту или иную статью, вы можете заметить отдельное поле с названием «Метки» или «Теги», в котором расположены слова и фразы, так или иначе связанные с содержимым просматриваемой страницы.

Эти метки еще называются ключевыми словами. Они характеризуют содержимое страницы и позволяют понять, о чем написано в статье, что изображено на фото или что содержится в видео.

Даже сегодня, зайдя на YouTube, под некоторыми роликами, в описании можно найти большой перечень ключевых слов, несмотря на то, что «Ютуб» уже давно использует #хештеги. Авторы оставляют их для того, чтобы видео можно было найти по как можно большему числу запросов.

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

И зачастую веб-мастера создают отдельный блок на сайте с так называемым облаком тегов. В нем отображены все или только наиболее популярные теги, кликнув по которым можно найти соответствующий материал.

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

Задавая теги, веб-мастер облегчает пользователям навигацию по сайту. Метки в основном применяют на крупных ресурсах, когда процесс навигации и поиска нужной информации может затрудниться из-за большого количество материала.

Теги в HTML

Несмотря на то, что теги, используемые в HTML, и теги, употребляемые для навигации по сайту, разные, они призваны решать один и те же задачи, а именно размечать информацию.

В случае с HTML-программированием теги призваны размечать веб-страницу. Поставив тот или иной тег в коде сайта, вы показываете браузеру, как именно необходимо отобразить тот или иной элемент.

Например, вам необходимо написать заголовок для своей статьи. Во-первых, он должен отличаться от всего остального текста визуально (это осуществляется при помощи CSS-стилей), а во-вторых, сам браузер должен понимать, что это заголовок, а не простой текст. Для этого вам необходимо заключить его в тег <h2>.

Помимо <h2>, в HTML-языке есть множество различных тегов, которые выполняют ту или иную функцию.

С точки зрения простого посетителя сайта теги, размечающие страницы веб-ресурсов, не имеют практического применения. Он их не видит, он не может с ними взаимодействовать. HTML-теги больше предназначены для браузеров (чтобы те корректно отображали информацию) и для поисковых систем (чтобы те знали, о чем страница, и показывали при соответствующих запросах в поиске).

Например, тег <Title> и вовсе ничего не отображает. Его содержимое скрыто от людей. Но зато его видят поисковые роботы и учитывают указанную в нем информацию при ранжировании страниц.

Все теги для разметки веб-страниц заключены в треугольные скобки. Именно по ним браузер и определяет, что это tag, и в зависимости от его содержимого совершает те или иные действия.

HTML-теги обычно представлены двумя элементами: открывающим и закрывающим. Например, <h2> … </h2>. Но есть и такие, которые состоят только из закрывающего тега. Иногда содержимое может помещаться между открывающим и закрывающим тегами, а иногда внутри треугольных скобок.

Как видите, HTML-теги – это довольно обширная тема. Ее необходимо изучать отдельно и одной статьи для этого будет недостаточно.

Теги в музыке

Еще один вид тегов – это музыкальные tags. Они содержат в себе всю важную и не очень важную информацию о треке:

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

Обычно это происходит при редактировании тегов. А редактируют их часто, так как сегодня к авторским правам относятся довольно внимательно. Причем тут авторские права? Да все просто.

Зачастую авторы известных песен блокируют к ним доступ на всех ресурсах. Причины могут быть разными, вдаваться в подробности не станем. Так вот, чтобы найти все свои песни в интернете, как раз и используются прописанные в них теги. Ну а те, кто занимается распространением недоступной музыки, переписывают теги специально, чтобы аудиофайлы нельзя было найти. Вот и получается, что порой вместо названий нам предлагаются непонятные символы.

Как видите, даже в музыке теги используются в качестве ключевых слов для дальнейшего поиска композиций. Но иногда, помимо текстовых, в аудиозаписях можно услышать и голосовые теги. Особенно часто это встречается в рэп-композициях. Исполнитель представляет себя, людей, причастных к созданию трека, иногда может дать дополнительную информацию (например, кому посвящается) и т. д.

Социальные сети

Ну и наиболее распространенное применение теги нашли в социальных сетях. Там они позволяют связывать информацию и посты, опубликованные разными пользователями.

Теги активно используются в следующих соцсетях:

Но порой в социальных сетях замечается злоупотребление хештегами. Люди начинают использовать их не для обозначения важной информации или для того, чтобы другие смогли по заданным ключевым словам найти пост. Они просто добавляют их, причем в больших количествах, тем самым замусоривая пост.

Конечно, в большинстве случаев по таким тегам никто информацию не ищет. Но в соцсетях есть и другие примеры, где хештегам нашли отличное применение.

Например, известный паблик или личность устраивает конкурс. Что-то наподобие «Оставьте такой-то комментарий, самый интересный и креативный выиграет приз». Чтобы не запутаться во множестве различных комментариев, автор просит подписчиков помечать комментарии определенным хештегом (например, #конкурс). В дальнейшем, когда будут подводиться итоги конкурса, автор легко сможет отфильтровать все комментарии, оставив только нужные.

Также, если пользователя интересует определенная новость, помеченная уникальным тегом (например, #выборы2018), нажав на него или введя его в поиск, он сможет найти все посты на эту тему.

Базовая структура HTML документа | Основы современной вёрстки

Как театр начинается с вешалки, так и любой HTML-документ начинается с базовой структуры. Она включает в себя теги, которые есть в любом HTML-файле. Эти теги и служебная информация нужны браузеру для корректного отображения информации.

Взглянем на базовую структуру любого HTML-документа:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>

</body>
</html>

Этот набор кажется не очень большим, но браузеру он сообщает множество полезной информации. В этом уроке разберёмся с каждой строчкой этой структуры.

DOCTYPE

Первая конструкция в любом HTML-документе — элемент DOCTYPE. Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:

<!DOCTYPE html>

С приходом стандарта HTML5 элемент DOCTYPE немного упростился. Если вы встретитесь с сайтами, созданными пять-десять лет назад, то сможете увидеть совершенно другие записи. Они были больше и напрямую влияли на то, как браузер обработает информацию. Неправильное указание элемента DOCTYPE могло привести к некорректному отображению. Сейчас такой проблемы нет, поэтому вы можете без всяких опасений использовать конструкцию, которая указана в данном уроке. Использование старых значений DOCTYPE необходимо только при разработке с поддержкой очень старых браузеров.

Парный тег html

Тег <html></html> является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.

Важной частью тега html является наличие атрибута lang. В нём указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS, с которым вы познакомитесь в следующих уроках. В новых стандартах CSS появляются свойства, которые опираются на данный атрибут. Например, позволяют корректно переводить слова в тексте.

В качестве значения атрибут lang принимает знакомые всем сокращения языков. Для русского — ru, для английского — en, для немецкого — de.

Парный тег head

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

Любые данные, которые указаны внутри тега head, не видны при отображении страницы в браузере. Это значит, что нет необходимости располагать там информацию, которая предназначена для отображения.

Хоть различной информации внутри head может быть множество, в этом уроке разберём несколько основных тегов, которые пригодятся при создании любой веб-страницы:

Метаинформация

Метатег <meta>. Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег <meta> с атрибутом charset. Он позволяет установить кодировку документа.

Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков является кодировка UTF-8. Именно её рекомендуется устанавливать в качестве значения атрибута charset. Теперь браузер будет отображать все символы именно в этой кодировке.

<meta charset="UTF-8">

Заголовок страницы

На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной вёрстки» вкладка в браузере Google Chrome выглядит следующим образом:

Для указания заголовка страницы используется специальный парный тег <title></title>, внутри которого указывается нужная информация.

<title>Моя первая страница</title>

Тело документа

После тега head в документе указывается парный тег <body></body>, который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.

Используем один из примеров прошлого урока и добавим все недостающие теги.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

Чтобы полностью соответствовать всем стандартам HTML, добавим необходимую базовую структуру документа.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>
  <header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li><a href="/contacts">Контакты</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

Хоть данный набор и является основным, но на самом деле браузеры могут обработать HTML-информацию и без базовой структуры документа. Но не стоит отдавать всё на откуп браузеру. Он постарается автоматически обернуть контент в body, добавит современный DOCTYPE, но при этом нет уверенности в том, что всё это он добавит корректно.

Дополнительное задание

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


Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Понимание семантики — CSS-LIVE

Перевод статьи Understanding semantics с сайта tink.uk, опубликовано на css-live.ru с разрешения автора — Леони Уотсон.

Слово «семантический» уже слилось с веб-разработкой. Мы произносим «семантический код» и «семантика» элемента, но что это значит на самом деле и почему так важно?

Слово семантика происходит от французского «semantique» — «несопоставимый». А в английском у него есть три значения:

  1. значение слов или что-то, к нему относящееся;
  2. код, предназначенный для отражения структуры и смысла;
  3. мелкие или незначительные детали.

Нам подходит второе определение. У семантического кода есть структура и значение, и оба они по-своему важны.

Структура

При написании HTML мы задаём структуру контента. Определяем всякие абзацы, списки, таблицы и заголовки. Писать семантический код — значит уметь подобрать правильный элемент для определения нужной структуры. Совместимость от этого тоже выигрывает.

У каждого элемента есть свои общепризнанные значение и функция. Например, тег <p> отвечает за абзац статического текста, элемент <a> — интерактивный и может загрузить новый ресурс. Не будь оно общепризнанным, браузеры не смогли бы определить оформление и функциональность по умолчанию для многих элементов.

Смысл

HTML также задёт смысл контента. У большинства HTML-элементов есть неявная роль, определяющая назначение элемента. Например, неявная роль элемента <a> — «ссылка», у <img> — «графика» или «изображение», а у <header> — это «баннер».

Демонстрации

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

<a href="http://tink.uk">Tink UK</a>

Пример HTML-контента выше распознаётся скринридером, как ссылка на этот сайт. Скринридер видит, что роль элемента «ссылка», берёт её текстовое содержание, даёт ссылке доступное имя, и после преобразует эту информацию в синтетическую речь. Вот демо HTML-ссылки в скринридере, показывающее, как используется эта информация.

Сравните это с псевдоссылкой в коде ниже.

<span>Tink UK</span>

Для браузера это не ссылка, поэтому он не предоставляет никакого ожидаемого поведения (оформление как у ссылки предоставляется с помощью CSS). Элемент <span> семантически нейтральный, поэтому у него нет неявной роли, полезной в этом контексте. Это демо псевдоссылки в скринридере показывает недостающую информацию.

Можно использовать JavaScript, ARIA и CSS, чтобы восполнить недостающую семантическкую информацию и предоставить некоторое (но не всё) оформление и поведение, связанное с элементом <a>. Это требует гораздо больше кода и усилий, и обычно приводит к крайне хрупкой реализации по сравнению со стандартным HTML-элементом для ссылки.

Поэтому семантика HTML имеет двоякое значение: она дает нам единообразное понимание структуры контента и стандартное поведение, а также делает смысл и назначение контента понятным для всех. А самое главное, при правильном использовании HTML нам всё это даётся даром.

P.S. Это тоже может быть интересно:

Элемент DOCTYPE. Что это такое и зачем он нужен : WEBCodius

Приветствую Вас, уважаемые читатели! Сегодня короткий материал о специальном теге doctype. В статье вы узнаете что такое doctype, зачем он нужен и какие бывают версии html-документов.

В любом правильном html-документе, первым элементом в коде идет специальная директива <!DOCTYPE>

Что такое DOCTYPE и зачем он нужен

Элемент <!doctype> — DTD (document type definition, описание типа документа) указывает тип документа, который используется при написании html кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.

Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.

Поэтому если вы хотите, чтобы ваш сайт отображался одинаково красиво и ровно во всех популярных браузерах, то обязательно указывайте эту директиву с версией языка html, которую вы используете. Причем doctype следует указывать с общепринятыми правилами. 

Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, то браузер перейдет в хитрый режим уловок — quirks mode. И возможно странички вашего сайта отобразятся правильно в каких-то браузерах, но не факт, что они будут выглядеть также аккуратно в других популярных браузерах.

Основные типы документов

Ниже приведены основные типы документов:

DOCTYPEОписание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>Строгий синтаксис HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>Переходный синтаксис HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>В HTML-документе применяются фреймы
HTML 5
<!DOCTYPE html> 
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>Строгий синтаксис XHTML
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>Переходный синтаксис XHTML
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>XHTML-документе применяются фреймы
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> 

 Пример использования doctype для HTML5:

<!DOCTYPE html>
<html>
  <head>
    <title>Страничка на HTML5</title>
  </head>
  <body>
    <p>Содержимое странички</p>
  </body>
</html>

При выборе вида doctype следует иметь ввиду, что если вы пишите свой сайт в одном doctype, то не рекомендуется менять его в будущем на какой-то другой, так как скорей всего возникнут проблемы с правильным отображением сайта в различных браузерах, так как со сменой doctype вы поменяете правила обработки тегов браузерами.

Таким образом указав doctype вы указываете браузерам по каким правилам обрабатывать ваш html-код. Если же doctype не указать, то соответственно различные браузеры будут интерпретировать ваши теги по разному и следовательно отображение вашего сайта в некоторых браузерах скорей всего будет не корректным.

Какой doctype использовать?

Выбрать какой doctype использовать стало проще с выходом последней версии HTML5. Так как doctype html5 включает в себя правила предыдущих версий и возможность работы с тегами html4.

Поэтому при выборе вида doctype я рекомендую выбирать пятую версию html и в первой строчке своих страничек ставить:

<!DOCTYPE html>

Вывод

Подведем итоги:

  • DOCTYPE — это элемент, который указывает тип документа и определяет правила по, которым браузер будет обрабатывать ваш html-код;
  • элемент doctype всегда должен быть размещен в первой строчке документа;
  • всегда указывайте doctype, иначе ваши странички могут отображаться некорректно;
  • если не знаете какой doctype использовать, указывайте doctype html5: <!doctype html>.

На этом все, желаю вам успехов! До новых встреч!

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

Зачем понимать исходный код

Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса. 

Зная, как устроен исходный код, вы сможете:

  • Больше понимать в SEO-продвижении.

Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.

Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.

  • Анализировать сайты конкурентов на более глубоком уровне.

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

  • Составлять грамотные ТЗ для разработчика самостоятельно.

Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.

  • Лучше понимать программистов.

Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта. 

  • Экономить, самостоятельно внося изменения в сайт.

Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.

Что такое исходный код сайта

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

Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.

Как посмотреть код любого сайта

Расскажем, как посмотреть исходный код страницы в браузере Google Chrome. В остальных браузерах этот процесс примерно такой же.

Код вызывается одной из комбинаций:

  • комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:

HTML Tag »

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее
Элемент
Структура HTML-документа до и после HTML5 — вот что изменилось
Что делает
HTML Tag ?
Элемент
используется для обозначения содержимого веб-страницы, которое относится к центральной теме этой страницы или приложения. Он должен включать контент, который является уникальным для этой страницы, и не должен включать контент, который дублируется на нескольких веб-страницах, например верхние и нижние колонтитулы и основные элементы навигации.
Дисплей
встроенный
Использование
семантический | структурный

Структурирование вашего HTML-документа

Элемент

— это структурный и семантический элемент, определяющий основной раздел страницы, на котором отображается содержимое. Подобные элементы включают
, который обозначает статью в файле HTML, и