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

Понятие семантической верстки

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

Как достигнуть семантики кода?

Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый из них уникален. Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:

• Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не B и STRONG.
• При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются пункты второй вложенности, соответственно создаем внутри первичного LI элемента еще один UL список.
• Все служебные картинки (иконки, стрелки, пульки…) должны быть прописаны в CSS коде. В HTML, тег IMG должен использоваться только для больших картинок. Большие, понятие растяжимое, скажем так, начиная с превьюшек 100 x 100 и выше.
• Параграф блока текста создается с помощью P тега, но никак не DIV.
• Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
• То же самое по поводу JavaScript.
• Соблюдать иерархию и логику документа. Более важные элементы страницы должны стоять в начале HTML кода, менее в конце. С помощью CSS стилей и DIV блоков, этого достичь не сложно, при любой схеме шаблона.
• Может быть, еще что-то забыл… если да, поправьте меня в комментариях к статье.

Для большей ясности сути вопроса, смотрите схему семантической разметки текста:

Семантическая верстка на практике - примеры HTML + CSS кода

Теперь закрепим все эти принципы семантической верстки на практике. Будем разбирать конкретные ситуации.

Удаляем ненужные div теги

Я видел, что многие люди создают div тег около form или ul. Зачем создавать дополнительный div, который вам не нужен? Вы можете достичь такого же результата, дописав несколько указаний в CSS файле.

Пример 1:

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

Пример 2:

Иногда мы обвертываем контент в div блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h4, мы можем просто применить margin отступ к h4 селектору и убрать лишний div тег.

Используем семантическую разметку кода

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

Пример:

Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.

Минимизируем использование div тегов

Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.

Пример 1:

Вместо использования div для создания навигационного пути, можно использовать p тег.

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

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

Что такое семантика кода ?

Семантика (с лингвистической точки зрения) – это смысл, информационное содержание языка или отдельной его единицы.

Как мы знаем, структурными единицами языка HTML являются теги, они и являются теми самими отдельными единицами, которые несут смысл, информационное содержание.

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

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

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

Т.е. заголовки в тексте заключались бы в теги h 1-h 6, абзацы в теги p , списки в теги ul /ol (li ) и.т.д.

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

А теперь вопрос, можем ли мы заголовок на веб-странице, заключить в тег абзаца?
А почем нет? Конечно, можем. Многие скажут, но ведь при этом мы теряем оформление, которое имеют заголовки h 1-h 6. Но, на самом деле, оформление здесь никакой роли не играет. С помощью стилей CSS , мы можем присвоить любому абзацу точно такое же оформление, которое было у элемента h 1-h 6.

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

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

Поэтому, прежде чем заключать элемент в какой-либо тег, желательно подумать, а какую функцию, смысл он несет на странице?

Возникает логичный вопрос, а зачем в таком случае вообще нужна семантика кода?

Зачем заголовки делать заголовками, абзацы делать абзацами, аббревиатуры делать аббревиатурами и.т.д.?

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

1) Информацию о том, как браузеру по умолчанию отображать тот или иной элемент на странице;

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

2) Семантический код лучше читается и воспринимается поисковыми системами;

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

2) Код более понятный для человека;

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

3) Проще получить доступ к элементу и как следствие большая гибкость.

Делая код семантическим, вы сможете намного проще обращаться к этим элементам с помощью специальных средств, которые работают с элементами на веб-страницах, например, языки CSS , Javascript и др.

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

abbr {color :red ;}

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

Это всего лишь один пример, которых можно привести массу.

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

Дело ваше!

Вы должны сами для себя принять это решение.

4.1. Основы шифрования

Сущность шифрования методом замены заключается в следующем . Пусть шифруются сообщения на русском языке и замене подлежит каждая буква этих сообщений. Тогда, букве А исходного алфавита сопоставляется некоторое множество символов (шифрозамен) М А, Б – М Б, …, Я – М Я . Шифрозамены выбираются таким образом, чтобы любые два множества (М I и М J , i ≠ j ) не содержали одинаковых элементов (М I ∩ М J = Ø ).

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

