21 ошибок HTML и CSS, чтобы избежать

  1. Ошибки HTML
  2. Ошибка № 1 - забыть закрыть тег
  3. Ошибка № 2 - Используйте устаревшие теги
  4. Ошибка № 3 - Включить CSS в HTML
  5. Ошибка № 4 - Использование плохой версии HTML
  6. Ошибка № 5 - написать код поверхности
  7. Ошибка № 6 - Смешайте теги вместе
  8. Ошибка № 7 - Используйте заглавные буквы
  9. Ошибка № 8 - забыть закрыть свои кавычки
  10. Ошибка № 9 - Положите ненужные мета
  11. Ошибка № 10 - неправильное кодирование
  12. Ошибка № 11 - поставить идентификатор вместо класса
  13. Ошибка № 12 - Использование HTML Page Builder
  14. Ошибка № 13 - Сделать структуру таблицы
  15. Ошибки CSS
  16. Ошибка № 14 - забыть закрыть скобки или точки с запятой
  17. Ошибка № 15 - Не устанавливайте сброс CSS
  18. Ошибка № 16 - Не организовывайте свой CSS
  19. Ошибка № 17 - Укажите один шрифт
  20. Ошибка № 18 - Сложный код
  21. Ошибка № 19 - Не используйте шестнадцатеричные коды для цветов
  22. HTML или CSS ошибки
  23. Ошибка № 21 - использовать чужие коды
  24. заключение

Гостевая статья, предложенная Томасом.

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

Для тех, кто не знает, кто я, я предлагаю вам ознакомиться с моей первой статьей в Miss-SEO-Girl под названием " Создание, организация и очистка HTML-кода ».

Прежде чем начать, я хотел еще раз поблагодарить Александру. Всегда приятно иметь возможность передавать свои знания сообществу, подобному этому. Прежде чем начать, я хотел еще раз поблагодарить Александру

Кроме того, эта статья предназначена как для начинающих, так и для более опытных. В наши дни так легко совершать ошибки, что чтение только пойдет вам на пользу! Если вы готовы, мы сможем начать подсчет!

Ошибки HTML

Ошибки HTML

Ошибка № 1 - забыть закрыть тег

Очевидная ошибка, но я все еще вижу слишком часто для меня! Иногда, когда мне приходится смотреть на исходные коды, я замечаю, что браузеры исправляют некорректные закрытия тегов. Перечитайте сами и не забывайте, что в HTML вы должны закрывать теги следующим образом: <yourbroadcast> </ yourbroadcast> ИЛИ <yourbug />

Обратите внимание, что в HTML5 независимые теги формируются как <yourbug> . (Спасибо RG)

Ошибка № 2 - Используйте устаревшие теги

Раньше были такие теги, как <font>, <center>, <basefont> и так далее. Эти теги явно устарели в наши дни. Хотя браузеры интерпретируют их в целом, избегайте их использования. Действительно, большинство изменений, сделанных этими старые теги HTML теперь сделано в вашем коде CSS.

Ошибка № 3 - Включить CSS в HTML

Эта практика все еще широко используется сегодня. Мы включаем CSS в код HTML следующим образом: <p style = "color: red; font-size: 12px; "> Ваш текст </ p>.

За исключением HTML-рассылок, которые являются особыми случаями (и где все это может быть использовано в конце концов), я советую вам централизовать весь ваш CSS в выделенном файле. Это облегчит ваше обслуживание, и HTML-код не будет перегружен. Вам нужно только объявить свою таблицу стилей в заголовке следующим образом: <link rel = "stylesheet" href = "style.css">.

Ошибка № 4 - Использование плохой версии HTML

Будущее разработчиков, безусловно, будет HTML5, но если вы привыкли работать в более ранняя версия XHTML ИЛИ HTML важно проверить, используете ли вы правильный DOCTYPE и относится ли каждый тег к вашей версии HTML. Например, не используйте тег <header>, если вы объявили, что используете HTML4 Transitionnal, это будет считаться ошибкой.

Ошибка № 5 - написать код поверхности

В HTML не используйте код, который бесполезен. Сделайте простую архитектуру, не добавляя слишком много контейнеров или другого. Переходите к простоте и не всегда добавляйте <div>, <p>, когда в этом нет необходимости.

