Перейти к содержанию

Структура веб-страниц

Значение кода

Теперь давайте более детально рассмотрим код, с которым вы познакомились на предыдущей странице, нажимая на знак (1), описывающий каждый элемент:

  1. Это аннотация-описание.
Код страницы
<html>(1)
    <body>(2)
        <h1>Это основной заголовок</h1>(3)
        <p>Этот текст может быть введением к тексту, помещенному под заголовком.
            Он может быть достаточно длинным, поэтому автоматически переносится на новую строку. 
            Также, данный текст может быть разделен на несколько разделов с подзаголовками.
        </p>(4)
        <h3>Это подзаголовок</h3>(5)
        <p>Часто при написании статей используют подзаголовки для лучшего понимания содержания публикации.
            Такими приемами пользуются все: от копирайтеров до создателей сайтов.
            Они используются во всех бумажных и веб документах.</p>(6)
        <h2>Еще один подзаголовок</h2>(7)
        <p>Вот еще один пример подзаголовка.</p>(8)
    </body>(9)
</html>(10)
  1. Открывающий тег <html> означает, что все, помещенное между ним и закрывающим тегом </html>, является HTML-кодом.
  2. Тег <body> сообщает, что все, помещенное между ним и закрывающим тегом </body>, должно быть отображено в основном окне браузера.
  3. Текст между тегами <h1> и </h1> представляет основной заголовок.

  4. Абзац текста должен быть помещен между тегами <p> и </p>.(1)

    1. От англ. paragraph — абзац.

  5. Текст между тегами <h3> и </h3> представляет подзаголовок.

  6. Это еще один абзац текста, помещенный между тегами <p> и </p>.
  7. Еще один подзаголовок между тегами <h2> и </h2>.
  8. Еще один абзац текста между тегами <p> и </p>.
  9. Закрывающий тег </body> означает окончание контента, который должен быть отображено в основном окне браузера.
  10. Закрывающий тег </html> означает конец HTML-кода.

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

Теги
<p>Открывающий тег
</p>Закрывающий тег

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

Например, тегом р обозначается абзац текста.

Отличием закрывающего тега является наличие / после символа <.

Термины «тег» и «элемент» зачастую используются как синонимы.

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

Атрибуты

Атрибуты предоставляют дополнительную информацию о содержимом HTML-элементов. Они располагаются воткрывающем теге элемента и состоят из двух частей: имени и значения, разделенных знаком «равно».

Пример атрибута
<p lang="ru">Текст на русском языке.</p>

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

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

Пример атрибута
<p lang="en-US">Paragraph is English</p>

Большинство атрибутов могут быть использованы только с определенными элементами. Несмотря на это некоторые атрибуты (например, lang) допускается ставить в любом элементе. Значением атрибута lang может быть сокращенное обозначение языка содержимого элемента. Браузеры должны распознавать это сокращение.

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