View video tutorial

HTML Inline Tags

HTML

Inline elements display in a line.

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.

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

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>
Try it Now »

Click on the "Try it Now" button to see how it works.