Ошибка № 6 - Смешайте теги вместе

Как написано в моей первой статье, организуйте свой код и сделайте уборку! Теги должны соответствовать друг другу, и они не должны смешиваться. Поэтому не смотрите на такие вещи: <p> <div> <h1> </ p> </ div> </ h1>.

Ошибка № 7 - Используйте заглавные буквы

Написание HTML-тегов в верхнем регистре считается ошибкой кода. Не создавайте теги, которые выглядят как <DIV>, <HTML>, <BODY> и т. Д.

Ошибка № 8 - забыть закрыть свои кавычки

Когда вы указываете значение атрибута: <a href="link"> Ссылка </a>. Не забудьте закрыть кавычки.

Ошибка № 9 - Положите ненужные мета

Не засоряйте мета-тегами, которые бесполезны. Метатеги "Ключевое слово", "Повторный просмотр", "Автор" ... строго больше не используются. Спросите о устаревшие метатеги ,

Ошибка № 10 - неправильное кодирование

Ударения, которые не работают или являются плохими, часто связаны с неправильно выбранной или неправильно используемой кодировкой. Предпочитаю использовать универсальную кодировку, такую ​​как UTF-8, указав ее в заголовке заголовка.

<meta charset = "UTF-8">

Ошибка № 11 - поставить идентификатор вместо класса

Идентификатор можно использовать только один раз на одной странице из-за его уникального характера. Класс может использоваться несколько раз в одном и том же HTML-документе. Поэтому используйте id для уникальных вещей, таких как логотип div, и разместите класс для повторяющихся элементов, например статей.

Ошибка № 12 - Использование HTML Page Builder

Не желая порочить генераторы HTML-страниц или редакторы wysiwyg, большинство из них обычно предоставляют грязный, лишний, загруженный и чрезвычайно сильно поврежденный код. Внимательно посмотрите на код, предоставляемый каждым инструментом, и выберите разработку HTML вручную или с помощью этих программ. Желая сэкономить время, вы часто проигрываете с ними.

Ошибка № 13 - Сделать структуру таблицы

Несколько лет назад структуры многих сайтов создавались в виде таблицы с тегами <table>. Я рекомендую вам максимально использовать CSS или ограничить использование таблиц (за исключением таблиц электронных таблиц, конечно).

Ошибки CSS

Ошибки CSS

Ошибка № 14 - забыть закрыть скобки или точки с запятой

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

