In this chapter:
Element syntax
HTML element is the basic structural unit of a web page written in the 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
interestingThere are two types of elements in HTML - block elements and inline elements. Below you will learn the features of these elements and the difference between them, as well as ways to control them through CSS rules.
Block elements
Block elements are the basis that is used for the layout of web pages. Such an element is a rectangle that by default occupies the entire available page width (unless otherwise specified in CSS), and the length of the element depends on its content. Such an element always starts on a new line, that is, it is located under the previous element. A block element can contain other block and inline elements.
Examples of block elements:
,
- ,
- Inline elements can contain only data or other inline elements, while block elements can contain other block elements, inline elements, and data. In other words, inline elements cannot store block elements in any way.
- Block elements always start on a new line, and lowercase elements are not accented in this way.
- Block elements take up the entire available width of, for example, browser windows, and inline elements have the same width as their content plus padding, margin, and border values.
- ,
etc.
Inline elements
Unlike a block element, an inline element does not wrap on a new line, but is located on the same line as the previous element. Such elements are usually located inside block elements and their width depends only on the content and CSS settings. Another difference between an inline element and a block element is that it can only contain content and other inline elements. Block elements cannot be nested in inline elements.
Examples of inline elements: , , , , etc.
Note: in HTML5, the order of nesting of tags does not matter. Elements are no longer simply divided into block and inline, but are grouped by meaning and purpose, representing categories of content.
CSS display property: changing the element type
With the extremely useful CSS display property, you can make a block element appear inline and vice versa. In order for a block element to behave like an inline element (i.e., not to be transferred to a new line), a rule must be written for it:
Display: inline;
If you need to display an inline element as a block element (so that a line break occurs before and after the element), write the following:
Display: block;
Action (display: inline) and (display: block)
You can also make a "hybrid" - a block element with inline behavior. In this case, the entire content of such block elements will be displayed as usual, but the blocks will behave like inline elements, lining up on one line one after another and wrapping to a new line only if necessary. The collapse of the margin in such cases ceases to work. To turn an element into a block-in-line one, write:
Display: inline-block;
Action (display: inline-block)
Further down the tutorial: CSS border property. You will learn how to add borders to elements of a web page and what settings you can apply to them using cascading style sheets.
Inline elements are those elements of a web page that are a direct part of another element, such as a text paragraph. They are mainly used to change the appearance of text or to make it appear logical.
Tag is one of the important elements of HTML and is intended for creating links. Depending on the presence of the attributes name or href tag sets a link or anchor.
Defines a bold typeface.
Tag increases the font size by one over normal text. In HTML, the font size is measured in arbitrary units from 1 to 7, the average text size used by default is 3. Thus, adding a tag increases the text by one conventional unit.
Tag
sets a line feed where this tag is located. Unlike paragraph tag
Using the tag
does not add white space before the line.
Tag designed to accentuate text. Browsers render such text in italics.
Sets the font to italic.
Tag is intended for displaying images in GIF, JPEG or PNG graphic format on a web page. If necessary, the picture can be made a link to another file by placing the tag
into container ... At the same time, a border is displayed around the image, which can be removed by adding the border = "0" attribute to the tag
.
Tag Decreases the font size by one compared to regular text. Similar in action to the tag , but acts exactly the opposite.
A generic tag for defining an inline element within a document.
Tag designed to accentuate text. Browsers render such text in bold.
Displays the font as a subscript. In this case, the text is located below the baseline of the remaining characters of the line and the reduced size - H 2 O.
Displays the font as a superscript. Its action is similar to but the text is displayed above the baseline of the text - m 2.
The difference between block and inline elements is as follows.
HTML elements are divided into inline and block elements by the way they are displayed on a web page.
Inline elements
Inline elements are designed to perform some actions on text, for example: line breaks, italicizing a piece of text, logical highlighting of some text and applying styles to it using CSS, etc. Depending on the purpose of the inline element, a piece of text is placed between the opening and closing tags, or the tag is applied anywhere in the text, for example, to break a line.
For instance:
Can use inline element to highlight text that grabs the attention of site visitors by using bold style.
An inline element has a width that is equal to the width of its content. Inline elements cannot contain block elements within them.
Examples of inline elements: , ,