Створіть, впорядкуйте та очистіть свій HTML-код
Поради щодо SEO та поради незалежного консультанта з SEO
З великим задоволенням я опинився тут сьогодні, щоб поговорити з вами про HTML та те, що нам потрібно знати, коли ми тільки починаємо.
Перш за все, я хотів би подякувати Олександрі МАРТІН, псевдонім Miss-SEO-Girl, за те, що люб'язно запросив мене поділитися своїми технічними знаннями в цьому блозі, і особливо з вами !
Для тих, хто мене не знає (усіх, кого я думаю: P), мене звати Томас КУБЕЛЬ, мені 22 роки, і я зараз перебуваю в стані SEO. Тим не менш, я все ще маю досвід роботи в якості розробника, оскільки я навчався веб-майстром протягом 3 років.
Тепер, коли презентації зроблені, я зможу розповісти вам про цю статтю, орієнтовану більше на техніку.
Для початку ми проведемо вас через деякі точніші моменти створення документа HTML, а потім побачимо, як упорядкувати та очистити наш код. Це дозволить вам уникнути помилок, легко перечитати і зробити ваш код практичним та масштабованим.
Ця стаття призначена в першу чергу для початківців у форматі HTML, але задовольнить велику кількість людей, котрі прагнуть отримати нову інформацію з цього питання.
Створіть свою першу сторінку
По-перше, у цій першій частині ми розглянемо створення першого документа HTML. Ми побачимо, які інструменти використовувати, чому краще розробляти в HTML5, а не в іншій версії, і як ми можемо підготуватися до створення якісного коду.
Інструменти
Для створення документа HTML технічно все, що вам потрібно, - це простий блокнот. Однак ви не зможете підсвічувати синтаксис, який забарвлює ваші теги, атрибути тощо. Крім того, розробити на блокноті не дуже практично, оскільки він не має великої кількості функціональних можливостей порівняно з іншими інструментами, орієнтованими на розробку.
Тому замість блокнота я раджу спочатку вибрати Notepad ++. Це дуже легкий інструмент розробки, який можна налаштувати, як завгодно, і більше того, це безкоштовно! Пізніше, коли у вас є PHP або інші мови, ви можете перейти на програмне забезпечення під назвою EDI (інтегроване середовище розробки), таке як Netbeans, Eclipse або Komodo. На щастя, для HTML нам сьогодні не потрібні ті ресурсомісткі «газові фабрики» вашого комп’ютера.
Після завантаження, встановлення та запуску Notepad ++ утиліта переходить у текстовий режим. Це означає, що все, що ви напишете, буде вважатися текстовим вмістом і не більше того. Тому я пропоную вам перейти в режим HTML, натиснувши на Мова-> HTML через головне меню.
Звідси всі ваші елементи отримають користь від підсвічування синтаксису, а Notepad ++ за замовчуванням розглядатиме ваш вміст як HTML. Зверніть увагу, що у вас є більшість мов, доступних від А до Я, і що вам буде практично редагувати різні та різноманітні файли.
Потім, щоб уникнути проблем із кодуванням, пропоную вибрати меню UTF-8 (без специфікації) Кодування-> Кодування в UTF-8 (без специфікації). Це запобіжить проблемам сумісності, акцентам тощо. UTF-8 універсальний.
Тепер, коли наш інструмент налаштовано, ми вирішимо програмне забезпечення, яке інтерпретує наш HTML-код: браузер. Я пропоную вам встановити кілька комп’ютерів на комп’ютері, щоб ви могли протестувати свій код на різних рішеннях. Що стосується мене, я вибрав Mozilla Firefox як основний браузер, Internet Explorer та Google Chrome як свої тестові браузери. Ви також можете встановити розширення типу Firebug, яке допоможе вам виявити помилки коду.
Після цього у вас зазвичай будуть всі основні інструменти для розробки в HTML. За винятком, можливо, його учнівства. Крім того, я зараз пропоную вам коротку презентацію HTML5, щоб ви могли подумати про її використання прямо зараз.
HTML5? Майбутній орієнтир ...
З моменту зародження мови HTML у 90-х роках над версіями з’явилося багато змін. Нові теги, нові способи розробки та сьогодні нові способи відновлення структур наших веб-сайтів за допомогою HTML5.
Справді, з моменту оголошення перегляду HTML5 у 2007 році, Інтернет клянеться цією мовою, яка все ще знаходиться в розробці сьогодні.
Чому HTML5 так популярний? Чому нас постійно заохочують використовувати цю мову? Які таємниці стоять за цим? ?
Серед нас залишається багато питань, але певно, що в майбутньому саме ця версія позначить модернізацію, семантичну павутину та інші важливі особливості веб-світу.
Щоб уникнути деталей та заохотити вас використовувати цю версію HTML5 прямо зараз, я можу показати лише кілька конкретних прикладів, що розкривають простоту та логіку цієї версії, запланованої на 2014 рік.
Наприклад, DOCTYPE (це декларація, яка вказує тип вашого документа). Будь то в HTML4, XHTML або будь-якій іншій версії, крім HTML5, вам доведеться потрудитися скопіювати на початку кожного HTML-файлу, такий код:
Для порівняння, HTML5 DOCTYPE, безумовно, простіший, менший і менш складний для запам’ятовування:
Легко ні? Зачекайте, поки ви побачите мою історію на тегах DIV.
DIV дозволяє оточити ряд HTML-тегів. Це контейнер, в якому можна вмістити статтю, заголовок, логотип чи інший набір.
Проблема DIV у попередніх версіях HTML. Це було скрізь. Єдине, що відрізняло один DIV від іншого, це назва його класу або ідентифікатора. Технічно ми отримали DIV HEADER, DIV CONTENT, DIV LOGO, DIV FOOTER, DIV SIDEBAR або більше. Ви зрозумієте, це зайве, і якщо кожен розробник вводить власні імена класів або ідентифікаторів, повне значення коду слід вивчити ще раз.
У HTML5 це трохи інакше. Також використовуються теги DIV, але нові теги дозволяють грубо оцінити структуру та краще обійтись.
І так далі ! HTML так просто. Потрібно бути строгим, бути обережним із написаним та бути методичним. Зі свого боку, поведінка так більше для мене взагалі не створює проблем. Додайте коментарі по ходу, і ви опинитесь там.
Щоб дати вам уявлення, ось структура, що нагадує блог Miss-SEO-Girl.com:
Маю визнати, це спрощено, але коли ви це розвинете, це стане для вас очевидним. Дотримуйтесь цього коду, спробуйте свої сили і дізнайтеся більше! Все буде добре !
Подумайте про семантику !
Останній момент, перш ніж переходити до очищення та оптимізації нашого коду. У HTML5 ви маєте можливість точно вказати тип кожного елемента. Намагайтеся якомога частіше використовувати семантичні теги, щоб допомогти акторам, які використовують та інтерпретують ваш код. Хто знає, Google може сподобатися ^^
Очистіть та оптимізуйте свій HTML-код
Третя і остання частина цієї статті, яка, як ви вже помітили, ще досить довга. Тут ми поговоримо про очищення та оптимізацію, те, що я називаю Очисним кодом (його треба називати так, насправді ага). Це дозволить вам перечитати себе, створити код, що розвивається, і зробити друзів розробників.
Хороший розвиток для кращого читання
У коді, який я показав вам вище, я відступив кожну групу тегів за допомогою клавіші Tab. Я закликаю вас зробити те саме, створивши ієрархію на декількох рівнях.
Як тільки ви зайдете "всередину" кадру/набору, зробіть відступ перед тим, як позначити наступний маяк. Потім, коли ви переходите від одного основного кадру до іншого (наприклад, заголовка до розділу), поверніться на ту саму висоту, що і попередня.
Якщо ви визначите пріоритети на декількох рівнях, ви зможете краще використовувати свій код, скопіювавши/вирізавши/вставивши. Крім того, це полегшує технічне обслуговування та показники.
Крім того, маленький фокус, який я рекомендую, - це переглянути ваш код у Firebug. Це дозволяє автоматично управляти цими відступами. Це може навіть дозволити вам вчитися.
Потім, стосовно назв класів та ідентифікаторів, поставте імена чіткими та зрозумілими. Якщо можете, поставте їх англійською мовою, відокремлюючи кожне слово тире (пост-контент, топ-новини тощо).
Згодом ви можете передати його валідатору W3C, навіть якщо я вважаю це не обов'язково корисним.
Нарешті, якомога більше коментуйте те, що ви робите. Будь то в HTML, CSS чи навіть PHP, коментарі використовуються для позначення того, для чого ви створили цей код. Ваші наступники будуть вам вдячні, повірте мені !
Пошкоджений код не має світлого майбутнього
Недбалий код = Код робиться швидко, не звертаючи уваги на наслідки.
Хоча я знаю, що іноді на нас діє тиск, спробуйте швидко зробити якісний код. Будь продуктивним! Не використовуйте старі методи, наприклад, теги FONT. Скільки б браузери не читали і не інтерпретували все це, згодом ви вкусите пальці! Віддавайте перевагу роботі над своєю швидкістю виробництва, а не поспішайте все неправильно і наскрізь.
Крім того, спробуйте створити код, який може змінюватися з часом. Не витрачайте час на розробку просто зараз. Подумайте про майбутнє !
Окрім того, постійне оновлення нових технологій дозволить робити нові справи ще веселіше, ніж зараз. !
Коли браузери трактують неправильно
В останню чергу пропоную поговорити про сумісність браузера. Зокрема, в HTML5 існують проблеми сумісності зі старими версіями Internet Explorer або іншими. Теги не розпізнаються, і браузеру важко правильно інтерпретувати вашу сторінку.
Однак зараз існують сценарії для протидії цим проблемам. Ось вони:
Перший набір слід розмістити замість тегу .
З іншого боку, другий набір розміщується якомога швидше після оголошення кодування UTF-8:
Після цього я можу лише запропонувати протестувати свої сторінки за допомогою утиліти http://browsershots.org, яка дозволяє переглядати візуалізацію веб-документів у різних браузерах.
Все, що вам потрібно зробити, це ввести адресу вашої сторінки та натиснути кнопку Надіслати. Потім вам доведеться почекати кілька хвилин, перш ніж перезавантажувати сторінку за допомогою F5. Якщо очікуваний результат присутній, це добре !
На завершення цього останнього пункту я хотів поговорити про сценарії, з якими вам рано чи пізно доведеться познайомитися. В даний час існує безліч бібліотек та фреймворків, які полегшать вам життя. Краще розміщуйте їх після нижнього колонтитула, а не за головою. Це дозволить браузеру спершу зосередитись на вашому HTML та CSS.
Висновок
Ми розглянули багато питань щодо створення, організації та очищення HTML-коду. Він був наповнений поясненнями, розповідями та підручниками, але, сподіваюся, він дав вам хоча б якусь корисну інформацію. Сподіваємось побачити Вас дуже скоро за новою темою, а тим часом ми з нетерпінням чекаємо Ваших коментарів нижче !
Ви можете знайти мене в Twitter або на Facebook, чекаючи блогу Thomas CUBEL
Дякую всім і ще раз дякую Олександрі за запрошення !
Хороший розвиток усім
Корисні посилання
Ви захоплені природними посиланнями та написанням веб-матеріалів! Блогер з 2012 року! Співавтор книги "Технології веб-SEO" та "Стратегія вмісту електронної комерції".
Дізнайтеся про мої «SEO-послуги» та зв’яжіться зі мною, щоб обговорити ваш SEO проект.