на Наразібільшість браузерів відображають сайти, самостійно розшифровуючи та підправляючи помилки веб-майстрів. Однак потрібно бути уважним при написанні HTML - необхідно дотримуватись правил валідності, т.к. правильна верстка важлива для оптимізації сайту, а також допоможе не збожеволіти користувачам, які відкриють ваш сайт у браузерах ранніх версій.

Використовуйте

Елементрозташовується на першому рядку будь-якої HTML-сторінки. Він визначає версію мови розмітки, яка використовується на сторінці. На даний момент рекомендується використовувати doctype виду- він універсальний для будь-якої версії мови.

Використовуйте правильну структуру документа

Теги , , завжди повинні бути присутніми в коді, це робить сторінку сумісною зі стандартами і гарантує, що вона коректно відображатиметься.

Неправильно

hello world!

Правильно

hello world!

Визначайте технічну інформацію сторінки правильно

Мета-теги та стилі слід вказувати в , а не десь у тілі сторінки. Скрипти переважно підключати внизу сторінки перед тегом, що закривається.. Перевага цього підходу в тому, що до відображення контенту сторінки браузер завантажує тільки стилі, а скрипти він завантажить в останню чергу, що дозволяє користувачу швидше побачити вміст сторінки.

Неправильно

Правильно

Дотримуйтесь стандартів розмітки

Використовуйте елементи відповідно до їх семантики

Перевіряйте html-код на валідність

Використовуйте альтернативний текст для зображень

Зображення повинні завжди містити атрибут alt. Браузер покладається на цей атрибут, щоб забезпечити контекст для зображення. Атрибут alt повинен містити текст, який буде відображатися в тому випадку, якщо зображення не завантажилося.

Неправильно

Правильно

Не використовуйте стилі в HTML розмітці

Це створює сторінки, які завантажуються надто довго та важко підтримуються. Прописуйте всі стилі в окремому документі CSS. Намагайтеся використовувати тег і атрибут styleз мінімуму.

Пишіть коментарі

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

Приклад:

Використовуйте відповідні імена класів

Задавайте імена css-класам відповідно до змісту блоку, наприклад: шапка – header, підвал – footer, меню – menu, контент – content. Завдяки цьому код буде набагато зрозумілішим і його легше буде підтримувати.

Поганий код

• Пункт меню 1


• Пункт меню 2


• Пункт меню 3

Хороший код

• Пункт меню 1


• Пункт меню 2


• Пункт меню 3

Правила написання CSS

У css також є правила, за якими можна зберегти код простим, легко читаним і добре організованим.

Скидайте стилі браузера за промовчанням

Вони можуть заважати стилям, які ми хочемо застосувати насправді. Завантажити файл для скидання стандартних стилів браузера можна тут - reset.css.

Використовуйте скорочені властивості та значення

Поганий код

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Хороший код

padding: 5px 10px 15px 20px;

Вказуйте селектори та правила з нового рядка

Поганий код

Element (display:block;position: relative;padding:5px 10px 15px 20px;)

Хороший код

Element (
display: block;
position: relative;
padding: 5px 10px 15px 20px;
}

Вказуйте нульові значення без одиниць виміру

Поганий код

padding: 10px 0px;
margin-left: 0%;

Хороший код

padding: 10px 0;
margin-left: 0;

Пишіть коментарі

Розділяйте основні блоки коментарями, це покращить читання коду.

Приклад:

/*HEADER*/
header (
}
/*HEADER END*/

/*MAIN*/
main (
}
/*MAIN END*/

/*FOOTER*/
footer (
}
/*FOOTER END*/

Перевіряйте css-код на валідність

Висновок

Дані рекомендації та правила лише основи, оскільки мови HTML і CSS розвиваються все швидше, розробляються нові методи написання правильного коду. Дотримуючись наших рекомендацій, ви будете впевнені, що ваш код є простим, легко читається і оптимізований. А також отримайте +100 до карми та подяки від розробників, які мають працювати над сайтом після вас.

Disclosure:Допоможіть helps keep the site running! Були пізні листи для деяких служб, які recommend на цій сторінці. Learn more

Sharing is caring!

Attribute of What does do? Була використана для особливості display of internal borders between rows and colums. Цей атрибут має бути невиявленим. Використовуйте CSS для style table borders instead.

