0
0
HTMLmarkup~5 mins

Inline elements in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Inline elements let you style or organize small parts of text or content without breaking the flow of the paragraph or line.

When you want to emphasize a word inside a sentence, like making it bold or italic.
When adding a link inside a paragraph without starting a new line.
When inserting an image or icon inside a line of text.
When you want to style a few words differently without affecting the whole block.
When you need to add a tooltip or small interactive element inside text.
Syntax
HTML
<tagname>content</tagname>
Inline elements do not start on a new line and only take up as much width as necessary.
Common inline tags include , , , , and .
Sample Program

This example shows different inline elements inside paragraphs. The text stays on the same line except where it naturally wraps. The strong and em tags style words bold and italic. The a tag creates a clickable link with an accessible label. The span adds a yellow background highlight. The img tag inserts a small icon aligned with the text.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline Elements Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is a <strong>bold</strong> word, an <em>italic</em> word, and a <a href="https://example.com" aria-label="Example website">link</a> inside a sentence.</p>
  <p>Here is a <span class="highlight">highlighted text</span> inside the paragraph.</p>
  <p>And here is an inline image <img src="https://via.placeholder.com/20" alt="small icon" style="vertical-align: middle;"> inside text.</p>
</body>
</html>
OutputSuccess