Так что же всё-таки такое семантика?

Семантика в HTML
image_pdfimage_print

Доброго времени суток, друзья! Сегодня мы поговорим о понятии семантика в языке гипертекстовой разметки (HTML). Подробнее об определении HTML мы обсуждали в начале этой статьи. Эта статья раскрывает только одну грань работы с HTML, если после прочтения статьи вы захотите более подробно познакомиться с работой в HTML, то в конце статьи я оставил для вас ссылку на бесплатный материал. А сейчас давайте перейдем к теме этой статьи.

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

Пример

Если у Вас имеется заголовок статьи, то вместо использования

<font size="5" face="Arial">Heading</font>

Вы могли бы просто написать

<h2>Heading</h2>

и определить стиль <h2> элемента в CSS.

Что касается атрибутов , скажем Вы хотите изменить цвет фона страницы, то вместо

<body bgcolor="#000">

нужно прописать стиль в CSS, не трогая тэг <body>.

Эти HTML тэги и атрибуты изменяют вид Вашей страницы и называются Описательные Тэги. Они были созданы до появления CSS. Сегодня мы разделяем контент от стиля. Описательные тэги не подходят, когда мы говорим о написании семантического HTML. Но Вы можете возразить, сказав: Но, если <b> и <strong> делают то же самое, почему я должен использовать один вместо другого? Простой ответ в том, что они не делают одно и то же. Большинство браузеров представляют их одним и тем же способом, по умолчанию. Но назначение <strong> позволяет Вам стилизовать текст не только как подужирный шрифт, а также как специальный шрифт, цвет текста и т. д… Он также назначает смысл тэгу (Это «жирный» текст, означающий выделение), тогда как <b> просто описывает, то как должен выглядеть текст (b становиться жирным) .

Список хитов

Здесь Вы видите список Описательных Тэгов и атрибутов. Пожалуйста, заметьте, что большинство этих тэгов и атрибутов устарели в HTML 4.0.1 STRICT- Ещё одна причина почему из не стоит использовать!

Тэги

  • <b>
  • <u>
  • <i>
  • <big>
  • <small>
  • <tt>
  • <hr>
  • <sub>
  • <sup>
  • <font>
  • <center>
  • <menu>
  • <layer>
  • <blink>
  • <marquee>

Атрибуты

Здесь только перечень описательных атрибутов, которые, по моему мнению, не имеют ценности. Здесь они, только по причине того, что большинство описательных атрибутов все ещё нужны в некоторых HTML тэгах (Очень маленькое число, а если они Вам действительно нужны Вы можете описать их в CSS.)

  • alink=»»
  • link=»»
  • vlink=»»
  • background=»»
  • bgcolor=»»
  • target=»»
  • align=»»
  • width=»»
  • height=»»


Это касается не только семантики HTML, известная проблема веб-дизайнеров неправильное использование тэга <table> для создания разметки. Таблицы не были созданы для создания разметки, но для хранения табличных данных! Другой пример использоваия тэга <div> для навигации, когда более семантичным (подходящим по смыслу) мог бы быть тэг <ul>.

Я надеюсь Вам понравились, приведенные примеры. Однажды Вы поймете семантику HTML и как это работает и это поможет Вам на пути к познанию XML. Хорошего дня!

Источник: www.webdesign.org

В начале статьи я упомянул, что расскажу о бесплатном материале. Это авторский видеокурс по HTML от Евгения Попова, опытного вебмастера и инфобизнесмена. Вот что рассматривается в этом курсе:
  • Что такое тэги и какие они бывают?
  • Работа с ссылками.
  • Работа с таблицами.
  • Как работать с формами и элементами форм?
  • Как отправлять данные методами GET и POST?
  • И другие вопросы...

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

Бесплатный видеокурс по HTML


Этот блог читают уже много людей
- читай и ТЫ!

0 ответы

Ответить

Want to join the discussion?
Feel free to contribute!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *