Примеры структуры сайта html – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

alexxlab

Содержание

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

 

Семантическая структура для HTML5 страницы

В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.

Рисунок — Семантическая структура для HTML5 страницы.

 

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">
    <meta name="description" content="Описание контента страницы, 1-2 предложения.">
</head>
<body>

Я добавил тег <meta name="keywords" content=""> который отвечает за ключевые слова. И тег <meta name="description" content=""> который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По о

Структура документа и веб-сайта — Изучение веб-разработки

В процессе перевода.

В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»),HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.

Необходимые знания:Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

Основные составляющие документа

Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:

Заголовок
Обычно это большая полоса вверху страницы,  с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
Навигационное меню
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
Основное содержимое
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
Боковая панель
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
Нижний колонтитул (футер)
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

«Типичный веб-сайт» может быть структурирован примерно так:

HTML для структурирования содержимого

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы. 

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?

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

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

  • Заголовок: <header>.
  • Навигационное меню: <nav>.
  • Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
  • Боковая панель: <aside>, обычно располагается внутри <main>.
  • Нижний колонтитул: <footer>.

Активное обучение: исследование кода для нашего примера

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы Вы взгянули на приведенный выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Заголовок моей страницы</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->

    <header>
      <h2>Заголовок</h2>
    </header>

    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>

       <!-- Форма поиска — это еще один распространенный нелинейный способ навигации по веб-сайту. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    <!-- Здесь основное содержимое нашей страницы -->
    <main>

      <!-- Она содержит статью -->
      <article>
        <h3>Заголовок статьи</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h4>Подраздел</h4>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h4>Ещё один подраздел</h4>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- Дополнительный контент также может быть вложен в основной контент -->
      <aside>
        <h3>Связанные темы</h3>

        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно...</a></li>
        </ul>
      </aside>

    </main>

    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->

    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
    </footer>

  </body>
</html>

Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.

Подробнее об элементах HTML макета

Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью HTML-элементы. Пока что это основные определения, которые вы должны попытаться понять:

  • <main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
  • <article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
  • <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
  • <aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
  • <header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings). 
  • <nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
  • <footer> представляет собой группу конечного контента для страницы.

Несемантические обертки

Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и <span>. Вам следует использовать их с подходящим значением атрибута class или id, что бы не запутаться и всегда добиватся того, чтобы страница отображалась корректно.

<span> — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

<p>Пьяный Король возвратился в свою комнату в 01:00 
и всё никак не мог войти в дверь: хмель мешал <span>[Примечание редактора: В этот момент 
свет на сцене должен быть приглушён]</span>.</p>

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

<div> — это блочный несемантический элемент, который следует использовать только если Вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который Вы можете открыть в любой момент нахождения на сайте:

<div>
  <h3>Корзина</h3>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: $237.89</p>
</div>

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и  <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают Ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе Вам будет трудно обновлять и поддерживать Ваши документы.

Перенос строки и горизонтальный разделитель

Два элемента, которые Вы будете периодически использовать или захотите узнать о них: <br> и <hr>:

<br> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

<p>Жила-была девчушка Нелл,<br>
Любившая писать HTML:<br>
Её семантика ужасна была — <br>
Она и сама прочитать ничего не могла.</p>

Без элемента <br> абзац  разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.

<hr> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо порхнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>

Будет выглядеть примерно так:

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

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо порхнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: «Думаю, самое время вернуться к работе».

Планирование простого веб-сайта

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

Самостоятельная работа: создайте свою собственную карту сайта

Приментие наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он Вам ещё понадобится.

Заключение

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

Дополнительные материалы

  • Using HTML sections and outlines: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.

В этом модуле

Структура сайта html: основные понятия и определения

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

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

Выглядит страшно, программируется легко

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Моя страница</title>
    <style type="text/css">
        BODY {
            background: #fff1e4;
            margin: 0;
        }
        .layout {
            width: 70%;
            padding-bottom:30px;
            margin: 0 auto 10px;
            background: #fff;
        }
        .content {
            height:250px;
            margin-right: 350px;
           background: #f6cf65;
        }
        .sidebar {
            height:250px;
            width: 320px;
            float: right;
            background: #f6cf65;
        }
        footer{font-size:18px;}
    </style>
