Советы по написанию Html кода

советы-по-html

Приветствую тебя пользователь! Сегодня я даю советы по html. Для того чтобы красиво верстать необходимо придерживаться определенных правил. Надеюсь мои советы Вам пригодятся. Некоторые из опыта личного, другие были высказаны такими пользователями как и Вы.

Пост будет в виде презентации, в которой я выделил основные моменты. Так что преступаем!

Смотреть презентацию лучше на весь экран

А вот Вам и текстовый вариант, кому лень смотреть ;-)

1. DOCTYPE

Не забывайте прописывать DOCTYPE! Выглядит он так:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>

порой встречаются такие элементы2. Html без css

Выносите css в отдельный файл!
Не пишите так:

<p style= ”margin-top:5px” >Текст</p>

Установлено, что css код утяжеляет вес страниц, поэтому рекомендуется выносить его в css файл.

3. Javascript/скрипты

Все что можно сделать без Javascript, делайте без него!

Используйте сторонние скрипты только при необходимости!

Железное правило. Хотите выпадающее меню? И нам придется использовать javascript? Как бы не так! В интернете множество изящных и простых решений. Особенно, большой функциональностью обладают html 5 и css 3

4. Регистр

Хоть и регист не влияет на html, но не стоит писать так:

<DIV CLASS=”NEWS”>текст</DIV>

или

<DIV class=”NEWS”>текст</div> 

Привыкайте к красоте кода:

<div class=”class”> текст </div>

5. Назначение тегов

Прежде чем написать, подумайте. Возможно есть теги, которые решают Вашу задачу намного проще. Например,

<p style=”font-size:1.2em”> <strong> Заголовок</strong></p>

и

<h2> Заголовок </h2>

Дают один результат.

6. Используйте возможности html тегов

Помните в Html 4 имеет 91 элемент. Проверьте сколько элементов Вы вспомните за 5 минут – пройдите тест

7. Следите за валидностью

Не пишите невалидный код, потому что Вы так хотите. Ориентируйтесь на стандарты.

Проверка html на валидность:

Проверка css на валидность:

8.Формируйте код

Отделяйте код друг от друга. Не лепите все в одну строку.Вы возможно потом сами не сможете разобраться в своей писанине.

В каком коде будет проще работать?

<div id=”sidebar”>
<h3>Новость</h3>
<p>Сама новость...</p>
</div>

или

<div id=”sidebar”> <h3>Новость</h3> <p>Сама новость...</p> </div>

9. Комментирование

Подумайте о тех, кто будет разбираться в Вашем коде! Используйте комментарии:

<!-- начало сайдбара -->
<div id=”sidebar”>
<h3>Новость</h3>
<p>Сама новость...</p>
</div> <!-- конец сайдбара -->

Очень важный пункт. Только не переусердствуйте, не надо писать после каждого дива.

10. Картинки

  • Не грузите большие картинки.
  • Используйте цвета вместо картинок.
  • Прописывайте атрибут alt
  • Указывайте ширину и высоту
  • Подгружайте картинки через css (например,css sprites)

11.Ненужные файлы

  • Не оставляйте в коде лишнее.
  • Удаляйте закомментированные строки, если Вы хотите когда -то их использовать, то сохраните у себя на компьютере.
  • Удаляйте код, если его не используете!
  • Удаляйте картинки, которые не используете! Зачем Вам лишние запросы?!

13. Смысловая нагрузка

Названия классов и id необходимо давать по смыслу например, header, menu, footer, news

Чтобы понять где и что. В больших кодах это очень удобно. Представьте, что все классы и id названы по типу ghhh, privet, lol, pop, tutu и т.  д. Через месяц Вы забудите, что есть что.

14. Берегите глаза

Думайте о пользователях. Не используйте слишком яркие цвета. Хотя об этом в первую очередь должен думать веб-дизайнер))

с/у УтБ

На десерт сегодня очень интересная картинка, которую я встретил на пикабу и не смог не поделиться с Вами ;-)

что не является браузером



Комментарии к статье

  • #

    а можно усвоить написание хтмл без специального образования.

    • #

      легко. У меня не техническое образование ;) главное желание.

  • #

    Мне понравился это изображение:) Это же и вправду так! Всегда что то не получается, когда проверяешь сайт на кроссбраузерность в Ескплорере! И еще многие думают что PHP это трудно. Наоборот намного легче чем вы можете себе представить.Лично я думаю что PHP легкий язык по сравнению с java,c++ и delphi(сравнение не совсем точный. Но я не пользовался другими языками)

  • #

    В чужих руках все так просто, как возьмешся сам темный лес просто)

  • #

    С HTML еще как то более или менее понятно, а вот РНР сколько пытался в нем разобраться, никак. Предлагаю автору написать статейку про РНР, хотя бы просто основные моменты указать. Буду очень благодарен, думаю не только я)))

    • #

      ок, буду иметь ввиду ;)

  • #

    интиресный материал. очень хорошо расписан! читать одно удовольствие. всё сразу стало понятно.
    спасибо!

  • #

    Все что можно сделать без Javascript, делайте без него! – это наибольше понравилось, только без него мало что можно.
    А счётчик LI почему неактивен?

    • #

      недавно заметил, часть кода не правильно скопировал, сейчас должен быть активен

      2Алена я Вас понимаю, чужой код – темный лес) Хотя и свой для других не светлее;-)

      2Яна спасибо, рад, что Вам нравится, ждите продолжения

  • #

    Самое больше ненавижу, когда приходится разбираться и переписывать чужой код, который написан весь большими буквами и в один столбик без какого либо форматирования. А бывают и такие уникалы, которые умудряются в одну строку много команд влепить.

    • #

      чем меньше строк и всяких пробелов тем меньше весит сам файл, а значит будет быстрее загружаться =)

  • #

    Спасибо за информацию, мне как новичку очень пригодится. Добавлю ваш блог в закладки))

  • #

    А что вы думаете про оптимизацию кода WordPress? Можно ли сделать блог не таким “тяжелым”?

    • #

      есть мысли, но думаю это тема отдельного поста ;-)

    • #

      Если разбираешься в php то можно удалить всякие пробелы и не нужный код, это уменьшает размеры файла

      • #

        конечно, меньше символов меньше вес;)

  • #

    Хорошие советы! Я только начинаю писать сайты на HTML, так что пока в моей работе еще маленькие сайты, но ваши советы немного мне помогают! Буду учится дальше=))

    • #

      подписывайтесь чтоб всегда быть в курсе, будет еще много чего интересного ;-)
      Кстати, проверьте свой сайт на вирусы.