What are HTML Inline Elements and where are they used?
HTML inline elements are those elements that take only the width required by the content used by the user and are used on one or more lines at any place between words or at the end of words in a line. Such elements are called inline elements.
<tagname>Your content goes here</tagname>
Uses:
- Make a part of text bold.
- Make a part of text italic.
- Create a link using the
<a>element. - Highlight important text using the
<mark>element. - Add an image using the
<img>element. - Apply meaning or styling to a small part of text.
Commonly Used HTML Inline Elements and Their Uses:
<a>
↓
Creates
links
links
<span>
↓
Groups
content
content
<b>
↓
Makes text
bold
bold
<strong>
↓
Strong
importance
importance
<i>
↓
Italic
text
text
<em>
↓
Adds
emphasis
emphasis
<mark>
↓
Highlights
text
text
<small>
↓
Smaller
text
text
<br>
↓
Creates
line break
line break
<abbr>
↓
Defines
abbreviation
abbreviation
<code>
↓
Represents
computer code
computer code
<sub>
↓
Shows
subscript
subscript
<sup>
↓
Shows
superscript
superscript
<q>
↓
Defines short
quotation
quotation
<cite>
↓
Identifies
creative work
creative work
<time>
↓
Represents
date or time
date or time
<s>
↓
Shows no-longer-
accurate text
accurate text
<u>
↓
Marks text
annotation
annotation
<kbd>
↓
Represents
keyboard input
keyboard input
<var>
↓
Represents
a variable
a variable
<samp>
↓
Shows program
output
output
<data>
↓
Links content
to machine value
to machine value
<del>
↓
Represents
deleted text
deleted text
<ins>
↓
Represents
inserted text
inserted text
Other HTML Inline Elements and Their Uses:
<area>
↓
Defines image-
map area
map area
<audio>
↓
Embeds
audio
audio
<bdi>
↓
Isolates text
direction
direction
<bdo>
↓
Overrides text
direction
direction
<button>
↓
Creates clickable
button
button
<canvas>
↓
Provides
drawing area
drawing area
<datalist>
↓
Provides predefined
options
options
<dfn>
↓
Marks
defined term
defined term
<embed>
↓
Embeds external
content
content
<iframe>
↓
Embeds another
page
page
<img>
↓
Embeds
an image
an image
<input>
↓
Creates input
control
control
<label>
↓
Labels form
control
control
<link>
↓
Defines resource
relation
relation
<map>
↓
Defines image
map
map
<meta>
↓
Provides
metadata
metadata
<meter>
↓
Shows
measurement
measurement
<noscript>
↓
Provides fallback
content
content
<object>
↓
Embeds external
content
content
<output>
↓
Shows calculation
result
result
<picture>
↓
Provides responsive
images
images
<progress>
↓
Shows task
progress
progress
<ruby>
↓
Represents ruby
annotation
annotation
<select>
↓
Creates selection
control
control
<selectedcontent>
↓
Displays selected
content
content
<slot>
↓
Defines content
placeholder
placeholder
<svg>
↓
Embeds SVG
graphics
graphics
<template>
↓
Holds HTML
template
template
<textarea>
↓
Creates multiline
input
input
<video>
↓
Embeds
video
video
<wbr>
↓
Allows
word break
word break
<script>
↓
Embeds executable
code
code