</head>
<body>
    <div>
        <header>
            <h2>Создание структуры сайта при помощи html</h2>
        </header>
        <menu>
            <li>Основные теги языка гипертекстовой разметки</li>
            <li>Новые теги, пришедшие с html 5</li>
            <li>Пример структурирования страницы</li>
        </menu>
        <div>
            <ul>
                <li>Основные теги языка гипертекстовой разметки</li>
                <li>Новые теги, пришедшие с html 5</li>
                <li>Пример структурирования страницы</li>
            </ul>
        </div>
        <div>
            <h2>Статья 1</h2>
            <p>
                Здесь расположен текст первой статьи.
            </p>
            <h2>Статья 2</h2>
            <p>
                Здесь расположен текст второй статьи.
            </p>
        </div>
        <footer>&copy; Автор статьи данного блога</footer>
    </div>
</body>
</html>

<!DOCTYPE html> <html lang=»en» xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta charset=»utf-8″ /> <title>Моя страница</title> <style type=»text/css»> BODY { background: #fff1e4; margin: 0; } .layout { width: 70%; padding-bottom:30px; margin: 0 auto 10px; background: #fff; } .content { height:250px; margin-right: 350px; background: #f6cf65; } .sidebar { height:250px; width: 320px; float: right; background: #f6cf65; } footer{font-size:18px;} </style> </head> <body> <div> <header> <h2>Создание структуры сайта при помощи html</h2> </header> <menu> <li>Основные теги языка гипертекстовой разметки</li> <li>Новые теги, пришедшие с html 5</li> <li>Пример структурирования страницы</li> </menu> <div> <ul> <li>Основные теги языка гипертекстовой разметки</li> <li>Новые теги, пришедшие с html 5</li> <li>Пример структурирования страницы</li> </ul> </div> <div> <h2>Статья 1</h2> <p> Здесь расположен текст первой статьи. </p> <h2>Статья 2</h2> <p> Здесь расположен текст второй статьи. </p> </div> <footer>&copy; Автор статьи данного блога</footer> </div> </body> </html>

Данный код создает страницу блога, которая в свою очередь разбита на заголовок (header), меню (menu), основную панель (layout), в которой расположены панель для контента (content) и боковая панель (sidebar), а также называемый «подвал» (footer).

Начнем разбор полетов с первой строки.

<!DOCTYPE> – это элемент языка, основная задача которого указать тип веб-документа. Таким образом браузер определяет, по какому стандарту стоит отображать страницу, так как на сегодняшний день существует несколько версий html.

Далее расположен тег head, который описывался в прошлой статье, также как и входящие в него элементы meta и title.

Однако стоит обратить внимание на новую единицу языка с названием style. Как вы уже догадались по названию, данный тег задает стиль и корректирует расположение объектов на странице.

Логически могу предположить, что в вашей голове сразу же зародился вопрос: «Что за непонятный код расположен в этой части программы? Он совершенно не похож на html!». А ответ таков: в тег style записывается не html, а css код. Как уже ранее было сказано, это инструмент для форматирования внешнего вида сайтов.

Двигаясь по тексту примера дальше, остановимся на контейнере body. Элемент body отвечает за отображаемый в браузере контент и в данном случае разбит div-ами на части.

Div относится к блочным тегам языка разметки. Его используют для выделения некоторых фрагментов с целью их дальнейшего видоизменения.

Управление блоками осуществляется при помощи каскадных таблиц стилей, т.е. языка css. Веб-страница примера располагает тремя блоками, которые привязаны к стилевому оформлению при помощи атрибутов class.

 

Таким образом, в коде имеются:

  • layout – блок, отвечающий за основную часть страницы,
  • sidebar – боковая панель (обычно создается для навигации),
  • content – блок, в котором располагаются публикации блога.

В элементе с определением класса sidebar я задаю ненумерованный список, используя при этом элементы <ul> и <li>. В блоке со стилевым классом content – теги заголовка <h2> и параграфа <p>.

А теперь подробнее рассмотрим блок <div>.

HTML или все-таки HTML 5? Как же распознать?

В div-е со стилевым классом layout помимо других блоков, расположены такие теги, как header, menu и footer. В отличие от других элементов примера, они относятся к платформе html 5.

Так, header – это элемент языка гипертекстовой разметки, обычно создающий шапку страниц сайта или разделов, в которую вносят заголовок. Стоит отметить, что браузер Internet Explorer не поддерживает header включительно до 8 версии, однако отображает его содержимое.

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

И наконец, единица языка footer. На жаргоне веб-разработчиков ее иногда называют «подвалом» страницы. Этот тег располагается внизу страницы или разделов. В footer обычно заносится информация об авторстве определенного ресурса, дата создания документа, справочная информация или другие материалы, не требующие особого внимания читателей веб-ресурса.

Инструменты для создания веб-ресурсов

Для разработки интернет-страниц было создано множество программных продуктов. Условно их можно поделить на простые программы-редакторы и на профессионально ориентированные программные продукты.

Для обучения я рекомендую скачать Notepad++. Это удобный текстовый редактор, выложенный в свободный доступ.

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

Отмечу еще одну важную деталь. Сегодня каждая уважающая себя фирма обязана иметь мобильную версию своего сайта (подробнее об этом в следующих публикациях).

На этой ноте я прощаюсь с вами. Не забудьте вступить в ряды подписчиков блога и поделиться ссылочкой с друзьями. Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 211 раз

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

Статья, в которой рассматривается положение дел, связанных с созданием HTML5-структуры на практике, а также некоторые другие моменты, которые необходимо учитывать во время её разработки.

Перед тем как перейти к разработке структуры документа согласно спецификации HTML5, рассмотрим на каком уровне осуществляется её поддержка в браузерах и других пользовательских агентах.

Поддержка HTML5 структуры пользовательскими агентами

В настоящее время сложилась такая ситуация, когда одна часть пользовательских агентов вообще не понимает структуру документа, которая выполнена в соответствии со спецификацией HTML5. А другая часть пользовательских агентов обеспечивают её поддержку пока только экспериментально.

Чтобы авторы обратили на это внимание, разработчики спецификации опубликовали в стандарте HTML5 следующий абзац.

Фрагмент спецификации, содержащий сведения о поддержки HTML 5 структуры пользовательскими агентами

Основное содержимое вышеприведённого абзаца заключается в том, что они призывают авторов не полагаться полностью на структуру документа, описанной в этой спецификации, по крайне мере до тех пор, пока новая структура не получит широкую поддержку. Стандарт рекомендует авторам, как и прежде, создавать структуру веб-страниц с помощью элементов h2, h3, h4, h5, h5 и h6 или такую, которая была бы обратно совместимой с заголовочной.

Несмотря на расплывчатую поддержку HTML5 структуры документа пользовательскими агентами, авторам всё равно стоит задуматься о её внедрении. Это позволит сделать документ структурированным, семантическим и логичным с точки зрения HTML5.

До тех пор пока HTML 5 структура документа, не будет однозначно пониматься пользовательскими агентами, её создание будет обусловлено необходимостью использования обратной совместимости с HTML4. Таким образом, при создании структуры документа авторам следует учитывать то, что она должна быть правильной как в отношении HTML4, так и в отношении HTML5.

Создавать такую структуру не так уж сложно как это может показаться на первый взгляд. Для этого авторам всего лишь необходимо использовать внутри секционных элементов заголовки соответствующего ранга. Определяется ранг по уровню вложенности секционного элемента. Корневой секционный элемент имеет 1 ранг. Секции, которые расположены непосредственно в нём, имеют 2 ранг. Секции, которые расположены внутри секций второго ранга, соответственно имеют 3 ранг и т.д.

Создание HTML5-структуры обратно совместимой с заголовочной


<body>
  <!-- Заголовок секции документа (1 уровень) -->
  <h2>Заголовок документа</h2>
  <!-- Секция nav, вложенная в секцию документа (2 уровень) -->
  <nav>
      <h3>Навигация</h3>
      ...
  </nav>
  <!-- Секция article, вложенная в секцию документа (2 уровень) -->
  <article>
    <h3>Заголовок секции article</h3>
    ...
    <!-- Секция section, вложенная в секцию article 2 уровня -->
    <section>
      <h4>Заголовок секции section</h4>
      ...
    </section>
    <!-- Секция aside, вложенная в секцию article 2 уровня -->
    <aside>
      <h4>Заголовок секции aside</h4>
      ...
       <!-- Секция section, вложенная в секцию aside 3 уровня -->
      <section>
        <h5>Заголовок секции section</h5>
        ...
      </section>
    </aside>
    ...
  </article>
  ...
</body>

Вышеприведенный пример будет иметь следующую структуру (outline):


В HTML5:
[document] Заголовок документа
  [nav] Навигация
  [article] Заголовок секции article
    [section] Заголовок секции section
    [aside] Заголовок сеции aside
      [section] Заголовок секции section
В HTML4:
[h2] Заголовок документа
  [h3] Навигация
  [h3] Заголовок секции article
    [h4] Заголовок секции section
    [h4] Заголовок сеции aside
      [h5] Заголовок секции section

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) рассмотрим на примере страницы блога, содержащей статью.

