Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Html как выглядит

Как выглядит красивый HTML-код

Крис Койер (Chris Coyier), автор CSS-Tricks, опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код.

В своей статье он показывает пример, который представлен в трех вариантах:

PNG-скриншот;
оригинал в PSD-формате;
текстовый вариант.

Ниже я хочу привести свой свободный перевод комментариев к скриншоту (читай — рекомендации по написанию HTML-кода):

HTML5 — веб-стандарт HTML5 с его новыми элементами позволяет создать самый красивый HTML-код.
DOCTYPE (тип документа) — HTML5 имеет лучший DOCTYPE из всех существующих. Он прост в написании и легок для запоминания.
Indentation (отступы) — в коде используются отступы (через табуляторы или пробелы), это помогает проследить иерархию кода, т.е. увидеть структуру родительских и дочерних тегов.

Charset (кодировка) — указывается до какого-либо содержимого страницы.
Title (заголовок) — заголовок сайта прост и понятен. Сначала в заголовке идет название страницы (если это не главная), затем ставится разделитель, и после него идет название сайта.
CSS — используется только один файл стилей (типы носителей указываются внутри таблицы стилей) и отдается он только хорошим браузерам. Браузеру IE версии 6 и ниже передается универсальный файл стилей.
Body (тег ) — к нему добавлен идентификатор, чтобы можно было оформлять разные страницы без дополнительной разметки.
JavaScript — jQuery (самый красивый JavaScript-фреймворк) подключается с сайта Google. Подключается только один файл с JavaScript. Оба файла прописываются внизу кода страницы.
File Paths (пути к файлам) — для повышения эффективности используются относительные пути к файлам. К таким файлам, как, например, изображения, указываются абсолютные пути, т.к. они могу быть синдицированы, т.е. использованы в RSS-потоках.
Image Attributes (параметры изображений) — изображения содержат альтернативный текст. Высота и ширина указываются для эффективности рендеринга страницы.
Main Content First (главный контент — в самом начале) — главное содержимое страницы идет после названия сайта с описанием и меню, но до второстепенной информации, которая обычно размещается в сайдбарах.
Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы) — используются теги , , , , и т.д. Все они надлежаще описывают содержимое, которое в них находится, нежели тег , используемый ранее.

Hierarchy (иерархия) — используются теги заголовков
…, которые показывают иерархию содержимого страницы.
Appropriate Descriptive Tags (семантически правильные теги) — списки оформлены в HTML как списки в зависимости от их содержимого: либо нумерованные
P.S. Признаюсь, я грешен =) Я не всегда выполняю некоторые из рекомендаций, однако стремлюсь это делать.
Как выглядит на html5 структура страницы?
Приветствую вас у себя на блоге. Html5 появился уже очень давно, но не все мы до сих пор знаем все его особенности и нововведения. Я вот буквально вчера узнал новый тег, о существовании которого не догадывался. Ну да ладно, сегодня мы рассмотрим более простой вопрос. А именно, как выглядит в html 5 структура страницы? Вопрос достаточно важный, потому что семантические элементы — одно из главных нововведений этой версии html.

Структура страницы наглядно
В такой статье просто не обойтись без картинки, а именно изображения этой самой структуры, поэтому я быстро нарисовал в paint простой вариант верстки на html5. Схема кривая, прошу простить, талантом рисовальщика обделен:
Как видите, здесь новые теги, которых небыло в html4. И это:
1. header — первый новый семантический тег, который используется для обозначения шапки как у сайта в целом, так и у каких-то конкретных секций. Своя шапка может быть в статье, в новости, в карточке товара и т.д. Поэтому не удивляйтесь, если видите несколько header-ов на странице.
2. nav — контейнер для важных навигационных ссылок на сайте. Иными словами, в него помещают главное меню, а также дополнительные меню, если они есть на сайте.
3. article — тег для основного текста на странице. Это может быть статья, новость, описание товара, заметка в блог, анонс статьи и т.д.
4. aside — спорный тег. Многие говорят, что его нужно использовать для вывода сайдбара или боковой колонки, другие говорят, что в него помещается информация в статье, которая не имеет прямого отношения к основному содержимому. Мне более логичным видится вывод боковой колонки через этот тег.
5. footer — подвал сайта, хотя, как и header, может быть подвалом статьи, новости и т.д.
Это те теги, которые вы можете увидеть на рисунке. Помимо этого я не упомянул еще один важный тег. Это section или секция. Как его использовать — вопрос тоже спорный. Вообще, в большой статье, например, мощно сделать несколько секций. Определение секции таково, что в ней должен быть заголовок.
Соответственно, секцией может выступать глава книги, подраздел статьи и что-то в этом духе. В общем, придумать применение секциям можно.
Так ли важна идеальная разметка?
Я вам сразу скажу — нет. Если вы не совсем правильно будете использовать теги, ничего катастрофического не случится. Просто есть оптимальный вариант, о нем я попытался вам сказать в этой статье и его лучше придерживаться.
Но не нужно думать, что если заключить article в section или в nav занести не самые приоритетные ссылки, то вы потеряете много поискового трафика. Я уверен, что минимально все это влияет на оптимизацию и качество сайта, но не более того. Да и к тому же, кто сказал, что статья не может располагаться в секции?
Конечно, не совершайте грубых ошибок. Не стоит заключать в тег header основной текст. Я не говорю о том, что это катастрофа для сео, но лучше так не делать, чтобы не запутывать лишний раз поискового робота.
В общем, теперь вы примерно знаете, как выглядит на html5 структура сайта. Придерживайтесь примерно такого подхода и тогда ваша верстка будет качественной и семантической.
Как должен выглядеть прекрасный HTML-код

Несколько вольный перевод статьи «What Beautiful HTML Code Looks Like». Возможно кому-то это покажется известным, но возможность лишний раз систематизировать знания никогда не помешает, я уверен. Эту статью я написал более двух лет назад. Однако сейчас, с приходом HTML5, сделавшим HTML даже более прекрасным нежели XHTML 1.1, она стала немного не актуальна, поэтому я обновил ее. Обычно я стараюсь просмотреть код страницы (View source) каждого приятного попадающегося мне сайта. Это что-то вроде рентгеновских очков, позволяющих узреть любого человека, когда-либо увиденного вами, в нижнем белье здесь и сейчас, по вашему желанию. Клево, не правда ли? Эта простая возможность позволяет увидеть — так ли хорош его код, или его красота поверхностна. Код? Красивый? Конечно. Ведь, в конце концов, код — это поэзия. И не смотря на то, что HTML не может быть столь сложным и изысканным, как динамический язык, но он по-прежнему несет почерк своего создателя. Как вы думаете, что делает код красивым? В HTML это сводится к мастерству. Давайте посмотрим на пример разметки и на то, какой красивой она может и, несомненно, должна быть. А вот, собственно, и картинка (кликабельно, 2000×2000, 770кб):

Итоговая картинка (ссылка на оригинальную картинку, на англ. прим. пер.) достаточна большая, чтобы распечатать ее и повесить на стену, удивив друзей. Также я сделал PSD-файл, который можно использовать, если вы захотите что-либо изменить.

Что-то упустил? Предлагаю обсудить в комментариях :)
Теги:
- web-разработка
- верстка
- хороший тон
- красота
- html5
Смотрите также