Section of a web page.
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег
является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name
или href
тег
устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег
увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега
увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег
уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег
, но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на
, но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
HTML (Hypertext Markup Language
) elements historically were categorized as either "block-level" elements or "inline" elements. Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
In this article, we"ll examine HTML inline elements and how they differ from block-level elements .
An inline element does not start on a new line and only takes up as much width as necessary.
Inline vs. block-level elements: a demonstration
This is most easily demonstrated with a simple example. First, some simple CSS that we"ll be using:
Highlight {
background-color:#ee3;
}
Inline
Let"s look at the following example which demonstrates an inline element:
The following span is an inline element;
its background has been colored to display both the beginning and end of
the inline element"s influence.
The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of
the block-level element"s influence.
The CSS (not displayed in standard reading mode) is also used:
Body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
Rendered using the same CSS as before, we get:
See the difference? The
Element totally changes the layout of the text, splitting it into three segments: the text before the
Then the
"s text, and finally the text following the
Changing element levels
You can change the visual presentation
of an element using the CSS display property. For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category
and the content model
of the element. For example, even if the display of the span element is changed to "block" , it still would not allow to nest a div element inside it.
Conceptual differences
In brief, here are the basic conceptual differences between inline and block-level elements:
Content model
Generally, inline elements may contain only data and other inline elements. You can"t put block elements inside inline elements.
Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).
List of "inline" elements
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use