For many beginners, HTML structure can pose a challenge. Web page elements and their properties may be very confusing. To get things straight, it is enough to know the exact type of a particular web page element.
In HTML 4.01 or earlier, there are two main types of page elements: block-level and inline. In HTML5, however, the elements are not just divided into block-level and inline types, they are also grouped by their meaning and purpose, representing content categories. This concept will be considered at length in the topics to come. For now, try to understand the ins and outs of inline elements.
Inline elements are elements of a document that constitute an integral part of a line. They emphasize a part of a text and give it a certain function or meaning. They usually contain one or more words.
Let's now take a look at six examples of inline elements.
The <a> tag
The <a> tag is probably one of the most important HTML elements. It's designed to create links. This tag is often used with the href attribute that indicates the path to a file/webpage. Consider a code snippet 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 highlighted and underlined. When you click on it, the link takes you to the address specified in the href attribute.
The <span> tag
You can wrap a text or a part of it in the <span> tag:
<p>For the first time <span>on our site</span>?</p>
<span>Sign up now!</span>This tag does not affect the text representation:
You may want to ask a question why do we need this tag? The <span> tag is used when you need to change the appearance of a text using CSS. CSS is the language that describes the web page's appearance.
The <button> tag
To create a clickable button, use the <button> tag. You can wrap something in this paired tag, and the text will be displayed inside the button:
<button>Click</button>The <b> tag
This paired tag makes any text bold. The limits of the text are indicated by the <p> tag. In the example below, we have changed the outline of the person name and surname:
<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.
The <sub> tag
Use this tag to create a subscript text. The text inside this paired tag is scaled 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.
The <sup> tag
This tag creates a superscript text. It is similar to the previous tag we've covered, except that the text enclosed in this tag is scaled up:
<p>x<sup>2</sup> = 4</p>This is the result we see in a browser:
With <sup>, you can display mathematical equations and formulas on your web page.
This is by far not a complete list of inline elements, as there is definitely more to know.
Inline elements features
The following features are characteristic of all inline elements:
Inline elements can be nested within block-level elements or other inline elements. However, they cannot contain block-level elements. For example, you can place an
<em>tag inside a<p>tag, but not a<div>tag inside an<em>tag.A browser doesn't make a line break before and after a tag. Take a look at the behavior of inline elements and compare it with that of block-level elements:
Inline elements work only when they are enclosed in tags.
Inline elements do not respect the width and height properties in the same way block elements do. Their dimensions are determined by their content and the surrounding context. For example, a
<span>element will expand or contract to fit the text it contains.
Conclusion
Inline elements are essential for fine-tuning the presentation of content within a web page. By understanding how inline elements behave and how they can be used, you can create more visually appealing and well-structured web pages. Whether you are styling specific parts of text, embedding images, or creating hyperlinks, mastering inline elements will enhance your ability to control the layout and appearance of your web content.