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

  • Используйте html по его прямому назначению
  • Структура документа – это главное
  • Тэги div и span
  • Что нужно забыть об html
  • Правильное использование html для современной верстки

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

Если вам не нравится как что то выглядит на странице (размер заголовка <h1> или отступы), вы все сможете исправить и поправить с помощью правил css. Что такое правила css, мы поговорим позже.

Структура – это главное

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

  • У страницы должен быть только один заголовок первого уровня <h1>, последующие заголовки должны быть от уровня <h2> до уровня <h6> по важности заголовка.
  • Абзацы нужно располагать в тег <p>
  • Если у вас присутствует ненумерованный список, его нужно вывести в теге <ul>
  • Нумерованный список выводите в теге <ol>

Для вывода специфичного содержания, есть особые теги, <abbr> – для вывода сокращений, <code> – для вывода программного кода.

При написании html кода под css, нужно в первую очередь ориентироваться на роль которую играет содержимое на странице, а не на внешний вид который текст приобретает на веб странице.

Если вам нужно создать навигацию на сайте, лучше всего использовать тег <ul> – тег ненумерованного списка. Потому как навигация, это не что иное как список ссылок. А вот то, что он будет изначально выглядеть не так как вы хотите, это можно будет исправить с помощью css. Вы сможете сделать элегантную навигационную панель с горизонтальным или вертикальным расположением ссылок.

Тэги DIV и SPAN

Html тегов на самом деле очень много, но под все случаи придумать теги невозможно. Поэтому в html есть два универсальных тега <div> и <span>. Эти тэги созданы для определения логического фрагмента страницы.

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

В тегах <div> и <span> отсутствуют какие либо свойства для визуализации. Это как два прозрачных блока, которые вы сами заполняете.

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

Вложение тегов div можно делать столько, сколько вам нужно. К примеру можно определить шапку (header) сайта и в нее поместить логические блоки в тегах div как логотип сайта, место для баннера или описания сайта.

Как использовать теги div в верстке станиц, мы рассмотрим далее в обучающем курсе.

Тег span похож на тег div в смысле того, что он также не имеет свойств для визуализации, но его применения немного иное. Тег span применяется к внутренним элементам страницы, так называемые inline элементы. Это слова или набор слов которые находятся в пределах абзаца или заголовка.

Он используется так же как и другие inline теги html: <a>, <strong>, <em> и т.д.

Вы можете с помощью этого тега изменить форматирования или цвет:

Как использовать теги span и div в полной мере, мы будем рассматривать далее по курсу, просто запомните, что это самый мощный инструмент современной блочной и резиновой верстки web страниц.

Что нужно забыть об html

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

  • Тег <font> для визуального воздействия на текст.
  • Откажитесь от тегов <b> и <li> для форматирования текста жирным выделением и курсивом. Это старые html теги на смену которым уже давно пришли теги <strong> и <em>.
  • Не используйте тег <table>для верстки веб станиц. Используйте этот тег только для вставки табличных данных в контент сайта. Всю разметку которую можно сделать с этим тегом, можно сделать элементами <div> намного быстрее и элегантнее и в ногу со временем.
  • Уберите все атрибуты из тега <body>, такие как: background, link, alink, text, bgcolor. Все это можно сделать с помощью таблиц стилей.
  • Если вы используете тег <br> для создание отступов, откажитесь от этого. Все это можно сделать свойствами margin и padding в css, не затрагивая код сайта.

Правильное использование html для современной верстки