Рис.4.1. Таблица шифрозамен

При шифровании каждая буква А открытого сообщения заменяется любым символом из множества М А . Если в сообщении содержится несколько букв А , то каждая из них заменяется на любой символ из М А . За счет этого с помощью одного ключа можно получить различные варианты шифрограммы для одного и того же открытого сообщения. Так как множества М А, М Б, ..., М Я попарно не пересекаются, то по каждому символу шифрограммы можно однозначно определить, какому множеству он принадлежит, и, следовательно, какую букву открытого сообщения он заменяет. Поэтому расшифрование возможно и открытое сообщение определяется единственным образом.

Приведенное выше описание сущности шифров замены относится ко всем их разновидностям за исключением , в которых для зашифрования разных символов исходного алфавита могут использоваться одинаковые шифрозамены (т.е. М I ∩ М J ≠ Ø , i ≠ j ).

Метод замены часто реализуется многими пользователями при работе на компьютере. Если по забывчивости не переключить на клавиатуре набор символов с латиницы на кириллицу, то вместо букв русского алфавита при вводе текста будут печататься буквы латинского алфавита («шифрозамены»).

Для записи исходных и зашифрованных сообщений используются строго определенные алфавиты. Алфавиты для записи исходных и зашифрованных сообщений могут отличаться. Символы обоих алфавитов могут быть представлены буквами, их сочетаниями, числами, рисунками, звуками, жестами и т.п. В качестве примера можно привести пляшущих человечков из рассказа А. Конан Дойла () и рукопись рунического письма () из романа Ж. Верна «Путешествие к центру Земли».

Шифры замены можно разделить на следующие подклассы (разновидности).

Рис.4.2. Классификация шифров замены

I. Регулярные шифры. Шифрозамены состоят из одинакового количества символов или отделяются друг от друга разделителем (пробелом, точкой, тире и т.п.).

Лозунговый шифр. Для данного шифра построение таблицы шифрозамен основано на лозунге (ключе) – легко запоминаемом слове. Вторая строка таблицы шифрозамен заполняется сначала словом-лозунгом (причем повторяющиеся буквы отбрасываются), а затем остальными буквами, не вошедшими в слово-лозунг, в алфавитном порядке. Например, если выбрано слово-лозунг «ДЯДИНА», то таблица имеет следующий вид.

Рис.4.4. Таблица шифрозамен для лозунгового шифра

При шифровании исходного сообщения «АБРАМОВ» по приведенному выше ключу шифрограмма будет выглядеть «ДЯПДКМИ».

Полибианский квадрат. Шифр изобретен греческим государственным деятелем, полководцем и историком Полибием (203-120 гг. до н.э.). Применительно к русскому алфавиту и индийским (арабским) цифрам суть шифрования заключалась в следующем. В квадрат 6х6 выписываются буквы (необязательно в алфавитном порядке).

Рис.4.5. Таблица шифрозамен для полибианского квадрата

Шифруемая буква заменяется на координаты квадрата (строка-столбец), в котором она записана. Например, если исходное сообщение «АБРАМОВ», то шифрограмма – «11 12 36 11 32 34 13». В Древней Греции сообщения передавались с помощью оптического телеграфа (с помощью факелов). Для каждой буквы сообщения вначале поднималось количество факелов, соответствующее номеру строки буквы, а затем номеру столбца.

Таблица 4.1. Частота появления букв русского языка в текстах

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

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

4.3. Полиграммные шифры

Полиграммные шифры замены - это шифры, в которых одна шифрозамена соответствует сразу нескольким символам исходного текста.

Биграммный шифр Порты . Шифр Порты, представленный им в виде таблицы, является первым известным биграммным шифром. Размер его таблицы составлял 20 х 20 ячеек; наверху горизонтально и слева вертикально записывался стандартный алфавит (в нем не было букв J, К, U, W, X и Z). В ячейках таблицы могли быть записаны любые числа, буквы или символы - сам Джованни Порта пользовался символами - при условии, что содержимое ни одной из ячеек не повторялось. Применительно к русскому языку таблица шифрозамен может выглядеть следующим образом.

