Как правильно говорить на HTML

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

Понимание семантики

Чтоб познакомится с термином “семантика“ мы предоставим вам пример, который нашли в интернете (но не помним где, потому не можем скинуть ссылку на него). У фразы Я люблю Москву есть довольно понятное прямое значение. Если вы замените слово любовь одним из похожих выражений проявлений чувств, предложение изменится, но значение останется тем же. Итак, предложения Я люблю Москву и Я (обожаю) Москву имеют одинаковое семантическое значение.

Валидация(validation) и семантика

Когда мы говорим о web-стандартах, все важно. Поэтому семантически корректный код намного важнее, чем действительный проверенный(valid) код, по крайней мере, до тех пор, пока вы не будете делать огромные ошибки в структуре кода. То есть, мы бы предпочли видеть вас, использующими надлежащую структуру заголовка а не задающими атрибуты cols и rows в textarea. Люди становятся настолько озабочены валидацией, что забывают, что это только один шаг к web-стандартам.

Говорим правильно на HTML

В HTML много тэгов и у каждого есть свое значение или назначение. Первым шагом к обучению на HTML будет знакомство со всеми его тегами(tags). Так же, как и при изучении иностранного языка, количество выученных вами разных слов и фраз, определяют, каким красноречивым вы можете быть. Мы сказали: «Можете быть", — потому, что знание всех этих тэгов само по себе ничего не гарантирует.

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

• p – абзац (paragraph)
• em – курсив (emphasis)
• div – отдел (division)
• td – табличные данные (table data)
• th – заголовки таблицы (table header)

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

Как правильно составлять HTML разметку на основе содержания?

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

но не так

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

Так что используйте div только для структурирования документа, а не для форматирования текста.

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

Для списков используйте один из трех форматов: нумерованный список ol, ненумерованный список ul и список определений (definition list). Если у вас есть сомнения насчет использования нумерованных или ненумерованных списков, имейте в виду, что нумерованный имеет возрастающий порядок (1,2,3...). Так что, если вы хотите показать наиболее значимый элемент списка (упорядоченного по убыванию) наверху, тогда нумерованный список не лучший выбор.

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

Один шаг вперед

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

Предложение:

может выглядеть намного лучше и означать намного больше, если сделать так:

Другой пример:

против

Говорите, не бойтесь

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

P.S.: А вы уже успели купить себе apple iphone 6 цена и качество в этом магазине вас приятно удивят.