Обратите внимание, что можно не указывать точку с запятой для последнего элемента правила CSS. Например: div {color: #FFFFFF; размер шрифта: 12px} (спасибо Scraly)

Ошибка № 15 - Не устанавливайте сброс CSS

Так как все браузеры разные, не забудьте объявить Сброс CSS вверх по течению от вашей традиционной таблицы стилей. Действительно, это позволит начать с хорошей точки зрения с любой точки зрения.

Ошибка № 16 - Не организовывайте свой CSS

CSS часто становятся жертвами нашей лени. Действительно, мы часто пишем элемент за элементом, не беспокоясь о нашей организации. Итак, начните с общих утверждений, затем продолжите с заголовка, тела, боковой панели ... в наиболее логичном порядке.

Ошибка № 17 - Укажите один шрифт

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

Ошибка № 18 - Сложный код

Здесь тоже это очень важно. Не размещайте ненужные CSS-выражения, которые не изменяют внешний вид вашей страницы. Работайте с полезными правилами CSS, которые не сделают ваш код тяжелым и непрактичным.

Ошибка № 19 - Не используйте шестнадцатеричные коды для цветов

Не просто ставьте простые цвета, такие как «красный», «зеленый», «черный» или что-то еще. Отметьте ваши цвета в шестнадцатеричном виде, как это: # FF6600. Вы можете использовать HTML код цвета ,

HTML или CSS ошибки

Ошибка № 20 - Не комментируйте его код

Не комментируйте ваш код, это практика, которую следует избегать. Действительно, если после первой разработки кода пройдет несколько месяцев или даже лет, вы, вероятно, не вспомните, что вы делали раньше. Итак, закомментируйте минимум вашего кода, чтобы найти вас там или помочь вашим преемникам перечитать вас.

Ошибка № 21 - использовать чужие коды

В связи с последним пунктом, я предлагаю вам с осторожностью относиться к кодам HTML и CSS, которые вы можете найти в Интернете. Среда сайта никогда не бывает одинаковой, как и проект, и автор не обязательно каждый раз освещается. Внимательно следите за доступными вам ресурсами, включая мои.

заключение

Есть много других ошибок в HTML и CSS, но вы, вероятно, найдете их по мере разработки. Тем не менее, я призываю вас использовать W3C валидатор чтобы проверить ваши коды и выявить ваши ошибки быстрее. Чем меньше ошибок вы совершите, тем надежнее будет ваш сайт!

Пришло время поблагодарить вас за чтение этой статьи! Я надеюсь, что он научил вас чему-то, и вы будете знать, как справиться со следующей ситуацией! Если у вас есть другие заблуждения или вопросы, не стесняйтесь оставлять комментарии!

GD Star Rating
загрузка ...

Похожие

HTML5: использование элементов секционирования
HTML5 - самая последняя версия разметки HTML. Если вы не были обучены использованию HTML5 или еще не заставили себя использовать / изучать его, новые элементы могут сбивать с толку. Многие разработчики, привыкшие к кодированию в div, обычно не могут понять смысл всех новых элементов секционирования в HTML5. «Почему я не могу просто использовать div, как раньше?» «Какой смысл использовать эти теги, когда они делают то же самое, что и div?». Вот вопросы, на которые я собираюсь ответить для
Не шутка!
... не собирается отпускать того, кто тебя не отпускает? На самом деле, нет слова для нашего слова. Стоит в словарях и в словаре иностранных слов; но он используется только в резкой форме: «не пускай одну хоту »; чаще с рядом тренеров: «не шутка ». Вместо его доклада мы находим такие описания: «Он настаивает на своей позиции, что он не желает идти ни на какие уступки»; или, в более общем смысле, «немного, ничего». Наша лексика на венгерском
Как использовать канонические ссылки с Joomla, чтобы избежать дублирования контента
Как веб-разработчик, осведомленный о SEO, вы должны узнать о канонических ссылках и о том, как их использовать в Joomla. Канонические ссылки - это теги, которые вы вводите на своей странице, чтобы гарантировать, что Google индексирует правильную страницу, и чтобы избежать повторяющихся записей в индексе Google. Многие сайты имеют проблемы с дублирующимися записями в индексе Google. Это может произойти, когда вы используете несколько ссылок на одну и ту же страницу. Например,
»Как сделать SEO свой сайт для Сингапура
... HTML), чтобы устранить любые препятствия для деятельности по поиску в поисковых системах. SEO также использует построение ссылок как еще один метод повышения рейтинга сайтов в поисковых системах. Поисковые оптимизаторы - это практики, которые предлагают услуги по оптимизации. Большинство из них предлагают множество инструментов SEO в сочетании с другими услугами, которые являются синонимами SEO. Большинство оптимизаторов поисковых систем хорошо разбираются в веб-дизайне, поскольку
Купить Apple iPod Touch 2015 - Должен или не должен?
Apple только что «установила» iPod Touch 2015, имеет то же аппаратное обеспечение, что и iPhone 6. Этот новый iPod быстрее и имеет лучшую камеру. Мы часто называем iPod «карманными iPad», и это до сих пор верно. У него такое же mp3-приложение, такой же способ доступа к Apple App Store, и оно дает вам возможность
Правильный путь для блогов, чтобы войти Page 1 Google
Каждый раз владелец блога определенно хочу блог они могут появиться на первой странице Google, а псевдоним может появиться на первой странице поиска, и это один из индикаторов, который необходимо использовать, чтобы многие посетители заходили в блог. но большинство владельцев блогов не могут использовать эту возможность, поскольку им трудно разместить свой блог на первой странице поиска Google. Чтобы удовлетворить
15 важных факторов успеха Google SEO
... не только следующие факторы, но и вместе они очень важны. Возможно, не каждый фактор будет применяться к вашему сайту, но подавляющее большинство будет иметь большое влияние на ваш рейтинг и видимость. Содержание: Макет и дизайн Использование соответствующих ключевых слов, фраз и тем Использование оптимизированных изображений и видео воплощение
SEO и HTML 5, истины и мифы в SeoAgencias
Мы знаем, что Google все больше ищет актуальности в высококачественном контенте и семантической области. В каждом обновлении алгоритма мы понимаем, что качественный контент также должен быть семантическим, то есть иметь смысл как для пользователей, так и для робота Google, робота Google. Одной из самых обсуждаемых тем в SEO является код сайта, который может влиять на рейтинг в Google. Если ваш сайт написан на HTML 5, можете ли вы получить преимущество?
Может ли тег H1 улучшить мой SEO?
... html"> поисковая оптимизация , Мы начнем с введения тегов заголовка и объясним, как работают теги H1 с точки зрения поисковой системы. Что такое заголовки или теги заголовков? До появления веб-страниц в печатных материалах, таких как книги, газеты и журналы, использовался текст заголовка для разделения или введения более длинных блоков письма. Этот текст, как правило, был больше, другим шрифтом или выделен иным образом, чтобы отличаться от остальной
Как сделать структуру сайта, которая является SEO
... CSS Если мы делаем навигацию, сделайте ее простой и не слишком сложной как с точки зрения написания, размещения и слов. HTML и CSS - лучшее средство для навигации. Размещение URL-адресов навигации с помощью JavaScript, Flash и Ajax ограничит возможности сканеров исследовать веб-навигацию и иерархию. Если мы планируем создать сайт с CMS, пожалуйста, посетите учебник " Список лучших и бесплатных
Как сделать метатеги
Как создать метатег - Здравствуйте, друг Неттер, увидимся снова со мной в статье о том, как создать прибыльный сайт. В предыдущей статье я обсуждал, как исследовать ключевые слова с помощью Google Planner, который могут прочитать мои друзья. здесь. Для создания веб-сайта мы не должны быть небрежными, потому что нам нужно подготовить