Рис.4.10. Таблица шифрозамен для шифра Порты

Шифрование выполняется парами букв исходного сообщения. Первая буква пары указывает на строку шифрозамены, вторая - на столбец. В случае нечетного количества букв в исходном сообщении к нему добавляется вспомогательный символ («пустой знак»). Например, исходное сообщение «АБ РА МО В», зашифрованное – «002 466 355 093». В качестве вспомогательного символа использована буква «Я».

Шифр Playfair (англ. «Честная игра»). В начале 1850-х гг. Чарлз Уитстон придумал так называемый «прямоугольный шифр». Леон Плейфер, близкий друг Уитстона, рассказал об этом шифре во время официального обеда в 1854 г. министру внутренних дел лорду Пальмерстону и принцу Альберту. А поскольку Плейфер был хорошо известен в военных и дипломатических кругах, то за творением Уитстона навечно закрепилось название «шифр Плейфера».

Данный шифр стал первым буквенным биграммным шифром (в биграммной таблице Порты использовались символы, а не буквы). Он был предназначен для обеспечения секретности телеграфной связи и применялся британскими войсками в Англо-бурской и Первой мировой войнах. Им пользовалась также австралийская служба береговой охраны островов во время Второй мировой войны.

Шифр предусматривает шифрование пар символов (биграмм). Таким образом, этот шифр более устойчив к взлому по сравнению с шифром простой замены, так как затрудняется частотный анализ. Он может быть проведен, но не для 26 возможных символов (латинский алфавит), а для 26 х 26 = 676 возможных биграмм. Анализ частоты биграмм возможен, но является значительно более трудным и требует намного большего объема зашифрованного текста.

Для шифрования сообщения необходимо разбить его на биграммы (группы из двух символов), при этом, если в биграмме встретятся два одинаковых символа, то между ними добавляется заранее оговоренный вспомогательный символ (в оригинале – X , для русского алфавита - Я ). Например, «зашифрованное сообщение» становится «за ши фр ов ан но ес оЯ об ще ни еЯ ». Для формирования ключевой таблицы выбирается лозунг и далее она заполняется по правилам шифрующей системы Трисемуса. Например, для лозунга «ДЯДИНА» ключевая таблица выглядит следующим образом.

Рис.4.11. Ключевая таблица для шифра Playfair

Затем, руководствуясь следующими правилами, выполняется зашифровывание пар символов исходного текста:

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

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

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

Пример шифрования.

Биграмма «за» формирует прямоугольник – заменяется на «жб»;

Биграмма «ши» находятся в одном столбце – заменяется на «юе»;

Биграмма «фр» находятся в одной строке – заменяется на «хс»;

Биграмма «ов» формирует прямоугольник – заменяется на «йж»;

Биграмма «ан» находятся в одной строке – заменяется на «ба»;

Биграмма «но» формирует прямоугольник – заменяется на «ам»;

Биграмма «ес» формирует прямоугольник – заменяется на «гт»;

Биграмма «оя» формирует прямоугольник – заменяется на «ка»;

Биграмма «об» формирует прямоугольник – заменяется на «па»;

Биграмма «ще» формирует прямоугольник – заменяется на «шё»;

Биграмма «ни» формирует прямоугольник – заменяется на «ан»;

Биграмма «ея» формирует прямоугольник – заменяется на «ги».

Шифрограмма – «жб юе хс йж ба ам гт ка па шё ан ги».

Для расшифровки необходимо использовать инверсию этих правил, откидывая символы Я (или Х ), если они не несут смысла в исходном сообщении.

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

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

Рис.4.17. Таблица Трисемуса

Первая строка является одновременно и алфавитом для букв открытого текста. Первая буква текста шифруется по первой строке, вторая буква по второй и так далее. После использования последней строки вновь возвращаются к первой. Так сообщение «АБРАМОВ» приобретет вид «АВТГРУЗ».

