HTML Inline Tags
Inline elements are those that occupy space enclosed by a defined tag instead of breaking into new line.
They do not force the text after them to a new line.
Several inline elements can be placed in a row, and they will display in a line.
Inline elements cannot contain block-level elements.
Inline Elements:
<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>
.
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
<meta charset="utf-8" />
<style>
button{
width: 150px;
height: 50px;
background-color: cornflowerblue;
font-size: 14pt;
color: white;
border-radius: 10px;
}
button:hover{
background-color: rgb(17, 87, 218);
color: white;
}
</style>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "w3context JavaScript Tutorials";
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "18pt";
}
</script>
</head>
<body>
<h2>HTML Example</h2>
<p>Click this button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Click on the "Try it Now" button to see how it works.