Комментарии

Она цепкая и, естественно, достаточно талантлива, чтобы сделать это, но позволит ли большой плохой город ей осуществить свои мечты, или он сокрушит их под ногами нетерпеливых собратьев?
Она цепкая и, естественно, достаточно талантлива, чтобы сделать это, но позволит ли большой плохой город ей осуществить свои мечты, или он сокрушит их под ногами нетерпеливых собратьев? Чтение «Моя не такая идеальная жизнь» позволяет вам заглянуть в мир брендинга и маркетинга, и заставляет задуматься о том, насколько фальшивыми и одержимыми тенденциями стали наши жизни. Похоже, что если вы используете достаточно правильных слов, чтобы описать что-то, например, сделанное на заказ, ремесленное,
Или основной контент, который находит время, чтобы вспомнить основы, чтобы не потерять никого в пути?
Или основной контент, который находит время, чтобы вспомнить основы, чтобы не потерять никого в пути? Тип текста Здесь мы также находимся в центре контент-стратегии. Тип текста зависит от нескольких факторов: предполагаемая аудитория, ваши конкретные цели. Какова цель контент-стратегии: повысить узнаваемость или увеличить продажи? Занимаете лидирующую позицию в своем секторе или создаете информационный бюллетень, собирая информацию о перспективах? Сравнительный,
Вы один из тех людей, которые думают, что поисковая оптимизация - это сложный, сложный процесс, который никогда не может быть решен?
Вы один из тех людей, которые думают, что поисковая оптимизация - это сложный, сложный процесс, который никогда не может быть решен? Я знаю, откуда ты. Я был в том же положении, что и вы. Но благодаря опыту и использованию правильных инструментов для меня все стало сходиться. Одним из инструментов, который я предлагаю вам использовать, является SEO SiteCheckup. Он предоставляет множество функций, включая, но не ограничиваясь: Анализ проблем SEO
Может быть, вы не можете сделать это для всех своих продуктов, но не могли бы вы сделать это для лучших 10 процентов?
Может быть, вы не можете сделать это для всех своих продуктов, но не могли бы вы сделать это для лучших 10 процентов? Верхний процент? Топ-20 лучших продавцов, те, которые имеют наибольшую маржу или те, которые вам нужно продать больше всего с точки зрения бизнес-стратегии? Постарайтесь не думать о SEO как о всем или ничего, а как о процессе, с помощью которого вы можете оптимизировать те области, которые наиболее важны для вашего бизнеса.
Если вы достигаете целей KPI и / или ROI, почему бы не инвестировать немного больше средств в бюджет и не использовать как можно большую часть этой доли рынка?
Если вы достигаете целей KPI и / или ROI, почему бы не инвестировать немного больше средств в бюджет и не использовать как можно большую часть этой доли рынка? Какие инструменты доступны? Информация об аукционе через кампанию AdWords В AdWords вы можете просмотреть информацию об аукционе, чтобы определить, какие
Если вы не уверены, с чего начать с точки зрения тестирования ключевых слов, подумайте об этом так: какое слово или фразу кто-нибудь введет, чтобы найти ваш сайт?
Если вы не уверены, с чего начать с точки зрения тестирования ключевых слов, подумайте об этом так: какое слово или фразу кто-нибудь введет, чтобы найти ваш сайт? В идеале каждая страница вашего сайта или поста в вашем блоге должна быть ориентирована на одно конкретное ключевое слово или тему. При этом избегайте нацеливания одного и того же ключевого слова
Почему бы не смешать структуру для каждого раздела, чтобы сделать его более привлекательным?
Почему бы не смешать структуру для каждого раздела, чтобы сделать его более привлекательным? Один раздел может иметь 3 столбца, а другой 2 столбца. Добавить фото или слайд-шоу с помощью Фотоэлемент разбить текст. Используйте горизонтальные линии с элементами разметки сверху и снизу для разделения секций Имейте достаточно пустого пространства между каждой секцией. Активировать
Если вы ищете агентство цифрового маркетинга в Манчестере, чтобы помочь вам с SEO, почему бы не связаться с нами и не узнать, как мы можем помочь?
Если вы ищете агентство цифрового маркетинга в Манчестере, чтобы помочь вам с SEO, почему бы не связаться с нами и не узнать, как мы можем помочь?
Таким образом, ссылка со значением do-follow является сайтом, на который мы должны получить обратные ссылки и не следовать, чтобы избежать, потому что он ничего не дает?
Таким образом, ссылка со значением do-follow является сайтом, на который мы должны получить обратные ссылки и не следовать, чтобы избежать, потому что он ничего не дает? но говорить так не совсем правильно. Значение ссылок nofollow даже на упомянутых высококачественных сайтах может дать толчок вашему сайту. Так как некоторые из обратных ссылок, которые вы получаете, являются более ценными, чем другие, ссылки, которые вы делаете на другие сайты, также различаются по значению.
Может ли ваша страница достичь лучшего рейтинга, не жертвуя при этом значительной частью своего драгоценного времени и не выбрасывая сотни или тысячи долларов?
Может ли ваша страница достичь лучшего рейтинга, не жертвуя при этом значительной частью своего драгоценного времени и не выбрасывая сотни или тысячи долларов? (Связанное содержание: ) Хотя это требует много времени
Но как вы делаете это таким образом, чтобы гарантировать, что они не скажут «нет» или проигнорируют вас?
Но как вы делаете это таким образом, чтобы гарантировать, что они не скажут «нет» или проигнорируют вас? Ну, вы можете начать предлагать им что-то ценное, а не просто просить об одолжении. Например, если ваша инфографика представлена ​​в лучших веганских ресторанах города, то вы можете обратиться к влиятельным блоггерам и писателям, которые заинтересованы в веганском ужине. Затем вы можете отправить им электронное письмо с просьбой проверить вашу инфографику, которая наверняка заинтересует
5. «Почему я не могу просто использовать div, как раньше?
» «Какой смысл использовать эти теги, когда они делают то же самое, что и div?
Не собирается отпускать того, кто тебя не отпускает?
Если ваш сайт написан на HTML 5, можете ли вы получить преимущество?
Может ли тег H1 улучшить мой SEO?
Что такое заголовки или теги заголовков?
Она цепкая и, естественно, достаточно талантлива, чтобы сделать это, но позволит ли большой плохой город ей осуществить свои мечты, или он сокрушит их под ногами нетерпеливых собратьев?
Или основной контент, который находит время, чтобы вспомнить основы, чтобы не потерять никого в пути?
Какова цель контент-стратегии: повысить узнаваемость или увеличить продажи?
Занимаете лидирующую позицию в своем секторе или создаете информационный бюллетень, собирая информацию о перспективах?