Перейти к содержанию
CMSTOOLS.org - форум поддержки и развития CMS

Вырезки из спецификации по HTML 5

timbios

Автор timbios
в HTML + CSS

 Поделиться

Статья была вам интересна?  

9 проголосовавших

  1. 1. Статья информативная? Продолжить сбор "понятной и краткой" информации их спецификации?

    • Да, продолжай написание.
      9
    • Нет.
      0

Рекомендуемые сообщения

timbios CMST+

timbios

Опубликовано
Опубликовано

Всем читающим доброго времени суток!

В помощь юзерам форума, делаю тему со спецификацией по html 5. 

Вырезка из wiki: " Спецификация - определение и перечень специфических особенностей, уточнённая классификация чего-н. "

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

Рассмотрим шаблон построения HTML страницы с комментариями вида "<!-- текст -->", в которых указано описание тегов. 

<!DOCTYPE html>
<html lang="ru">
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" /> <!-- назначем кодировку UTF-8. -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />	<!-- стандартный режим отображения для IE браузера -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />	<!-- грамотное отображение сайта на мобильных устройствах. -->
        <title>Название страницы</title>	<!-- Текст, который указывается во вкладке браузера -->
        <link rel="stylesheet" href="css/normlize.css" />	<!-- файл стилей CSS -->
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">
            <header>Шапка страницы</header>
            <nav>Основное меню страницы</nav>
            <div class="main"> <!-- "срединная" обертка для основного контента (статьи) и сайдбара (боковой панели) сайта -->
                <article>Основная статья страницы</article>
                <aside>Сайдбар (Боковая панель сайта, метки, рубрики, комментарии)</aside>
            </div> <!-- .main -->
            <footer>Подвал страницы</footer>
        </div> <!-- .wrapper -->
    </body>
</html>

Краткий список тегов, которые используются, структуру:

   <meta charset="utf-8" /> — назначем кодировку UTF-8.
   <meta http-equiv="X-UA-Compatible" content="IE=edge" /> — если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> — грамотное отображение сайта на мобильных устройствах.
   <link rel="stylesheet" href="css/normalize.css" /> — вам нужно будет найти и скачать себе файл normalize.css или использовать CSS-фреймворк Bootstrap.

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

Ссылка на комментарий
Поделиться на другие сайты
timbios CMST+

timbios

Опубликовано
  • Автор
Опубликовано

Новшества в структуре кода HTML5 документа

1. В отличии от предыдущих версий языка, в HTML5 существует лишь один доктайп:
<!DOCTYPE html> его например вы можете увидеть в исходниках страниц данного сайта (не забывайте что перед доктайпом ничего не должно быть, ни пробелов, ни переносов строк и т.д.).

2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
<meta http-equiv="content-language" content="ru" /> нужно использовать атрибут lang="ru" в теге <html>: 

<html lang="ru">


3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:
  

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

нужно использовать мета-тег <meta charset="utf-8" />, без атрибутов http-equiv и content

4. При создании JavaSсript сценария, теперь в тег <script>, внедрять атрибуты type="text/javascript" и language="JavaScript" не нужно. 

<script src="script.js"></script>


5. При внедрении CSS стилей, теперь в теги <style> и <link />, внедрять атрибут type="text/css" не нужно. 

<link rel="stylesheet" href="style.css" />
<style></style>


6. Ссылка <а> — это строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.

В HTML4 или XHTML1, валидное обрамление ссылками выглядело так: 

<h3><a href="url">Заголовок</a></h3>
<p><a href="url">Абзац</a></p>


Теперь при HTML5, можно делать так: 

<a href="url">
 <h3>Заголовок</h3>
 <p>Абзац</p></a>
  • Upvote 1
Ссылка на комментарий
Поделиться на другие сайты
  • 3 года спустя...
 Поделиться
Перейти к списку тем
×
×
  • Создать...