Начнём процесс проектирования с рассмотрения основных групп контента, из которых состоит данная страница.

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

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

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) и оптимизированной под поисковые системы выполним поэтапно.

На 1 этапе разработаем HTML5-структуру страницы, не обращая внимание на то, как она будет выглядеть с точки зрения HTML4 (заголовочной структуры).

Для этого воспользуется элементами article, section, nav и aside из категории sectioning, и элементом h2 из группы heading.

Создание HTML5 структуры документа. Этап первый


<!-- Секция document (документа) -->
<body>
  <h2>Название сайта</h2>
  <!-- Секция nav (навигация) -->
  <nav>
    <h2>Навигация по сайту</h2>
  </nav>
  <!-- Секция article (статьи) -->;
  <article>
    <h2>Название статьи</h2>
    <section>
      <h2>1 раздел статьи</h2>
      ...
      <section>
        <h2>1 подраздел 1 раздела</h2>
        ...
      </section>
    </section>
    <section>
      <h2>2 раздел статьи</h2>
      ...
      <section>
        <h2>1 подраздел 2 раздела</h2>
        ...
      </section>
      <section>
        <h2>1 подраздел 2 раздела</h2>
        ...
      </section>
    </section>
    <section>
      <h2>3 раздел статьи</h2>
      ...
    </section>
    <section>
      <h2>Комментарии к статье</h2>
      ...
    </section>
  </article>
  <!-- Секция aside (содержимое, косвенно связанное с остальным содержимым страницы) -->
  <aside>
    <h2>Дополнительные разделы</h2>
    <section>
      <h2>Поиск</h2>
      ...
    </section>
    <section>
      <h2>Облако тегов</h2>
      ...
    </section>
    <section>
      <h2>Комментарии</h2>
      ...
    </section>
    <section>
      <h2>Статьи</h2>
      ...
    </section>
    <section>
      <h2>Голосование</h2>
      ...
    </section>
    <section>
      <h2>О блоге</h2>
      ...
    </section>
  </aside>