Для создание хороших и современных структурированных страниц, всегда следуйте следующим советам:

  • Всегда применяйте только один тег заголовка <h1>
  • Используйте заголовки <h2> – <h6> для выделения важности блоков текста.
  • Для абзаца используйте тег <p>.
  • Если у вас есть перечень свойств или список чего либо, используйте для него ненумерованных список <ul>.
  • Для последовательного списка действий используйте нумерованный список <ol>
  • Если вам нужно вставить цитату в статью, применяйте теги <blockquote> для длинных цитат, тег <q> для коротких цитат.
  • Не нужно изменять внешний вид текста или изображения с помощью атрибутов тегов, это все легко делается средствами css.
  • Всегда используйте теги для решение их прямых задач. К примеру если вам нужно вставить словарь терминов, используйте теги <dl> (список определения терминов) с тегом <dt> (название термина) и <dd> (определения термина). В html5 этот аспект стоит еще острее. В дальнейшем я напишу о правильном применении специальных тегов html5.
  • Если вы не нашли тег специальный для ваших нужд, или вам нужно выделить логические блоки сайта, используйте теги div и span.
  • Не злоупотребляйте вложениями тегов div. Порой это доходит просто до абсурда.
  • Не забывайте закрывать теги, к примеру тег <p> текст </p> за исключением не закрывающихся тегов: <img/>, <br/>.
  • Проверяйте синтаксис своих страниц в помощью W3C валидатора. Неправильно написанный код может привести к ошибкам.

В следующем уроке, мы поговорим о том, что такое css стили и как их создавать.

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

