Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Иерархия в HTML - размышления изнутри
Когда мы думаем об HTML-кодировании, мы имеем тенденцию представлять элементы, (тэги) с помощью которых производится разметка web-страницы. Есть элементы, которые определяют тело документа, другие определяют параграфы, третьи отвечают за выделение текста.
Несколько необычно думать о визуализации кода; наши интересы обычно сфокусированы вокруг внешнего вида конечного продукта. Однако умение визуализировать структуру кода - видеть ее так, как ее видит браузер - реально помогает при разработке дизайна страницы.
Один из основных моментов при изучении CSS - Каскадных Таблиц Стилей - понимание наследования, то есть отношений между каждым конкретным элементом и его родительскими элементами, дочерними и сестринскими элементами. Например, элемент <em> наследует определенные характеристики от элемента <p>, который, в свою очередь, наследует характеристики от элемента <body>. Такое схематическое объяснение наследования может помочь нам понять структуру HTML-документа. Также оно помогает нам, когда мы обращаемся к каким-либо элементам, используя JavaScript. Если понять сначала суть этих отношений, то все дальнейшие шаги будет сделать значительно проще.
HTML контейнеры
Как я уже сказал ранее, когда мы говорим об HTML, мы обычно подразумеваем тэги и элементы, но HTML - много больше, чем это. Если мы сможем представить его визуально, это поможет нам понять, что происходит с контентом, который мы помещаем на страницу. Например, если мы хотим создать параграф, то мы обрамляем текст элементами <p> и </p>. Если нам нужно выделить одно или более слов в параграфе, то мы обрамляем эти слова элементами <strong></strong>. Если хотим создать нумерованный список, мы будем использовать элементы формирования списка <li></li>, обрамленные в элементы <ol></ol>. Все это может быть заключено в элемент-контейнер <div></div>.
Все это имеет смысл при реальной работе с HTML, но как же выглядит настоящая структура? Как все это может помочь при изучении HTML? Если мы представим структуру в виде схемы, она поможет лучше все это понять.
Вот примерная картина того, что видит браузер (объявление DOCTYPE - типа документа намеренно не включено в схему, так как оно не является частью контейнера HTML). Первый и последний элементы на схеме - открывающий и закрывающий элементы <html> и </html>. Они создают так называемый "HTML-контейнер". Он содержит в себе все остальные элементы, такие как текст, скрипты и т.д. Давайте взглянем на то, что здесь на самом деле происходит.
Заметка об отношениях
Если мы посмотрим на структуру страницы, ты мы увидим, что каждый элемент находится в определенных отношениях с другими элементами. Это можно назвать "родительско - детско - сиблинговые" отношения. Элемент, который в иерархии расположен непосредственно выше другого, называется родительским элементом для элемента, который находится под ним. Элемент под родительским элементом называется потомком. Когда два элемента в иерархии находятся на одном уровне, то говорят о сестринских элементах (вообще, сиблинги - это родные братья и сестры). Ниже представлена иерархия элементов для приведенной выше диаграммы. Как можно видеть, она выглядит как "дерево документа".
Рассекая диаграмму
Если посмотреть на схему в целом, то создается впечатление, что один элемент накладывается на другой. Так оно и происходит, потому что каждый элемент "содержится" в элементе предыдущего уровня, поэтому каждый такой элемент называется "содержащим", т.е. контейнером.
Открывающий и закрывающий элементы <html></html> образуют основание, "фон", на основе которого строится весь остальной документ. Такой элемент еще называют корневым. Затем, у нас есть два элемента - <head> и <body>, которые лежат "поверх" корневого элемента. Внутри элемента <head> каждый элемент (например, мета-тэги, скрипты и др.) равны друг другу с точки зрения иерархии. Внутри же секции <body> есть более сложные иерархические отношения.
В нашей схеме элемент <body> является родительским для элемента <h1> и двух элементов <div>. Каждый из этих элементов является дочерним по отношению к элементу <body>.
Если мы взглянем на первый элемент <div>, то он будет родительским элементом для элемента <p>, который, соответственно, является его дочерним элементом. Два элемента внутри элемента <p> - <strong> и <em> - элементы-сиблинги, (т.е. одного уровня) и каждый из них - дочерний по отношению к <p>.
Вывод
Помните, что web-страница это нечто большее, чем просто набор текста и тэгов. Это - структура, однажды поняв которую, можно успешно ей манипулировать, как в случае использования JavaScript и Объектной Модели Документа - DOM.
Lee Underwood
webreference.com
Перевод - Дмитрий Науменко
P.S. Посмотрите также вот эти бесплатные уроки по работе с HTML. В них вы найдете хорошую базовую информацию по верстке и научитесь создавать "каркасы" для сайтов:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