</body>


HTML5 структура страницы:
[document] Название сайта
  [nav] Навигация по сайту
  [article] Название статьи
    [section] 1 раздел статьи
      [section] 1 подраздел 1 раздела
    [section] 2 раздел статьи
      [section] 1 подраздел 2 раздела
      [section] 2 подраздел 2 раздела
    [section] 3 раздел статьи
    [section] Комментарии к статье
  [aside] Дополнительные разделы
    [section] Поиск
    [section] Облако тегов
    [section] Комментарии
    [section] Статьи
    [section] Голосование
    [section] О блоге

HTML4 структура страницы:
[h2] Название сайта
[h2] Навигация по сайту
[h2] Название статьи
[h2] 1 раздел статьи
[h2] 1 подраздел 1 раздела
[h2] 2 раздел статьи
[h2] 1 подраздел 2 раздела
[h2] 2 подраздел 2 раздела
[h2] 3 раздел статьи
[h2] Комментарии к статье
[h2] Дополнительные разделы
[h2] Поиск
[h2] Облако тегов
[h2] Комментарии
[h2] Статьи
[h2] Голосование
[h2] О блоге

На 2 этапе доработаем структуру, полученную на 1 этапе, таким образом, чтобы она была обратно совместимой с заголовочной.

Создание HTML5 структуры документа. Этап второй


