Структура html документа и страницы сайта: особенности

История развития HTML

  • HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.
  • HTML 2.0 (22 сентября 1995) — появление тега form
  • HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения
  • HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS
  • HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5

Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег <!DOCTYPE> в начале документа.


На нашем сайте Вы можете найти уроки по html с множеством примеров и пояснений. После их прочтения Вы должны освоить азы HTML.

Создание структуры документа в HTML 5

Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов , а затем использовали атрибуты классов или атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы , , и . Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.

Элементы, предназначенные для создания структуры в HTML 5.

Для создания структуры документа в HTML 5 используются заголовочные элементы (, , , , и ) и элементы , , и из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.

Процесс создания структуры документа в HTML5

Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы , , , и создают секции (явные разделы), а элементы , , , , и — обычные разделы (неявные разделы).

Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.

В HTML 5 создание структуры документа начинается с элемента . Данный элемент создаёт основную секцию (раздел на уровне документа).

<body>
</body>

--> Вышеприведённый пример будет создавть следующую структуру документа:
 Untitled

После этого обычно переходят к созданию секций внутри (основной секции). Например, создадим секции , и . Эти секции будут являться дочерними по отношению к .

<body>
  <nav></nav>
  <section></section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
 Untitled
   Untitled
   Untitled
   Untitled

Каждая из секций (, , , ) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в , имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.


Например, создадим в 3 секции .

<body>
  <nav></nav>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
 Untitled
   Untitled
   Untitled
      Untitled
      Untitled
      Untitled
   Untitled

Элементы , , , , и в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).

Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (, , , , ). В HTML 4 нет элементов для создания секций.

<body>
  <h1>A</h1>
  <nav></nav>
  <section>
    <h1>B</h1>
    <article>
      <h1>C</h1>
    </article>
    <article>
      <h1>D</h1>
    </article>
    <article>
      <h1>E</h1>
    </article>
  </section>
  <aside>
    <h1>F</h1>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
 A
   Untitled
   B
      C
      D
      E
   F

Например, создадим неявные разделы в секции и :

<body>
  <h1>A</h1>
  <nav></nav>
  <section>
    <h1>B</h1>
    <article>
      <h1>C</h1>
    </article>
    <article>
      <h1>D</h1>
    </article>
    <article>
      <h1>E</h1>
    </article>
    <h2>B-R1</h2>
    <h3>B-R2</h3>
    <h2>B-R3</h2>
  </section>
  <aside>
    <h1>F</h1>
    <h2>F-R1</h2>
    <h3>F-R2</h3>
    <h4>F-R3</h4>
    <h3>F-R4</h3>
    <h3>F-R5</h3>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
 A
   Untitled
   B
      C
      D
      E
      B-R1
        B-R2
      B-R3
   F
     F-R1
       F-R2
         F-R3
       F-R4
       F-R5

Создание простого html-документ в блокноте

1. Для того чтобы сделать свою первую html страницу откройте обычный блокнот и сохраните его под каким-то именем (например, index.html). Тип файла необходимо выбрать «все файлы», а после имени обязательно дописать «.html» или «.htm«, но лучше придерживаться первого варианта (хотя разницы нету).

Должен получиться файл «index.html«. В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому переходим к шагу два — наполнение страницы.

2. Отрываем созданный файл через блокнот и вписываем в него следующее (можете просто скопировать):

После этого сохраните этот файл. Теперь откройте index.html через любой браузер, в отрывшейся вкладке должна появиться надпись «У меня получилось сделать первую страницу!», а в заголовке будет написано «Пример создания страницы html в блокноте». Такой документ можно уже выкладывать в интернет. Как видите, ничего сложного нет, все просто.

Теперь вкратце поговорим о структуре любого html-документа.

Теперь о том, как выучить HTML?


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

Благо сейчас интернет полон информацией, которая находится в бесплатном доступе и нужную по данной теме найти легко. С этим затруднений не будет. Тем более, как я уже сказал ранее, язык HTML достаточно прост.

Еще важно отметить, что изучение данного языка правильнее было бы проходить в паре с CSS. Подробное описание CSS. Так же замечу, что полную картину возможностей Вы получите если обучение будет сопряжено с практикой

К примеру, так как HTML применяется в построение web-сайтов, то и обучение должно в себя включать создание какого-нибудь простого сайта на чистом HTML и CSS

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

В скором будущем напишу такой урок, специально для своих читателей.

