В чем разница между элементом и тегом? Когда необходимо использовать <strong> и когда <bold>? Что такое этот DOM? Когда вы мало владеете знаниями по верстке и дизайну одной из сложностей освоения их является изучение терминов. Очень много терминов используются и мало из них объясняются так же, как и переводятся, заблудится очень легко!

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

HTML применяется для разметки документов гипертекстом. для лучшего понимания этого разложим все на полочки:

- Гипертекст.

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

-Разметка.

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

Теперь соединим это:

Запишите в своей памяти, HTML - это способ верстки документа с последующим форматированием для показа пользователю, который зависит от системы, дающей право основывать ссылки на тексте. Это база работы сети в целом!

HTML5 - это верхушка иерархии HTML. Он служит для замены версий HTML4.01 и XHTML1.1. Таким образом вы всегда видите ссылки на эти языки программирования, но знайте, что HTML5 - новый синтаксис!

Он вносит массу функционала, элементов синтаксиса для смены HTML. Их слишком много, чтобы все перечислять здесь и сразу. Некоторые вы смогли увидеть собственными глазами в постоянно использующихся и являющихся элементами холста для отображения графики, новизна затронула и doctype, появилась возможность встраивания видео без пользовательских плагинов FLASH, плюс обновленные API для разработчиков веб-приложений.

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

Например, разработчики имели обыкновение структурировать веб-страницы пользуясь HTML-таблицами. Вся беда в том, что у элемента <table> уже есть определенная цель, она выводит на экран информацию (построенную в виде таблицы или диаграммы сравнения чего-либо). Увидив тег <table> вы должны не задумываясь ответить, что внутри таблицы именно табличные данные! Но когда WEB сайт стоит на таблице, <table> утрачивает свое изначальное и единственное семантическое значение...

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

Пока мы разбираем тему семантики в HTML5? Почему бы нам не поговорить еще и об наиболее используемом элементе, наравне с <table>, это элемент <div>, так называемое отделение. Если вы хоть раз смотрели на исходный код страницы HTML вы видели использование тега <div> практически повсеместно. Что же это за тег, какое отделение показывает нам <div>?

Итак, <div> получил свое название от сокращения английского "division"? Одним из переводов которого является "отдел". Не надо думать, что название непонятно и неопределенно, просто вызовите из памяти перевод слова, от которого произошло название тега и все встанет на свои места! Цель отделения в том, чтобы быть неясной! <div> -универсальный контейнер для блоков содержания WEB-страницы, он не может быть описан по-другому на уровне семантики.

Естественно, это наводит на мысль, что <div> - несемантический элемент, разумно предполагая, что отделение на самом деле не может передать значение. Значит, согласуясь со всеми принципами, обозначенными нами выше, <div> должен появляться в WEB-дизайне как можно реже, теоретически...! Но фактически, очень многие разработчики часто употребляют его в своим творениях!

Но, отделения унвесальные и довольно полезные в создании структур, сравнимых с CSS, мы интуитивно пишем и добавляем на наши сайты массу отделений. Но все же, максимально возможно, в тех местах, в которых реально составить нечто более семантичное, вы должны ибегать <div>. К примеру, ниже представлен блок, который довольно асто использовался до появления HTML5:

В ID может быть очень много различных значений, используемым для определения содержимого, но отделение до сих пор универсальный, но нежелательный элемент разметки. HTML5 с помпой хоронит <div> и позволяет внедрять и пользоваться намного лучшими семаническими элементами хотя бы заголовками!

HTML5 превратил структуру страницы, построенную на куче <div> в структуру более семантичных и коротких, удобочитаемых элементов и определений!

Что ж, HTML5 предлагает довольное хитрое измененное семантическое нововведение! Проверим их в сравнении? em против курсива!

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

Ничего непонятно??? Разбираем: ключевой смысл здесь то, что курсив не делает ударение в то время, тег <em> это делает. Поймите это как различное настроение в речи.

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

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

Далее мы видим, что элементом <b> было изменено значение слова, это яркий пример "контраста с окружающим контентом, не неся в себе дополнительного акцента или важности, и для которого стандартное типографское представление - четкий текст".

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

Для альтернативы в HTML5 введен элемент <strong> для передачи особой важности. К примеру, предупреждающим сообщениям данный тег очень подходит для использования:

Для передачи нескольких важных сообщений допускается вкладывание <strong>.

Если есть желание более подробно узнать об этих четырех элементах, спрашивайте, постараюсь ответить!

Ссылка на статью http://simple-html5-css3.blogspot.com/2012/03/basishtml.html