In this chapter:
Element syntax
HTML element is the main structural unit of a web page, written in HTML language... The image below demonstrates the syntax of the elements. For most tags, the element syntax will look the same except for single tags.
All elements in HTML follow the same format:
- The element starts with a start tag.
- The element ends with a closing tag.
- The content of an element is everything between the opening and closing tags.
- Some elements have no content (empty elements).
- Most elements can contain attributes
Note: do not forget to put the " / ", it tells the browser that your element has ended and that what will be written after it is already another element.
Empty elements
There are several elements in HTML that do not have an end tag, for example or
... Such elements are called empty because they do not contain any content and do not have an end tag.
Nested elements
All HTML documents are composed of nested elements. Most of them can either contain other elements, or they themselves can be nested in other elements, while the depth of nesting of elements is not limited.
The following example has three elements, two of which are nested:
My first paragraph
When nesting one element within another, be careful to ensure that the nested element starts and ends within the same element. So, the following example is incorrect:
This very
interestingBlock and inline elements perfectly complement each other during layout, each occupying its own specific niche. But there are cases when the characteristics of these elements are clearly insufficient. Photo gallery shown in Fig. 3.28 consists of sections, which include an image with a caption, while the sections are lined up horizontally, occupying the entire available width. When the browser window is reduced, the sections move to another line.
Rice. 3.28. Photo gallery
If you use the tag
There is no tag in HTML that refers to inline-block elements, it can be defined by setting the display property to inline-block on the element.
Div (display: inline-block;)
The characteristics of these elements are as follows.
- It is allowed to place text, inline or block elements inside inline-block elements.
- The height of the element is calculated automatically by the browser based on the content of the block.
- Width is equal to content plus padding, margin, and border values.
- Several elements in a row are located on one line and wrap to another line if necessary.
- It can be vertically aligned using the vertical-align property.
- Allowed to set width and height.
- The collapse padding effect does not work.
To create the gallery shown in fig. 3.28 for a tag
(example 3.18).
Example 3.18. Using display
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Sophia Cathedral
Polish church
Merchant Club
Monument to St. Vladimir
Since all photos have the same size, the width of the block is set explicitly and is equal to 150px, but the height is not specified, therefore, with a long caption to the figure, the height of the sections will differ (Fig. 3.29).
Rice. 3.29. Different section heights
This is not a problem, since the sections will be displayed in an orderly row, despite the different heights. At the same time, you can change the type of alignment through vertical-align by adding this property to the photo class. If you specify the value top, then the display of the sections will change (Fig. 3.30).
Rice. 3.30. Top alignment
The main problem is IE browser up to version 7.0 inclusive. This browser applies the inline-block value only for inline elements and does not work correctly with block elements. To convince this browser to render our example correctly, we need to use inline instead of inline-block and set the hasLayout property. Adding inline will destroy the layout in other browsers, so the right decision will take advantage of conditional comments(example 3.19).
Example 3.19. IE Style
The construction means to apply the specified code for the IE browser version 7.0 and below. Other browsers take it as a comment and ignore it. As for the zoom property, it is non-standard and is intended to set the hasLayout property, which cannot be set directly.
It is also convenient to use inline-block elements for various product catalogs that are found in online stores. Usually they are displayed with a picture and a caption to it. This is all similar to the gallery above, so all that remains is to modify its code to take into account the height alignment and IE behavior (example 3.20).
Example 3.20. Catalog
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Video 1856
Photos 315
Mobile devices 2109
Computers and office equipment 4296
Household appliances 731
Result this example shown in fig. 3.31.
Rice. 3.31. Catalog
In order not to ask each tag
There are two main categories of HTML elements that correspond to their content types and behavior in the structure of a web page - blocky and inline elements... With block elements you can create the structure of a web page, inline elements are used for formatting text fragments(excluding items and ).
The division of elements into block and inline is used in the HTML specification prior to version 4.01. In HTML5, these concepts are replaced by a more complex set, which requires each HTML element to follow rules that determine what content is acceptable for it.
CSS visual formatting model
1. Visual formatting model
The CSS visual formatting model is an algorithm that processes an HTML document and displays it on a device screen. This model transforms each element in the document so that it generates zero or more rectangular boxes in accordance with the CSS box model. The position of these boxes on the page is determined by the following factors:
- the size of the element (taking into account whether they are set explicitly or not);
- the type of element (line or block);
- positioning scheme (normal flow, positioned or floating elements);
- relationships between elements in the DOM;
- the internal dimensions of the contained images;
- external information (for example, the size of the browser window).
The position and dimensions of the box (s) of each element are calculated relative to the edges of the rectangular box, the so-called "Containing block"(containing block). The size of the box is not limited by the size of the containing block, therefore, under certain conditions, it can go beyond its boundaries.
2. Block model
In the box model, an element is treated as a rectangular container with a content area and optional borders and padding (inner and outer). The display property determines the type of the element's container. There is a default browser value for each item.
Rice. 1. Block model of an element Content area Is the content of an element, such as text or an image.
Inner padding set by the padding property. Padding is the distance between the main content and its border (frame). If you set a background for an element, then it will also apply to the element's fields. Padding cannot be negative, unlike padding.
Outside padding set by the margin property. It adds space to the outside of an element from the outside border of the border to adjacent elements, thereby separating elements on the page. Outside padding always remains transparent and shows the background of the parent element.
The padding and margin values are specified in the following order: top, right, bottom, and left.
The border, or the element's border, set using the border property. If no border color is specified, it takes on the color of the element's main content, such as text. If the border has gaps, then the background of the element will show through.
Padding, padding, and element border are optional, by default they are set to zero. However, some browsers add positive defaults to these properties based on their style sheets. You can clear browser styles for all elements using the universal selector:
* (margin: 0; padding: 0;)
3. Block elements and block containers
Block elements- top-level elements that are formatted visually as blocks, positioned vertically on the page in the browser window. Display property values such as block, list-item, and table make elements block-like. Block elements generate a main block that contains only the element block. Items set to display: list-item generate additional bullet boxes that are positioned relative to the main box.
,