home mail РА Европа
  • Новости

    • Категории

    mail

    Главная › Новости

    Что такое семантика и как это относится к HTML?

    Опубликовано: 06.09.2018

    видео Что такое семантика и как это относится к HTML?

    HTML5.1 для начинающих. Урок 3. Какие бывают сайты. Их структура



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

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


    Фильтр Баден-Баден: что это такое и зачем он нужен | SEMANTICA

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

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

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

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

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

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

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

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

    А теперь вопрос, можем ли мы заголовок на веб-странице, заключить в тег абзаца?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    abbr { color :red ;}

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

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

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

    Дело ваше!

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

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

    По настоящему хорошие результаты и заставить ваши веб-страницы приносить деньги может только e-mail рассылка. Подтверждение этому  здесь .

    Не откладывайте ее создание в “дальний ящик”, чем быстрее вы это сделаете, тем лучше.

    rss