E blog

Новостной блог, раскрутка, заработок в интернете, разработка сайтов, seo, оптимизация сайта, дизайн сайтов, поисковая оптимизация

20+ полезных HTML тэгов, о которых пора вспомнить

Posted on | июня 24, 2010 | No Comments

Чeлoвeк испoльзуeт свoй мoзг дaлeкo нe нa 100%, и дaжe нe 50% (кaк прaвилo, учeныe нaзывaют цифры oт 3 дo 7%). Aнaлoгичнaя ситуaция твoрится прaктичeски вo всex сфeрax. Мы прeдпoчитaeм испoльзoвaть тe приeмы, с кoтoрыми работали ранее, тем самым не давай себе развиваться и забывая то, что знали ранее.

Например, если вы лет 5 назад учились играть на гитаре, а потом бросили, то какие-то базовые навыки у вас останутся, но пальцы по струнам уже не будут ударять так быстро, как если бы вы продолжили развиваться. Вариант второй: вы могли остановиться на трех аккордах и одном переборе (в принципе большинство песен можно сыграть на этой универсальной комбинации), но согласитесь - результат будет гораздо лучше, если количество аккордов возрастет хотя бы до 20, переборов - до 3 и плюс пару боев. Тут же в качестве бонуса к развитию навыка вы получаете толпу заказчиков фанатов и поклонниц, которые бегают за вами умоляя сыграть:)

Эта статья для тех, кто только начал изучать HTML, или уже давно практикует верстку, но у него не хватает времени/желания для того, чтобы освежить свою деятельность новыми приемами.

1. Тэг для комментариев: <!– –>

Очень простой html тэг, который почему-то используется редко. Оставляя комментарии в коде, вы облегчите жизнь тому, кто потом с этой версткой будет работать (например, программисту). Благодаря комментариям, можно скрывать временно ненужные блоки. Да и вам самим через полгода будет проще разобраться в коде, если в нем были оставлены пояснения (особенно это касается изучения нового материала).

2. Тэги для таблицы: <thead>, <tbody>, <tfoot>

Тэг <thead> - обозначает “шапку” таблицы
Тэг <tbody> - “подвал” таблицы (должен идти сразу же после <thead>)
Тэг <tfoot> - собственно само содержимое.

 
 <table> 
 <thead> 
	 <tr> 
		 <td>Страна</td> 
		 <td>Тур</td> 
		 <td>Цена</td> 
	 </tr> 
 </thead> 
 <tfoot> 
	 <tr> 
		 <td>Итого</td> 
		 <td></td> 
		 <td>$2000</td> 
	 </tr> 
 </tfoot> 
 <tbody> 
	 <tr> 
		 <td>Болгария</td> 
		 <td>автомобиль</td> 
		 <td>$700</td> 
	 </tr> 
	 <tr> 
		 <td>Турция</td> 
		 <td>автомобиль</td> 
		 <td>$800</td> 
	 </tr> 
	 <tr> 
		 <td>Египет</td> 
		 <td>авиа</td> 
		 <td>$500</td> 
	 </tr> 
 </tbody> 
 </table> 
 
Страна Тур Цена
Итого $2000
Болгария автомобиль $700
Турция авто $800
Египет авиа $500

Семантическая верстка еще никому не повредила, да и знание стилей поможет вам потом украсить данные буквально за несколько строк (об этом будет отдельный урок).

3. Тэги для заглавий – <h1>,<h2>,<h3>,<h4>,<h5>, <h6>

Те из вас, кто занимается продвижением, наверняка наслышаны о необходимости использования тэга <h1>. Максимум, как правило, доходят до <h3>. В следующий раз оформляя какой-то заголовок (или подзаголовок в разделе), помните, что помимо div’ов есть <h1>,<h2>,<h3>,<h4>,<h5>, <h6>

4. Тэгия <ins> и <del>

Рекомендую использовать эти тэги в интернет-магазинах. Например:

 
	 <p><strong>Цена товара:</strong> <del>1250</del> <ins>700</ins> руб.</p> 
 