<!-- Секция document (документа) -->
<body>
  <h2>Название сайта</h2>
  <!-- Секция nav (навигация) -->
  <nav>
    <h3>Навигация по сайту</h3>
  </nav>
  <!-- Секция article (статьи) -->;
  <article>
    <h3>Название статьи</h3>
    <section>
      <h4>1 раздел статьи</h4>
      ...
      <section>
        <h5>1 подраздел 1 раздела</h5>
        ...
      </section>
    </section>
    <section>
      <h4>2 раздел статьи</h4>
      ...
      <section>
        <h5>1 подраздел 2 раздела</h5>
        ...
      </section>
      <section>
        <h5>1 подраздел 2 раздела</h5>
        ...
      </section>
    </section>
    <section>
      <h4>3 раздел статьи</h4>
      ...
    </section>
    <section>
      <h4>Комментарии к статье</h4>
      ...
    </section>
  </article>
  <!-- Секция aside (содержимое, косвенно связанное с остальным содержимым страницы) -->
  <aside>
    <h3>Дополнительные разделы</h3>
    <section>
      <h4>Поиск</h4>
      ...
    </section>
    <section>
      <h4>Облако тегов</h4>
      ...
    </section>
    <section>
      <h4>Комментарии</h4>
      ...
    </section>
    <section>
      <h4>Статьи</h4>
      ...
    </section>
    <section>
      <h4>Голосование</h4>
      ...
    </section>
    <section>
      <h4>О блоге</h4>
      ...
    </section>
  </aside>
</body>


HTML5 структура страницы:
[document] Название сайта
  [nav] Навигация по сайту
  [article] Название статьи
    [section] 1 раздел статьи
      [section] 1 подраздел 1 раздела
    [section] 2 раздел статьи
      [section] 1 подраздел 2 раздела
      [section] 2 подраздел 2 раздела
    [section] 3 раздел статьи
    [section] Комментарии к статье
  [aside] Дополнительные разделы
    [section] Поиск
    [section] Облако тегов
    [section] Комментарии
    [section] Статьи
    [section] Голосование
    [section] О блоге

HTML4 структура страницы:
[h2] Название сайта
  [h3] Навигация по сайту
  [h3] Название статьи
    [h4] 1 раздел статьи
      [h5] 1 подраздел 1 раздела
    [h4] 2 раздел статьи
      [h5] 1 подраздел 2 раздела
      [h5] 2 подраздел 2 раздела
    [h4] 3 раздел статьи
    [h4] Комментарии к статье
  [h3] Дополнительные разделы
    [h4] Поиск
    [h4] Облако тегов
    [h4] Комментарии
    [h4] Статьи
    [h4] Голосование
    [h4] О блоге

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

Создание HTML5 структуры документа. Этап третий


