Joomla! Україна

Я цікавлюся семантикою взагалі, але якщо семантика приходить на допомогу веб-розробникам із метою допомогти їм поліпшити веб, то таким шансом просто гріх не скористатися. Уся проблема криється в тому, що веб-майстри не розуміють, що зміниться від використання семантичної розмітки документа.

Саме тому я й вирішив написати цю статтю, яка пояснює необхідність дотримуватися семантики веб-документів.

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

Я думаю, що для веб-розробника дуже важливо переглядати створені ними самими HTML-документи з відключеним зовнішнім форматуванням, будь це CSS, JavaScript і, якщо хочете, навіть без зображень - тільки зміст.

А тепер пробіжіться по цій сторінці очима. Ви можете в тексті знайти заголовки й важливі фрази?

Якщо відповідь позитивна, то Ваш документ дотримується семантики.

Використання елементів і приклади грамотної та безграмотної розмітки

Отже, давайте поговоримо про семантичні HTML-елементи. У першу чергу, це елементи заголовків (від <h1> до <h6>), абзаци (<p>), списки (<ul>, <ol>), логічного виділення найбільш важливих фраз у тексті (<strong> - напівжирним, <em> - курсивом), елемент форми, що зв'язує поле мітки LABEL із полем форми (<label>).

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

Тепер мені хотілося б поговорити про методи верстки: таблична і  безтаблична.

Таблична верстка – в основі таблиця. Весь зміст перебуває в осередку цих самих таблиць, код дуже важко сприймати, особливо коли використовуються вкладені таблиці. До того ж даний метод застарілий.

При безтабличній верстці зміст знаходиться в елементах семантичної розмітки із привласненими css-стилями. Такий метод грамотний і сучасний! Необхідно розділяти семантику документа і його оформлення, що ми й отримаємо при безтабличній верстці.

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

А тепер давайте я Вам наведу, як приклад, 2 фрагменти коду з табличною й безтабличною розміткою HTML-документу, а Ви їх порівняєте та скажете, який краще, простіший, легший, елегантніший та зрозуміліший!

Поганий приклад

<table id="web-site-container" width="100%">
	<tr>
		<td id="navigation">
			<table width="100%">
				<tr>
					<td>
						<a href="http://www.apple.com/macosx/">Mac OS X Leopard</a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="http://www.microsoft.com/windows/products/windowsvista/default.mspx">Windows Vista</a>
					</td>
				</tr>
				<tr>
					<td>
						<a href="http://en.wikipedia.org/wiki/Semantic_Web">Wikipedia: Semantic Web</a>
						<table>
							<tr>
								<td>
									<a href="http://www.sciam.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21">The Semantic Web article</a>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
		<td id="content">
			<div class="heading">
				Web site name/Document name
			</div>
			<!-- Let is a lot of <code><br></code> elements here to get a nice bottom margin -->
			<br><br><br><br><br><br>
			<div>
				This is <span style="font-style: italic">the best content</span> text ever written.
			</div>
			<div>
				<!--   are great for indenting text! -->
				            
				Indented pre-amble text explaining something.
			</div>
		</td>
		<td id="contact-form">
			<form action="/contact" method="post">
				<div>
					Name: <input type="text">
					<input type="submit" value="Send">
				</div>
			</form>
		</td>
	</tr>
</table>

Грамотний приклад із використанням семантики

<div id="web-site-container">

	<div id="navigation">
		<ul>
			<li>
				<a href="http://www.apple.com/macosx/">Mac OS X Leopard</a>
			</li>
			<li>
				<a href="http://www.microsoft.com/windows/products/windowsvista/default.mspx">Windows Vista</a>
			</li>
			<li>
				<a href="http://en.wikipedia.org/wiki/Semantic_Web">Wikipedia: Semantic Web</a>
				<ul>
					<li>
						<a href="http://www.sciam.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21">The Semantic Web article</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<div id="content">
		<h1>
			Web site name/Document name
		</h1>
		<!-- Bottom margin is applied through CSS to the <code><h1></code> element -->
		<p>
			This is <em>the best content</em> text ever written.
		</p>
		<!-- Indentation is applied through a general "pre-amble" CSS class -->
		<p class="pre-amble">
			Indented pre-amble text explaining something.
		</p>

	</div>

	<div id="contact-form">
		<form action="/contact" method="post">
			<div>
				<label for="user-name">Name</label>: <input id="user-name" type="text">
				<input type="submit" value="Send">
			</div>
		</form>
	</div>

­</div>

 Ну як Вам? Що скажете?

Розмежовуйте семантику та оформлення документа

Усвідомте для себе одну просту річ: HTML відповідає за семантику документа, CSS – за його оформлення. І ніяк інакше. Крім цього використовуйте кожний елемент по його прямому призначенню, наприклад, ніколи не використовуйте елемент заголовка з метою банального збільшення розміру шрифту, а елемент <blockquote> для виділення тексту.

Мені часто ставлять запитання на рахунок елементів списку: «У яких випадках використовувати маркірований, а в яких немаркований списки?». Особисто моя думка така, що головне його використовувати по прямому призначенню, тобто для створення списків, а інше вже на Ваш розсуд, тому що семантика - не зовнішній вигляд.

Переваги семантичної розмітки

Далі йде список, у якому перераховані кілька переваг від семантичної розмітки документів:

• Підвищується доступність, тому що сторінки Вашого сайту не втратять своєї структури навіть при відключеному або не підтримуваному CSS;
• Зміст сторінок Вашого сайту буде зрозумілий для людей, які читають сайти за допомогою спеціальних програм для читання з екрану;
• Семантична розмітка впливає на пошукові системи, тому що їхнім роботам не важко індексувати сторінки та визначати істинне значення тих або інших фрагментів тексту;
• Значно спрощується подальша підтримка, таким чином, зверстаного сайту, знижуються витрати на редизайн;
• Зменшується вага сторінок сайту, підвищується читабельність коду сайту за рахунок його компактності, збільшується швидкість завантаження сторінок сайту.

Оригінал статті: Explaining semantic mark-up