Как правильно говорить на 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) и написать разметку, которая будет ему соответствовать.

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

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

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

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

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

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

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

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

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

1<p>Я стараюсь лучше узнать CSS.</p>

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

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