Jump to content

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


timbios
 Share

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

8 members have voted

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

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


Recommended Posts

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

В помощь юзерам форума, делаю тему со спецификацией по 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, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д..

Link to comment
Share on other sites

Новшества в структуре кода 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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...