The Rules Attribute has been DeprecatedЦей атрибут має бути невикористаним і не повинен бути використаний. Браузер підтримує цей атрибут є обмеженим і використовуючи його може викликати невідповідні результати. Instead, використовуйте CSS для стилів tables.

The RULES Attribute

RULES , HTML 4.0 attribute, позначають, якщо вони повинні бути міжнародними borders в table. Будь-який з них є значеннями RULES and demonstrate, як вони використовуються. Для того, щоб скористатися вашим життям, він є правилом дому: якщо ви використовуєте RULES also use FRAME and BORDER .

NONE Value for the RULES Attribute

RULES=NONE means that there are no inside borders. RULES=NONE is default if you don't use BORDER or set it to zero, but otherwise must be explicitly stated to have inside borders.

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The ALL Value for the RULES Attribute

RULES=ALL indicates that all the internal borders should be visible. RULES=ALL is usually used in conjunction with FRAME=VOID тому, що вони є двома borders а не inner borders.

When applied to a table, що значення gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The COLS Value for the RULES Attribute

COLS indicates, що вони повинні бути межами між columnами, але не між рядками.

When applied to a table, що значення gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

ROWS Value for the RULES Attribute

RULES=ROWS indicates, що вони повинні бути межами між рядками, але не між колонками.

When applied to a table, що значення gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

GROUPS Value for the RULES Attribute

RULES=GROUPS дозволяє вам виконати межі між групами таблиць. Там є два способи, які можуть бути згруповані: за рівнем і по колу. Let's go over each of them. Зверніть увагу, що поточно Netscape не знаходить RULES .

Grouping By Row

To group by row use the , , tags. indicates the header rows of the table, indicates the main body of the table, and indicates the bottom rows. So, for example, цей код створить table with three groups. Borders appear just between groups:

Name	Food	Price
Starflower	stir fied tofu	5.95
Miko	vegetable rice soup	4.95
Andy	hummus	3.95
Ping	french toast	5.95
Total		20.80

Here"s how that table renders:

Name	Food	Price
Starflower	stir fied tofu	5.95
Miko	vegetable rice soup	4.95
Andy	hummus	3.95
Ping	french toast	5.95
Total		20.80

Grouping By Column

To group by column use the tag and its SPAN attribute. Такий простий вибір, використовуваний для того, щоб це було в будь-якому місці за будь-яким table cells. для того, щоб дізнатися, як багато columns є в кожній групі. Якщо ви тримаєте SPAN від того, що він зарахований до групи, має тільки один колір. Так, для прикладу, наступні коди слів, що перша колонка є в групі його, і три по тому, що є всередині групи. Notice that requires an end tag. Borders will go only between the groups.

Основи HTMLмістять основні правила мови HTML, опис структури HTML-сторінки, відносини у структурі HTML-документа між HTML-елементами.

HTML-документ – це звичайний текстовий документ, може бути створений як у звичайному текстовому редакторі (Блокнот), так і в спеціалізованому, з підсвічуванням коду (Notepad++, Visual Studio Codeі т.п.). HTML-документ має розширення.html.

HTML-документ складається з дерева HTML-елементів та тексту. Кожен елемент позначається у вихідному документі початковим (відкриває) і кінцевим (закриває) тегом (за рідкісним винятком).

Початковий тегпоказує, де починається елемент, кінцевий – де закінчується. Закриваючий тегутворюється шляхом додавання слеша / перед ім'ям тега:<имя тега> … . Між початковим та закриваючим тегами знаходиться вміст тега – контент.

Поодинокі теги не можуть зберігати вміст вмісту безпосередньо, він прописується як значення атрибута, наприклад, тег створить кнопку з текстом Кнопкавсередині.

Теги можуть вкладатися один в одного, наприклад,

Текст

. При вкладенні слід дотримуватись порядку їх закриття (Принцип «матрьошки»), наприклад, наступний запис буде неправильним:

Текст

.

HTML-елементи можуть мати атрибути (глобальні, які застосовуються для всіх HTML-елементів, та власні). Атрибути прописуються у тезі елемента і містять ім'я і значення, що вказуються у форматі ім'я атрибута="значення" . Атрибути дозволяють змінювати властивості та поведінку елемента, для якого вони задано.

Кожному елементу можна надати кілька значень class і лише одне значення id . Множинні значення class записуються через пробіл,