Система шифрования Виженера. В 1586 г. французский дипломат Блез Виженер представил перед комиссией Генриха III описание простого, но довольно стойкого шифра, в основе которого лежит таблица Трисемуса.

Перед шифрованием выбирается ключ из символов алфавита. Сама процедура шифрования заключается в следующем. По i-ому символу открытого сообщения в первой строке определяется столбец, а по i-ому символу ключа в крайнем левом столбце – строка. На пересечении строки и столбца будет находиться i-ый символ, помещаемый в шифрограмму. Если длина ключа меньше сообщения, то он используется повторно. Например, исходное сообщение «АБРАМОВ», ключ – «ДЯДИНА», шифрограмма – «ДАФИЪОЁ».

Справедливости ради, следует отметить, что авторство данного шифра принадлежит итальянцу Джованни Батиста Беллазо, который описал его в 1553 г. История «проигнорировала важный факт и назвала шифр именем Виженера, несмотря на то, что он ничего не сделал для его создания» . Беллазо предложил называть секретное слово или фразу паролем (ит. password; фр. parole - слово).

В 1863 г. Фридрих Касиски опубликовал алгоритм атаки на этот шифр, хотя известны случаи его взлома шифра некоторыми опытными криптоаналитиками и ранее. В частности, в 1854 г. шифр был взломан изобретателем первой аналитической вычислительной машины Чарльзом Бэббиджем, хотя этот факт стал известен только в XX в., когда группа ученых разбирала вычисления и личные заметки Бэббиджа . Несмотря на это шифр Виженера имел репутацию исключительно стойкого к «ручному» взлому еще долгое время. Так, известный писатель и математик Чарльз Лютвидж Доджсон (Льюис Кэрролл) в своей статье «Алфавитный шифр», опубликованной в детском журнале в 1868 г., назвал шифр Виженера невзламываемым. В 1917 г. научно-популярный журнал «Scientific American» также отозвался о шифре Виженера, как о неподдающемся взлому .

Роторные машины. Идеи Альберти и Беллазо использовались при создании электромеханических роторных машин первой половины ХХ века. Некоторые из них использовались в разных странах вплоть до 1980-х годов. В большинстве из них использовались роторы (механические колеса), взаимное расположение которых определяло текущий алфавит шифрозамен, используемый для выполнения подстановки. Наиболее известной из роторных машин является немецкая машина времен Второй мировой войны «Энигма» .

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

Рис.4.19. Роторная система Энигмы [www.cryptomuseum.com ]

Шифрующее действие «Энигмы» показано для двух последовательно нажатых клавиш - ток течёт через роторы, «отражается» от рефлектора, затем снова через роторы.

Рис.4.20. Схема шифрования

Примечание. Серыми линиями показаны другие возможные электрические цепи внутри каждого ротора. Буква A шифруется по-разному при последовательных нажатиях одной клавиши, сначала в G , затем в C . Сигнал идет по другому маршруту за счёт поворота одного из роторов после нажатия предыдущей буквы исходного сообщения.

3. Дайте характеристику разновидностям шифров замены.

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

Что такое семантический код?

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

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

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

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

Это заголовок

Внешний вид заголовка может быть определен в отдельном файле, который называется “каскадные таблицы стилей” (CSS), при этом не вмешиваясь в ваш описательный (семантический) код HTML.

Чем важен семантический код?

Возможность компьютера правильно распознавать контент важно по нескольким причинам:

• Многие слабовидящие люди полагаются на речевые браузеры для чтения страниц. Такие программы не смогут точно интерпретировать страницы, если они не были четко разъяснены. Другими словами, семантический код служит средством доступности.
• Поисковые системы должны понимать о чем ваш контент, для того чтобы правильно ранжировать вас в поисковиках. У семантического кода есть репутация по улучшению ваших размещений в поисковых системах, так как его легко понимают “поисковые роботы”.

Также у семантического кода есть и другие преимущества:

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

Как убедиться в том, что веб-сайт использует семантический код?

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