12 правил написания HTML кода для CSS Владимир Полковниченко Основы CSS,
В первом уроке обучающего курса мы выяснили что такое css и зачем он нужен. В этом уроке, мы обсудим фундаментальные правила написания html кода для css. Используйте html по его прямому назначению Структура документа - это главное Тэги div и span Что нужно забыть об html Правильное использование html для современной верстки Прямая обязанность html,...
В первом уроке обучающего курса мы выяснили <a title="Что такое CSS и зачем он нужен?" href="/css/obuchenie-css/osnovy-css/chto-takoe-css-i-zachem-on-nuzhen.html" target="_blank">что такое css и зачем он нужен</a>. В этом уроке, мы обсудим фундаментальные правила написания html кода для css. <ul> <li>Используйте html по его прямому назначению</li> <li>Структура документа - это главное</li> <li>Тэги div и span</li> <li>Что нужно забыть об html</li> <li>Правильное использование html для современной верстки</li> </ul> Прямая обязанность html, это создание структуры документа. Использовать средства html для дизайна, это признак дурного тона.<span id="more-121"></span> Если вам не нравится как что то выглядит на странице (размер заголовка <h1> или отступы), вы все сможете исправить и поправить с помощью правил css. <a title="Что такое правила css" href="/css/obuchenie-css/osnovy-css/chto-takoe-css-stili-pravila-i-kak-ix-sozdavat.html" target="_blank">Что такое правила css</a>, мы поговорим позже. <h3>Структура - это главное</h3> У каждой веб страницы должна быть логическая структура. Если это текст, его нужно разделить на логические блоки. <ul> <li>У страницы должен быть только один заголовок первого уровня <h1>, последующие заголовки должны быть от уровня <h2> до уровня <h6> по важности заголовка.</li> <li>Абзацы нужно располагать в тег <p></li> <li>Если у вас присутствует ненумерованный список, его нужно вывести в теге <ul></li> <li>Нумерованный список выводите в теге <ol></li> </ul> Для вывода специфичного содержания, есть особые теги, <abbr> - для вывода сокращений, <code> - для вывода программного кода. [crayon-56611e82f3daf101861903/] При написании html кода под css, <strong>нужно в первую очередь ориентироваться на роль</strong> которую играет содержимое на странице, <strong>а не на внешний вид</strong> который текст приобретает на веб странице. Если вам нужно создать навигацию на сайте, лучше всего использовать тег <ul> - тег ненумерованного списка. Потому как навигация, это не что иное как список ссылок. А вот то, что он будет изначально выглядеть не так как вы хотите, это можно будет исправить с помощью css. Вы сможете сделать элегантную навигационную панель с горизонтальным или вертикальным расположением ссылок. <h3>Тэги DIV и SPAN</h3> Html тегов на самом деле очень много, но под все случаи придумать теги невозможно. Поэтому в html есть два универсальных тега <strong><div></strong> и <strong><span></strong>. Эти тэги созданы для определения логического фрагмента страницы. <strong>Div и span</strong> позволяют точно задать любой фрагмент веб странице. А в последствии применить к нему стили css для изменения внешнего вида или позиционирования. В тегах <div> и <span> отсутствуют какие либо свойства для визуализации. Это как два прозрачных блока, которые вы сами заполняете. Тег div используется для деления страницы на фрагменты ( шапка сайта, правый или левый блок, блок основного содержимого, подвал сайта), или для определения какого либо содержимого (абзац, изображение и т.д.). Вложение тегов div можно делать столько, сколько вам нужно. К примеру можно определить шапку (header) сайта и в нее поместить логические блоки в тегах div как логотип сайта, место для баннера или описания сайта. [crayon-56611e82f3dbf864488925/] Как использовать теги div в верстке станиц, мы рассмотрим далее в обучающем курсе. Тег span похож на тег div в смысле того, что он также не имеет свойств для визуализации, но его применения немного иное. Тег span применяется к внутренним элементам страницы, так называемые inline элементы. Это слова или набор слов которые находятся в пределах абзаца или заголовка. Он используется так же как и другие inline теги html: <a>, <strong>, <em> и т.д. Вы можете с помощью этого тега изменить форматирования или цвет: [crayon-56611e82f3dc7301589425/] Как использовать теги span и div в полной мере, мы будем рассматривать далее по курсу, просто запомните, что это самый мощный инструмент современной блочной и резиновой верстки web страниц. <h3>Что нужно забыть об html</h3> Для современной верстки веб страниц, есть теги и особенности языка html, которые нужно забыть и не использовать ни при каких обстоятельствах: <ul> <li>Тег <font> для визуального воздействия на текст.</li> <li>Откажитесь от тегов <b> и <li> для форматирования текста жирным выделением и курсивом. Это старые html теги на смену которым уже давно пришли теги <strong> и <em>.</li> <li>Не используйте тег <table>для верстки веб станиц. Используйте этот тег только для вставки табличных данных в контент сайта. Всю разметку которую можно сделать с этим тегом, можно сделать элементами <div> намного быстрее и элегантнее и в ногу со временем.</li> <li>Уберите все атрибуты из тега <body>, такие как: background, link, alink, text, bgcolor. Все это можно сделать с помощью таблиц стилей.</li> <li>Если вы используете тег <br> для создание отступов, откажитесь от этого. Все это можно сделать свойствами margin и padding в css, не затрагивая код сайта.</li> </ul> <h3>Правильное использование html для современной верстки</h3> Для создание хороших и современных структурированных страниц, всегда следуйте следующим советам: <ul> <li>Всегда применяйте только один тег заголовка <h1></li> <li>Используйте заголовки <h2> - <h6> для выделения важности блоков текста.</li> <li>Для абзаца используйте тег <p>.</li> <li>Если у вас есть перечень свойств или список чего либо, используйте для него ненумерованных список <ul>.</li> <li>Для последовательного списка действий используйте нумерованный список <ol></li> <li>Если вам нужно вставить цитату в статью, применяйте теги <blockquote> для длинных цитат, тег <q> для коротких цитат.</li> <li>Не нужно изменять внешний вид текста или изображения с помощью атрибутов тегов, это все легко делается средствами css.</li> <li>Всегда используйте теги для решение их прямых задач. К примеру если вам нужно вставить словарь терминов, используйте теги <dl> (список определения терминов) с тегом <dt> (название термина) и <dd> (определения термина). В html5 этот аспект стоит еще острее. В дальнейшем я напишу о правильном применении специальных тегов html5.</li> <li>Если вы не нашли тег специальный для ваших нужд, или вам нужно выделить логические блоки сайта, используйте теги div и span.</li> <li>Не злоупотребляйте вложениями тегов div. Порой это доходит просто до абсурда.</li> <li>Не забывайте закрывать теги, к примеру тег <p> текст </p> за исключением не закрывающихся тегов: <img/>, <br/>.</li> <li>Проверяйте синтаксис своих страниц в помощью <a title="валидатор" href="/" target="_blank">W3C валидатора</a>. Неправильно написанный код может привести к ошибкам.</li> </ul> В следующем уроке, мы поговорим о том, <a title="что такое css стили и как их создавать" href="/css/obuchenie-css/osnovy-css/chto-takoe-css-stili-pravila-i-kak-ix-sozdavat.html" target="_blank">что такое css стили и как их создавать</a>. Если у вас есть что добавить, пишите пожалуйста в комментариях.