<body>
  ...
  <h2>Название статьи</h2>
  <section>
    <h3>1 раздел статьи</h3>
    ...
    <section>
      <h4>1 подраздел 1 раздела</h4>
      ...
    </section>
  </section>
  <section>
    <h3>2 раздел статьи</h3>
    ...
    <section>
      <h4>1 подраздел 2 раздела</h4>
      ...
    </section>
    <section>
      <h4>1 подраздел 2 раздела</h4>
      ...
    </section>
  </section>
  <section>
    <h3>3 раздел статьи</h3>
    ...
  </section>
  <section>
    <h4>Комментарии к статье</h4>
    ...
  </section>
  <aside>
    <h5>Дополнительные разделы</h5>
    <section>
      <h5>Поиск</h5>
      ...
    </section>
    <section>
      <h5>Облако тегов</h5>
      ...
    </section>
    <section>
      <h5>Комментарии</h5>
      ...
    </section>
    <section>
      <h5>Статьи</h5>
      ...
    </section>
    <section>
      <h5>Голосование</h5>
      ...
    </section>
    <section>
      <h5>О блоге</h5>
      ...
    </section>
  </aside>
</body>


HTML5 структура страницы:
[document] Название статьи
  [section] 1 раздел статьи
    [section] 1 подраздел 1 раздела
  [section] 2 раздел статьи
    [section] 1 подраздел 2 раздела
    [section] 2 подраздел 2 раздела
  [section] 3 раздел статьи
  [section] Комментарии к статье
[aside] Дополнительные разделы
  [section] Поиск
  [section] Облако тегов
  [section] Комментарии
  [section] Статьи
  [section] Голосование
  [section] О блоге

HTML4 структура страницы:
[h2] Название статьи
  [h3] 1 раздел статьи
    [h4] 1 подраздел 1 раздела
  [h3] 2 раздел статьи
    [h4] 1 подраздел 2 раздела
    [h4] 2 подраздел 2 раздела
  [h3] 3 раздел статьи
    [h4] Комментарии к статье
      [h5] Дополнительные разделы
        [h5] Поиск
        [h5] Облако тегов
        [h5] Комментарии
        [h5] Статьи
        [h5] Голосование
        [h5] О блоге

Проверить разработанную структуру документа можно с помощью следующих инструментов:

  • расширения «HTML5 Outliner» для браузера Google Chrome;
  • онлайн инструмента HTML5 Outliner;
  • сервиса проверки разметки W3C, доступного по адресу https://validator.w3.org/;
  • расширения headingsMap 2.1 для браузера Mozilla Firefox.

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

>Проверка структуры документа с помощью сервиса W3C

Расширение HeadingsMap для браузера Mozilla Firefox — это очень удобный инструмент, который позволяет проверить структуру документа в соответствии со спецификацией HTML5 и HTML4.

Проверка структуры документа с помощью HeadingsMap

В заключение можно отметить то, что авторам при создании структуры документа, необходимо её сделать не только соответствующей спецификации HTML5, но и HTML4. Это утверждение будет ещё актуально довольно продолжительное время, и закончит своё существование только тогда, когда основная масса пользовательских агентов обзаведётся полноценной поддержкой структурных алгоритмов, работающих в соответствии со спецификацией HTML5.

Структура html5 для начинающих — Уроки верстки FreeHtmlThemes

Каждый, даже самый непродвинутый пользователь, хоть раз сталкивался с таким понятием, как HTML. Что же это такое и для каких целей его использовать? Аббревиатуру HTML можно расшифровывать как Hypertext Markup Language. Проще говоря, это язык, используемый для разметки гипертекста. HTML сложно отнести к языкам программирования, это понятие скорее относится к области размещения элементов в браузере. При помощи HTML можно показать обозревателю, как должны располагаться элементы на странице сайта, когда пользователь откроет сайт. 

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

Что такое теги и для чего они нужны?

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

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

<!DOCTYPE html>
<head> 
Заголовок
</head> 
<body>
Тело
</body>
</html>

Теги < !DOCTYPE html> </html> всегда открывают и закрывают документ, DOCTYPE объясняет непонятливому браузеру, как стоит разбирать этот документ, в старых версиях HTML доктайп имел разные значение, в современной пятой версии допустимо вышепредставленное написание, поэтому не будем углубляться в подробности и используем его. Между ними помещаются все остальные теги.

