HTML Inline Elements
HTML
Inline elements in HTML are those that do not start with a new line and occupy as much width as their content requires. HTML inline elements do not create new line itself.
Inline Elements
➔ Inline element takes up the space for an element only as much space it require.
➔ Inline element do not create new line unnecessary.
➔ A single line can contain one or more inline elements.
➔ They don't force them to break the line before or after.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<!-- Example: Inline Elements -->
<head>
<title>Inline Elements Example</title>
<style>
.highlight {
background-color: #ee3;
font-size: 20pt;
color: #fff;
background-color: #303030;
}
b,i {
color: #f00;
}
</style>
</head>
<body>
<h1>Inline Elements Example</h1>
<div><b>Lorem</b> Ipsum is <span class="highlight">inline dummy text </span> of the printing and typesetting
industry.
<i>inline dummy text</i> has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<p>Note: b, span, i elements are inline elements, and they will not start on a new line and will occupy as much width as needed.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Inline Elements are
<a>,
<abbr>,
<acronym>,
<audio>,
<b>,
<bdi>,
<bdo>,
<big>,
<br>,
<button>,
<canvas>,
<cite>,
<code>,
<data>,
<datalist>,
<del>,
<dfn>,
<em>,
<embed>,
<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<level>,
<map>,
<mark>,
<meter>,
<noscript>,
<object>,
<output>,
<picture>,
<progress>,
<q>,
<ruby>,
<s>,
<samp>,
<script>,
<select>,
<slot>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<svg>,
<template>,
<textarea>,
<time>,
<u>,
<var>,
<video>,
<wbr>.