Основы HTML
Тут объясняются общие термины и понятия которые необходимы чтобы читать HTML разметку.
Основное понятие в HTML это тег. Чтобы понять что перед нами тег или нет нужно найти символ знака меньше “<” за этим знаком должно следовать “название тега”, затем идут “атрибуты тега” и знак больше “>”. Кажется что этого должно быть достаточно чтобы понять что перед нами HTML тег, но тут могут бы непонятны термины. Попробуем в них разобраться.
Название
В принципе название тега может состоять из любых символов, но если хочется что бы разметка соответствовала стандартам HTML важно чтобы символы из которых состоит его название были в диапазонах U+0030 DIGIT ZERO (0) - U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z. Интересно что современные браузеры сегодня привносят свои ограничения и дозволенности. Например название тега не может начинаться с цифры. Но в тоже время вы можете назвать тег a-💩-1 и он вполне себе будет валидным в некоторых браузерах.
Как видно из диапазонов выше название тега можно писать как большими буквами так и маленькими, в том числе часть название можно написать маленькими буквами, а часть большими. Во всех случаях выше по стандарту браузер должен интерпретировать это как один тег. Такое поведение будем называть регистронезависимостью.
Атрибуты
Это текстовая пара названия - значение. Они следуют сразу после названия тега. Название и значение атрибутов можно писать как оно есть.
|
|
Тут все также особо ограничений нет но есть небольшие нюансы с первой цифрой. Но важно заметить что название атрибута так-же регистро независимое. Но браузер в конечном итоге преобразует выражение выше в:
|
|
Тут видно что появились кавычки. Это нужно чтобы избежать проблем с определением где заканчивается значение атрибута и начинается название нового. Поэтому лучше всегда писать значение атрибутов в кавычках. Например:
|
|
Будет интерпретировано как
|
|
Также на этом примере видно что у тега может быть сколько угодно атрибутов. Когда их их много эти пары ключ значение разделяются пробелом.
По стандарту на содержимое названия накладываются ограничения оно не может содержать следующих символов “пробельные символы”, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE (’), U+003E GREATER-THAN SIGN (>), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) и это вполне логично. Пример самые популярные атрибуты: class, id, href, src
Типы
Есть теги внутри которых подразумевается какое то содержимое назовем их “обычные” например div, p, a. Так же есть теги полезная нагрузка которых заключена в их присутствии или же в их атрибутах назовем их “короткие”, например img, tr, hr, br …
Мы фокусируемся здесь на чтении по этому я выделил эти типы по способу их написания. Благодаря этому знанию теперь мы можем понимать как читать теги целиком. Примеры
|
|
Простой тег div с атрибутом id равным единице, содержащий “Текст”. Видно что у обычных тегов после содержимого есть закрывающая часть которая содержит символ слеш “/” и название того тега что закрывается.
|
|
Короткий тег img с атрибутом src равным my.png. Тут мы так же видим символ слеша “/” но в этом случае он стоит перед закрывающим знаком больше “>”. Важно заметить так же что слеш для коротких тегов не обязателен.
Отношения
Теги между собой могут состоять в различных отношениях. Разберем на примерах
|
|
Теги следуют друг за другом. Иногда можно услышать что англоязычное сиблинги
|
|
Здесь тег li вложен в тег ul или же тег ul оборачивает тег li. Так же имеется терминология где li является дочерним к ul или ul это родительский элемент для li, li является ребенком ul элемента.
Семантика
Веб развивался очень стремительно и роль языка разметки как не странно тоже менялась. HTML существовал за долго до появления таких мощных технологий и языков как CSS и JavaScript. В своих истоках он решал абсолютно все задачи и поэтому был не очень удобный. Можно например вспомнить историю тега FONT который целиком и полностью решал задачи CSS. Еще в давние времена одновременно существовало и развивалось несколько параллельных стандартов и в этом нам когда-то помогал тег !DOCTYPE который сохранился и по сей день, для совместимости.
К счастью времена изменились зона ответственности языка разметки сильно сузилась. Сегодня HTML разметка нужна в основном как каркас для описания сущностей на странице. То есть на уровне разметки довольно абстрактно описывается ее содержимое. На этой простой мысли построены гигантские бизнесы, которые занимаются поиском в интернете.
Разметка это на что в первую очередь смотрят поисковые роботы корпораций. Но это конечно не основной принцип выбора тегов для описания той или иной сущности на странице.
Главный способ понять какие же теги выбрать для создания страниц заключается в том что нужно знать как их интерпретирует браузер. В интернетах существует множество справочников в которых есть полные списки тегов и описанием их работы в браузере. Например в россии очень популярен ресурс htmlbook из зарубежных w3schools
Пользуемся справочниками
Например вы увидели не знакомый тег table и не можете понять как им пользоваться. Первое что можно сделать перейти на сайт справочника и попытаться найти его там по названию
На изображении видно что такой тег действительно существует. Далее нужно нажать на иконку линзы. После чего мы окажемся на странице с описанием тега. Там же можно задать вопрос по интересующей вас теме в комментариях.
Играем в песочнице
Еще один способ попробовать выяснить поведение того или иного тега в браузере это написать его в песочнице. Это целый класс сервисов в интернете которые позволяют любому пользователю в том числе и анонимному писать и выполнять у себя в браузере произвольный HTML код На мой взгляд самыми популярными сейчас являются codepen jsfiddle и jsbin
В принципе эти сервисы работают примерно одинаково в левой части исходный код в правой результат интерпретации разметки браузером
Далее поговорим о встраивании технологии CSS на свои сайты