Сам документ делится на «голову» и «тело» документа. Для этого используются теги <body> </body> и <head> </head>. Не сложно догадаться, что тег <body> это тело документа со всеми элементами, которые отображаются на странице, а <head> это голова, в которой содержатся скрипты, метаданные и проч. Содержимое тега head физически мы не видим, но он имеет колоссальное значение для продвижения и функционирования страниц сайта.

Внутри тегов html помещают другие теги, не забывают про голову и тело документа, например,

<b>Содержимое 1</b><p>Содержимое 2</p><div>Содержимое 3</div>

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

Тег <title> </title>. Это обязательный тег, с его помощью размещается необходимый заголовок страницы сайта. Его оптимальная длина 60-70 символов, будьте внимательны. Это название будет отображаться в выдаче поисковика и на вкладке браузера и необходимо для SEO-продвижения. Его необходимо поместить между тегами <head> </head>

Еще одним важным одиночным мета-тегом, который необходимо писать в head проекта становится кодировка документа. Она необходима, чтобы не произошло путаницы с предполагаемой и фактической кодировкой, иначе отображение всего вашего важного контента может превратиться в набор невнятных символов. Самая распространенная кодировка для кириллицы — utf-8, использование других кодировок, на основе windows считается дурным тоном сейчас.

Для поисковой системы большое значение имеют еще два мета-тега, которые прописываются в голове документа, это Keywords (ключевые слова) и Description (краткое описание). В них пишется информация не для пользователей, а для поисковиков, чтобы рассказать о ключевых моментах статьи и ее кратком описании (Длина до 120 символов). Значение для поисковых сиситем этих тегов сейчас остается загадкой, раньше ключевики большое влияние оказывали на выдачу, сейчас ситуация спорная.

<head>
<title>Заголовок</title>
<meta charset="utf-8">
<meta name="description" content="описание">
<meta name="keywords" content="ключевые, слова, через, запятую">
</head>

Почти все теги имеют парную структуру: <> и </>. Это контейнер. Все, что помещается между ними, например, «Заголовок» — содержимое контейнеров.

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

Атрибуты тегов.

Теги могут обладать атрибутикой. Наподобие параметра bgcolor:

<body bgcolor="grey">Текст</body>

Таким образом тег <body> имеет атрибут bgcolor со значением «grey». Так можно сделать фон документа серым. Набор атрибутов у каждого тега различается, все зависит от функционала данного элемента. 

Все теги и атрибуты находятся в свободном доступе. Зайдя в поисковую систему, можно с легкостью найти все теги и параметры, а также их значения. По сути, документ HTML состоит и этих элементов, меняя которые можно построить структуру сайта. Например, на сайта http://htmlbook.ru вы найдете подробное описание всех элементов HTML страницы, тегов, атрибутов, примеров использования. Научиться применять 

Какие теги определяют структуру html страницы, структура тега

Какие теги определяют структуру html страницы

От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.

Теги структуры документа html

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

<!DOCTYPE> — с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.

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

Какие теги определяют структуру html страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Все, тип документа указан и можно двигаться дальше.

<html> — главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

<head> — парный тег, содержащий очень важную информацию для работы веб-страницы, однако его содержимое никак не выводится на нее. В этом контейнере записывается заголовок страницы, возможно, метатеги, кодировка, подключение внешних файлов, таких, как таблицы стилей и скрипты. Вот пример того, как в head записывается кодировка:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Кодировка сама по себе непосредственно никак не отображается на веб-странице и все же она играет большую роль. Если она не будет задана явно, то могут возникнуть ошибки при открытии в разных браузерах, а чтение может оказаться невозможным.

<body> — с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.

Какие теги определяют структуру html страницы

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

Поскольку мы дошли до тела страницы, дальше я бы хотел описать несколько тегов, которые формируют уже непосредственно видимую структуру, то есть те элементы, которые мы видим на странице и которые отделяют информацию друг от друга.

