For many beginners, dealing with the structure of HTML documents may prove to be a challenge. Namely, it is sometimes hard to understand how the elements of the web page combine and what properties they have.
Trust us though: it's much easier than it may seem. To get through these issues, it is enough to simply know the exact type of a particular element of a web page.
In HTML up to version 4.01, it's common to distinguish two main types of page elements: block-level and inline. Each of them has its own properties. In HTML5, however, the elements are not just divided into block-level and inline, but also grouped by meaning and purpose, representing categories of content. This concept will be considered at length in the following topics; for now, try to understand the ins and outs of working specifically with inline elements.
Inline elements are those elements of a document that are a direct part of a line. They are intended to emphasize some part of the text and give it a certain function/meaning; they usually contain one or more words.
Let's now take a look at four examples of inline elements.
<a> tag
<a> tag is probably one of the most important elements of HTML; it's designed to create links. This tag is often used with the href attribute, which indicates the path to the file/webpage referenced. Consider a code sample that takes us to the JetBrains website:
<a href="https://jetbrains.com">Click here to access the JetBrains website!</a>This is what we get in the browser:
The text wrapped in the <a> tag is underlined and highlighted in color. When you click on it, you're taken to the address specified in the href attribute.
<b> tag
This paired tag sets a bold font for any text enclosed in it. This is rather straightforward, so let's proceed to the example. The limits of the text are indicated by the <p> tag; the outline of a name and surname of a person is changed:
<p>I'm <b>John Doe</b>, and what's your name?</p>Now look at the result in the browser:
As you can see, this tag is very convenient and easy to use when you want to highlight an important part of the text.
<sub> tag
This tag is used to create subscript text: that is, the text inside this paired tag will be shifted down and reduced in size. Let's see how it works:
<p>The formula of water is H<sub>2</sub>O.<p>The result is the following:
This tag comes in handy when you need to write a chemical formula.
<sup> tag
This tag defines superscript text. It is similar to the previous one, except that the text enclosed in this tag will be shifted upwards:
<p>x<sup>2</sup> = 4</p>This is the result as seen in a browser:
With <sup> you can get display interesting mathematical equations on your web page.
This is by far not a complete list of inline elements – there are definitely many more to know.
Features of inline elements
The following features are characteristic of all these different inline elements:
- They can contain only data and other inline items. The exception to this rule is the
<a>tag which can also contain block-level elements. - Before and after, the browser doesn't make a line break. Take a look at the behavior of inline elements and compare it with that of block-level elements:
- Inline elements occupy only the space that is limited by the tags.
Now that you have learned the features of inline elements, it will be easier for you to understand the structure of web pages and how it is created.