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

timbios · 12 марта, 2019

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

В помощь юзерам форума, делаю тему со спецификацией по 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 · 14 марта, 2019

Новшества в структуре кода 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>

OKLIX · 19 июня, 2022

спасибо, интересная информация)

timbios

Ссылка на комментарий

Поделиться на другие сайты

timbios

Ссылка на комментарий

Поделиться на другие сайты

OKLIX

Ссылка на комментарий

Поделиться на другие сайты

Присоединяйтесь к обсуждению

Войти

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

Статья была вам интересна?
9 проголосовавших

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

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

Обзор

Активность

Загрузки

Войти

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

Статья была вам интересна? 9 проголосовавших

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

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

Ссылка на комментарий

Поделиться на другие сайты

Ссылка на комментарий

Поделиться на другие сайты

Ссылка на комментарий

Поделиться на другие сайты

Присоединяйтесь к обсуждению

Статья была вам интересна?
9 проголосовавших