Основы HTML-верстки. Урок 3. Основные теги
Основные теги
Основные теги

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


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


Самые используемые теги (выучите их):
<h1>-<h6> - теги заголовков от большего к меньшему (чаще используют <h1>, <h2>, <h3>);
<p> - определяет абзац;
<br /> - перевод строки;
<a> - создает ссылку. Имеет обязательный атрибут href=”_”;
<img> - отображение изображения. Имеет обязательный атрибут src=”_”;
<ul>, <ol> - маркированный и нумерованный список соответственно. Можно делать вложенные списки;
<li> - элемент списка. Используется совместно с тегами <ul>, <ol>;
<strong> - полужирный текст. Используется не только для выделения текста, но и для указания поисковику ключевые слова;
<em> - курсив.  Также акцентирует текст;
<div> - Определяет контейнер (блок). Данный тег предназначен для использования совместно с CSS;
<!--  --> - комментарии;
<noindex> -  закрывает от индексации поисковиком все, что находится внутри этого тега (подробнее ознакомимся с этим тегом в следующих статьях).


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


Не рекомендую использовать:
<b> - полужирное начертание;
<i> - курсив;
<u> - нижнее подчеркивание. Крайне не рекомендую использовать для текста, не являющегося ссылкой. Да и подчеркивание лучше задавать с помощью CSS стиля;
<table> - тег таблицы. Не рекомендую использовать таблицы для верстки вообще, так как сайт будет очень плохо индексироваться поисковой системой! Можно использовать разве что только для создания каких либо табличных данных, например прайс-листа;
<tr> - строка таблицы;
<td> - ячейка таблицы;
<frame> - если вы вообще знаете про этот тег, то прекратите читать старые HTML учебники! Тег морально устарел лет 6 назад и никто не делает сайты с его помощью;
<center> - выравнивание какого либо содержимого по центру. Для валидности кода необходимо использовать  переходный <!DOCTYPE>.


Пример использования основных тегов:


Html+CSS код примера: 

 
<html>
  <head>
     </title>Основные теги</title>
  </head>
  <body>
     <h1>Заголовок 1 уровня</h1>
     <p>
       <h2>Маркированный список в параграфе:</h2>
        <ul>
          <li><strong>Полужирный</strong></li>
          <li><em>Курсив</em></li>
          <li><a href="#">Ссылка</a></li>
        </ul>
     </p>
     <div style="background: #dddddd; margin: 50px;">
       <h3>Нумерованный список в блоке:</h3>
         <ol>
           <li>Элемент</li>
           <li>Элемент</li>
           <li>Элемент
             <ul>
               <li>Вложенный элемент</li>  
               <li>Вложенный элемент</li>                
             </ul>
           </li>
         </ol>
     </div>
  </body>
</html>
 

В <div> я использовал подключение стилей внутри тега, оно имеет вид:
style="атрибут1: значение; атрибут2: значение;... атрибутN: значение;".


В данном примере использованы два атрибута стилей:
background - цвет фона;
margin - внешний отступ.


Введите данный пример в ваш html документ и вы уведите результат.


Еще по теме:
Основы HTML-верстки. Урок 2. CSS и HTML
Основы CSS. Урок 1. Подключение CSS и некоторые атрибуты стилей. Часть 1
Основы HTML-верстки. Урок 4. Кратко о таблицах
Назад
Автор: Guazzo
Дата: 16.08.2011 11:38
Поделиться:

Любые вопросы вы всегда можете задать в комментариях.

 

Добавить комментарий

Защитный код
Обновить