Программирование для начинающих: 10 лучших практик программирования HTML, которые вы должны знать
HTML… Одна из самых простых вещей в программировании. Большинство новичков и даже детей начинают программировать с помощью HTML. Они учатся, создают некоторые веб-страницы, но многие разработчики даже сталкивались с одной глупой ошибкой при написании кода для внешнего интерфейса. Эти глупые ошибки не только раздражают других разработчиков (когда им нужно внести некоторые изменения), но также вредит вашему основному сайту и отталкивает конечного пользователя. Мы собираемся упомянуть некоторые общие и передовые практики, которым вы должны следовать, чтобы написать чистый и понятный HTML-код.
Следование некоторым общепринятым практикам упрощает отладку и экономит много времени. Это также помогает в поисковой оптимизации.
1. Используйте правильную структуру документа с Doctype
HTML имеет характер того, что он по-прежнему будет правильно отображать вашу разметку, даже если вы забудете упомянуть некоторые элементы, такие как <html> , <head> , <body> и <! DOCTYPE html> . Вы увидите правильный результат в своем браузере, как хотите, но это не значит, что вы найдете одинаковый результат в каждом браузере. Чтобы избежать этой проблемы, рекомендуется придерживаться правильной структуры документа с правильным типом документа. Doctype - это первое, о чем следует упомянуть в HTML-документе. Вы можете выбрать правильный тип документа по ссылке https://www.w3.org/wiki/Doctypes_and_markup_styles
Пример:
HTML
<!DOCTYPE html><html> <head> <title>Hello World</title> </head> <body> <h1>Welcome Programmers</h1> <p>This website is GeeksforGeeks.</p> </body></html> |
2. Закройте теги.
Чтобы избежать проблем с проверкой и совместимостью, не забудьте закрыть все теги в своем коде. Сегодня большинство текстовых редакторов предлагают функции, которые автоматически закрывают HTML-теги, это хорошая практика (и определенно для окончательной проверки), чтобы убедиться, что вы не пропустите ни один родительский или вложенный тег, который не закрыт. В HTML5 закрывать HTML-теги необязательно, но в соответствии со спецификацией W3C вы должны закрыть все HTML-теги, чтобы избежать ошибок проверки в будущем.
3. Пишите теги в нижнем регистре.
Возьмите за привычку использовать строчные буквы для всех тегов, атрибутов и значений в HTML-коде. Это стандартная практика, которая делает ваш код более читабельным. Использование заглавных букв в тегах не повлияет на результат в вашем браузере, но рекомендуется писать элементы в нижнем регистре. Писать код в нижнем регистре легко, и он выглядит чище.
Пример:
HTML
<!-- Bad code-->< SECTION > < p >This is a paragraph.</ p ></ SECTION > <!-- Good code-->< section > < p >This is a paragraph.</ p ></ section > |
4. Добавьте атрибуты изображения.
Когда вы добавляете изображение в свой HTML-код, не забудьте добавить атрибут alt для проверки и доступности. Также убедитесь, что вы выбрали правильное описание для атрибута alt. Поисковые системы ранжируют вашу страницу ниже в результате, когда вы не упоминаете атрибуты alt с изображением. Также полезно указать высоту и ширину изображения. Это уменьшает мерцание, потому что браузер может зарезервировать место для изображения перед загрузкой.
Пример:
HTML
<!-- Bad Code-->< img src = "html5.gif" > <!-- Good Code-->< img src = "html5.gif" >< img src = "html5.gif" alt = "HTML5" style = "width:100px;height:100px" > |
5. Избегайте использования встроенных стилей.
Многие новички совершают эту ошибку, добавляя встроенный стиль в теги HTML. Это делает ваш код сложным и трудным в обслуживании. Возьмите за привычку хранить стили отдельно от разметки HTML. Использование встроенных стилей может создать множество проблем. Это делает ваш код загроможденным, нечитаемым и трудным для обновления или поддержки. Разделение HTML с помощью CSS также помогает другим разработчикам очень легко вносить изменения в код.
Пример:
HTML
<!-- Bad Code -->< p style = "color: #393; font-size: 24px;" >Thank you!</ p > <!-- Good Code -->< p class = "alert-success" >Thank you!</ p > |
6. Используйте содержательный заголовок и описательные метатеги.
HTML-заголовок действительно имеет большое значение, когда дело доходит до поисковой оптимизации или ранжирования вашей страницы. Всегда старайтесь сделать свой заголовок максимально значимым. Заголовок вашей HTML-страницы отображается на странице результатов поисковой системы Google, и индексирование вашего сайта зависит от него.
Мета-описание сообщает пользователю, о чем эта страница, поэтому сделайте его описательным, четко указав цель вашего веб-сайта или страницы. Избегайте повторения слов и фраз. Когда пользователь вводит какое-либо ключевое слово в строке поисковой системы, это ключевое слово улавливается пауками поисковой системы, а затем используется для поиска релевантной страницы для пользователей на основе соответствующего ключевого слова, используемого в метатегах.
Пример:
HTML
< meta charset = "UTF-8" />< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" />< meta name = "description" content="A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions."/>< link rel = "shortcut icon" type = "image/x-icon" />< link rel = "stylesheet" />< meta name = "theme-color" content = "#0f9d58" /> < meta property = "og:image"< meta property = "og:image:type" content = "image/png" />< meta property = "og:image:width" content = "200" />< meta property = "og:image:height" content = "200" />< script src = "//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js" ></ script > < title >GeeksforGeeks | A computer science portal for geeks</ title > |
7. Разумно используйте элементы заголовка
Теги заголовков также играют решающую роль в создании дружественных поисковых систем вашего сайта. В HTML есть 6 различных типов тегов заголовков, которые следует использовать с осторожностью. Научитесь использовать элементы от <h1> до <h6> для обозначения иерархии содержимого вашего HTML, а также убедитесь, что вы используете только один h1 на странице. В спецификациях W3C упоминается, что содержимое вашей страницы должно быть описано одним тегом, чтобы вы могли добавить свой самый важный текст в h1, например заголовок статьи или сообщение в блоге.
Пример:
HTML
< h1 >Topmost heading</ h1 >< h2 >Sub-heading underneath the topmost heading.</ h2 >< h3 >Sub-heading underneath the h2 heading.</ h3 > |
8. Всегда используйте правильные HTML-элементы.
Многие новички совершают частую ошибку, используя неправильные элементы HTML. Они должны со временем узнать, какой элемент и где следует использовать. Мы рекомендуем вам изучить все элементы HTML и правильно их использовать для создания осмысленной структуры контента. Например, вместо использования <br> между двумя абзацами вы можете использовать свойства CSS margin и / или padding. Узнайте, когда использовать <em>, а когда использовать <i> (оба выглядят одинаково), узнайте, когда использовать <b>, а когда использовать <strong> (оба выглядят одинаково). Это приходит с практикой и когда вы внимательно следите за хорошим кодом, написанным другими разработчиками. Еще один хороший пример приведен ниже.
HTML
<!-- Bad Code -->< span class = "heading" >< strong >Hello Geeks</ span ></ strong >< br >< br >This is Computer Science portal for geeks.< br >< br > <!-- Good Code -->< h1 >Hello Geeks</ h1 > < p >This is Computer Science portal for geeks.</ p > |
9. Правильное использование отступов
Важно обеспечить надлежащее пространство или отступ в HTML-коде, чтобы сделать его более читабельным и управляемым. Не пишите все в одну строку. Это делает ваш код беспорядочным и плоским. Когда вы используете вложенный элемент, сделайте правильный отступ, чтобы пользователи могли идентифицировать начало и конец тега. Код, который следует правильному форматированию, легко изменить и хорошо выглядит для других разработчиков. Это хорошая практика кодирования, которая также сокращает время разработки.
HTML
<!-- Bad Code -->< aside >< h3 >GeeksforGeeks</ h3 >< h5 >A computer science portal for geeks</ h5 >< ul >< li >Computer Science</ li >< li >Gate</ li ></ ul ></ aside > <!-- Good Code -->< aside > < h3 >GeeksforGeeks</ h3 > < h5 >A computer science portal for geeks</ h5 > < ul > < li >Computer Science</ li > < li >Gate</ li > </ ul ></ aside > |
10. Подтвердите свой код
И последнее, но не менее важное: возьмите за привычку часто проверять свой HTML-код. Проверка кода - отличная работа, помогающая находить сложные проблемы. Вы можете загрузить валидацию разметки W3C или панель инструментов разработчика Firefox, чтобы проверить свой сайт по URL-адресу. Валидаторы очень помогают в обнаружении ошибок и их устранении.