Цена товара: 1250 700 руб.

5. Тэг для адреса <address>

Хотите написать в “подвале” местожительство компании, а для стилевого оформления используете div? Тогда мы идем к вам еще раз вспомните про семантическую верстку и делайте так:

 
 <address>191024, г. Санкт-Петербург 
 ст. м.Площадь Мужественная защитница Невского, Невский проспект 
 д. 147, офис 301 
 </address> 
 
191024, г. Санкт-Петербург
ст. м.Площадь Сашуня Невского, Невский проспект
д. 147, офис 301

6. Тэги сокращений <acronym> и <abbr>

Тэг <acronym> указывает на то, что текст является акронимом (пропуски, образованная из начальных букв слов или словосочетаний, произносимая как единое слово, а не побуквенно, например ABBA).
Тэг <abbr> указывает на то, что последовательность символов является аббревиатурой.
Всплывающие подсказки в том и другом случае прописываются с помощью тэга title.

Например:

 
	 <p>Лето - время поступления в <acronym title="Высшее Учебное Заведение">ВУЗ</acronym></p> 
 

Лето - время поступления в ВУЗ

7. Тэги для цитат <blockquote> и <cite>

Принципиальной разницы между этими двумя тэгами, честно говоря, я не вижу. Обычно использую <blockquote>. Если вы брали у кого-то интервью для статьи или просто хотите сослаться на чье-то высказывание, то эти тэги как раз для вас (не забудьте их красиво обыграть с помощью css).

Например:

 
 <blockquote> 
	 <p>На голодный желудок русский человек ничего делать и думать не хочет, а на сытый - не может.</p> 
	 <p>Фаина Раневская</p> 
 </blockquote> 
 

На голодный желудок русский человек ничего делать и думать не хочет, а на сытый - не может.

Фаина Раневская

8. Тэг для выпадающего списка <optgroup>

Вне лишних слов:

 
 <select> 
     <optgroup label="AUDI"> 
         <option value="A4">A4</option> 
         <option value="A5">A5</option> 
         <option value="A6">A6</option> 
         <option value="A8">A8</option> 
     </optgroup> 
     <optgroup label="LEXUS"> 
         <option value="ES">ES</option> 
         <option value="GS">GS</option> 
         <option value="GX">GX</option> 
         <option value="HS">HS</option> 
     </optgroup> 
 </select> 
 
A4 A5 A6 A8 ES GS GX HS

9. Тэги для работы с формой и полями <fieldset>, <legend> и <label>

Тэг <fieldset> позволяет сгруппировать элементы формы, что облегчает работу с большим количеством данных. Браузеры, как правило, эти блоки ограничивают рамками.
Тэг <legend> применяется для создания заголовка к группе элементов.
Тэг <label> устанавливает связь между текстом и input’ом.

Например:

 
 <form> 
     <fieldset> 
         <legend>Персональные данные: </legend> 
         <label>Имя: <input type="text" size="30" /></label> 
         <label>Фамилия: <input type="text" size="30" /></label> 
         <label>Email: <input type="text" size="30" /></label> 
     </fieldset> 
 </form> 
 
Персональные данные:

*Примеры в статье приводятся вне стилевого оформления, т.к. это тема отдельных уроков

Рекомендуемые статьи:

  • Пока нет ничего по данной тематике



Comments

Leave a Reply

You must be logged in to post a comment.

  • Самые обсуждаемые новости


  • Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: hr line 5 and body in Entity, line: 6 in /var/www/studioseo/data/www/blogs.studio-seo.org/wp-content/plugins/advanced-rss/php5.php on line 721

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: body line 3 and html in Entity, line: 7 in /var/www/studioseo/data/www/blogs.studio-seo.org/wp-content/plugins/advanced-rss/php5.php on line 721

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Premature end of data in tag html line 1 in Entity, line: 13 in /var/www/studioseo/data/www/blogs.studio-seo.org/wp-content/plugins/advanced-rss/php5.php on line 721