Inline elements

Theory

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 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.

§1. 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:

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.

§2. The <span> tag

You can wrap a text or a part of it in the <span> tag:

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 Frontend Core track covers this language; in the meantime, let's continue with inline elements.

§3. 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:

It will appear like this:

§4. 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's name and surname:

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.

§5. 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:

The result is the following:

This tag comes in handy when you need to write a chemical formula.

§6. 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:

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.

§7. Inline elements features

The following features are characteristic of all inline elements:

• They can contain only data and other inline items. The only exception is the <a> tag that can also contain block-level elements.
• 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.

§8. Conclusion

In this topic, we have covered a small portion of inline elements. They are a great asset; you can do a lot of things with them, from creating a link to displaying a complex mathematical formula. It will take time to memorize them all, so carry on and stay focused on the practical side. Speaking of which, let's complete our code challenges!

You can also view the Lesson on hyperskill.org.

Practical tasks and answers

Tasks and answer options are given. The correct option is highlighted in blue color.

№1. Fix the bug

Question: You and your peer programmer are playing a game. In this game, your peer provides you with five HTML elements to choose from. You should choose only one such HTML element from the available elements and use the chosen element only one time. Modify the code by replacing the existing <p> tag with the chosen element such that the below-given quote is displayed on a single line without any decoration or any effect on the line.

Five available HTML elements: <button>, <span>, <b>, <sup>, <sub>.

Write HTML and CSS code:

№2. Adding a link

Question: Add a link to the document below, with the url https://google.com and the text Google:

№3. Summary

Question: You should use the appropriate tags to complete the tasks that you are asked to do in the already written paragraphs below. Do not remove the paragraph tags, add additional tags to them.

Hint: here is a link to the Wikipedia site - https://en.wikipedia.org/wiki/Main_Page.

The display result will be as follows:

№4. Button

Question: Use an appropriate tag to make a button. Please make sure that the tag has exactly this text: Click here to buy one for yourself!

Write HTML and CSS code:

№5. Inline elements

Question: Select all inline elements:

Select one or more options from the list:

• <a> ✔
• <sup> ✔
• <p>
• <b> ✔
• <h1>

№6. Functionality of tags

Question: Match the tags with their functionality:

Match the items from left and right columns:

• <a> - Designed to create links ✔
• <b> - Sets a bold font ✔
• <sub> - Makes text subscript ✔
• <sup> - Makes text superscript ✔
• <emg> - A non-existent tag ✔

№7. Bottom index

Question: Create an element <p> and inside create a formula that looks like this:

The formula can be copied from here:

• H2 + 0.5O2 = H2O

Tip: Check that the characters you entered are correct and make sure you don't have extra spaces.

Write HTML and CSS code:

The result will be:

№8. Inline Elements: Spot the Difference!

Question: Given the HTML code below, identify which elements are considered as inline elements. Inline elements do not start on a new line and only take up as much width as necessary:

Select one or more options from the list:

• The <span> tag ✔
• The <a> tag ✔
• The <p> tag
• The <header> tag
• The <div> tag

№9. Inline Tag Mystery: Choose Right!

Question: Consider the fact that you have just built your HTML page structure, and now you are adding content. Which of the following combinations of HTML tags includes only inline elements? Consider the use of HTML5.

Select one or more options from the list:

• <em><b><span></span></b></em> ✔
• <p><h1></h1></p>
• <div><span></span></div>
• <strong><div></div></strong>
• <b><span><strong></strong></span></b> ✔