Accessibility concerns

Use of the attribute is highly problematic for:

  • People using touch-only devices
  • People navigating with keyboards
  • People navigating with assistive technology such as screen readers or magnifiers
  • People experiencing fine motor control impairment
  • People with cognitive concerns

This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to use a more accessible technique that can be accessed with the above browsing methods.

  • Using the HTML title attribute – updated | The Paciello Group
  • Tooltips & Toggletips — Inclusive Components
  • The Trials and Tribulations of the Title Attribute — 24 Accessibility

Структура HTML-документа

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (например, тег переноса строки — одиночный и закрывать его не нужно) . Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, атрибут у ссылки). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>HTML Document</title>
   </head>
   <body>
      <p>
         <b>
            Этот текст будет полужирным, <i>а этот — ещё и курсивным</i>.
         </b>
      </p>
   </body>
</html>

даст такой результат:

Этот текст будет полужирным, а этот — ещё и курсивным.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид или , где NNNN — код символа в Юникоде в десятичной системе счисления.

Например,  — знак авторского права (). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов:  — амперсанда (&),  — символа «меньше» (<) и  — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Подробнее по этой теме см. Элементы HTML. Подробнее по этой теме см. Википедия:Специальные символы.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML , которая обычно выглядит примерно так:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги заголовка () и тела () документа.

Варианты DOCTYPE для HTML 4.01

Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">

Нужно ли это учить?

В интер­не­те пол­но инфор­ма­ции про HTML, поэто­му нет необ­хо­ди­мо­сти что-то заучи­вать спе­ци­аль­но. Но если вы буде­те регу­ляр­но что-то вер­стать в HTML, вы и сами всё выучи­те. Это как ходь­ба или езда на вело­си­пе­де.


Если поду­мать, то при­выч­ные веб-страницы в каком-то смыс­ле уми­ра­ют, и HTML мед­лен­но теря­ет свою акту­аль­ность. 20 лет назад веб-страницы были един­ствен­ным спо­со­бом раз­ме­стить что-то в Сети, а для это­го абсо­лют­но точ­но нуж­но было знать HTML. Теперь у нас есть соци­аль­ные сети и плат­фор­мы для пуб­ли­ка­ций, кото­рые не тре­бу­ют зна­ния HTML. А у тех плат­форм, кото­рые тре­бу­ют, есть WYSIWYG-редакторы — они сра­зу поз­во­ля­ют фор­ма­ти­ро­вать текст как в Microsoft Word. Поэто­му в буду­щем может появить­ся поко­ле­ние интернет-пользователей, кото­рые ни разу в жиз­ни не столк­нут­ся с HTML-кодом в сво­их про­ек­тах.

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

Ско­ро всё пока­жем!

Литература

  • Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — П.: «Питер», 2010. — 656 с. — ISBN 978-5-49807-113-8.
  • Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. — М.: «Диалектика», 2011. — 400 с. — ISBN 978-5-8459-1752-2.
  • Питер Лабберс, Брайан Олберс, Фрэнк Салим. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений = Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. — М.: «Вильямс», 2011. — 272 с. — ISBN 978-5-8459-1715-7.
  • Стивен Шафер. HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition. — М.: «Диалектика», 2010. — 656 с. — ISBN 978-5-8459-1676-1.
  • Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — 1-е изд. — М.: «Питер», 2010. — С. 656. — ISBN 978-5-49807-113-8.

How Does HTML Work?

HTML documents are files that end with a .html or .htm extension. You can view then using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML file and renders its content so that internet users can view it.

Usually, the average website includes several different HTML pages. For instance: home pages, about pages, contact pages would all have separate HTML documents.

Each HTML page consists of a set of tags (also called elements), which you can refer to as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.

Most HTML elements have an opening and a closing that use the <tag></tag> syntax.

Below, you can see a code example of how HTML elements can be structured:

<div>
  <h1>The Main Heading</h1> 
  <h2>A catchy subheading</h2>
  <p>Paragraph one</p> 
  <img src="/" alt="Image"> 
  <p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
  • The outmost element is a simple division (<div></div>) you can use to mark up bigger content sections.
  • It contains a heading (<h1></h1>), a subheading (<h2></h2>), two paragraphs (<p></p>), and an image (<img>).
  • The second paragraph includes a link (<a></a>) with a href attribute that contains the destination URL.
  • The image tag also has two attributes: src for the image path and alt for the image description.

С этим читают