<h2> — <h6> — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h2 заключают название статьи или другой публикации, в h3 – подзаголовки, в h4 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.

Какие теги определяют структуру html страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

<p> — формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?

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

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

Структура тега html

Давайте сразу разберемся на примере.

<h2 class = «title»>Заголовок</h2>

<h2 class = «title»>Заголовок</h2>

Тут видно, что мы не просто написали <h2></h2>. В любой тег можно вписать дополнительные атрибуты. Они пишутся в открывающейся части элемента.

Какие теги определяют структуру html страницы

Сначала пишется имя самого атрибута, а потом задается его значение. В этом примере строчка class = «title» привяжет к нашему заголовку стилевой класс title, так что через него можно будет обратиться к этому элементу в css.

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

Любому html-элементу можно задавать какие-то атрибуты. Есть так называемые универсальные атрибуты, которые можно прописать любому элементу. К примеру, стилевой класс можно привязать к чему угодно. Также есть атрибуты, которые уникальны для каких-то тегов. Например:

<a href =»“#» target = «_blank»></a>

<a href =»“#» target = «_blank»></a>

Здесь атрибут target является уникальным для ссылки, так как ни для каких других элементов он не нужен и не прописывается. Эти и другие атрибуты вы можете выучить в процессе изучения языка HTML. Подробнее со структурой документа можно ознакомиться в учебнике по основам html.

Итог

Из этой статьи мы с вами увидели, что есть определенные теги, без которых на веб-страничке никак не обойтись, ведь они закладывают ее структуру. Конечно, были рассмотрены лишь самые простые. К структурным тегам тела страницы можно также отнести таблицы, списки, фреймы и т.д.

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

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

Какие теги определяют структуру html страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Какие теги определяют структуру html страницы

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

структура html страницы

Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.

Что такое тег в HTML?

Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.

Существует два типа тегов это парные теги и одинарные теги:

  • Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: <html> и </html>; <title> и </title>; <head> и <head>; <body> и </body>; <p> и </p>;
  • Одинарные теги это теги, которые не имею закрывающего тега. Примеры одинарных тегов: <br />. <hr />

У html страницы есть базовая структура. Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью Что такое DOCTYPE и зачем он нужен . Если не укажем этот элемент то браузер отобразит страницу некорректно.

Вот как выглядит базовый каркас html страницы: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="Описание страницы. Не менее 160 символов. " />
        <meta name="keywords" content="Здесь указываем список ключевых слов, разделенные запятой." />
        <title>Главная страница</title>
    </head>
    <body>

    </body>
</html>

Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body, и откроем еще раз эту страницу в браузере. 


<div>
    <p>Моя первая html страница</p>
    <!-- Это комментарий. Он не отображается на странице в браузере. -->
</div>

Вот как выглядит страница в браузере после того как изменили ее код:

Базовая структура html страницы

Анализируем данный пример

В начале страницы, перед тегом html всегда указываем DOCTYPE, то есть тип документа.

Каждая html страница начинается с тега <html> и заканчивается тегом </html> и состоит из заголовка <head></head> и тела <body></body>.

Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:

  • Мета теги. Главные из них это мета-тег кодировки, через которого указываем кодировку страницы (<meta http-equiv=»Content-type» content=»text/html; charset=utf-8″/>), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords).
  • Заголовок страницы, который указывается внутри тега <title></title>. Этот заголовок отображается во вкладке браузера.
  • Блок с внутренними стилями. <style type=”text/css”>Внутренние стили. </style>
  • Одинарный тег <link />, через которого подключаем внешние файлы.
  • А также блок <scriptsrc=»library.js» type=»text/javascript«> </script> в котором пишутся различные скрипты JavaScript.

Внутри тега <body></body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.

Имена тегов можно писать в любом регистре, то есть если напишем <BODY>, <bOdY>,<Body> или <body>, то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть <body>.

Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2014-11-11 15:04:51

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

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