HTML Inline tags are similar to block tags. The only difference is that they don’t use additional white space or a margin at the start. Inline tags are used when we have to display an Image or a Text on the webpage in lined with the rest of the text. Image or Text contained in an Inline tag wouldn’t be displayed separately on the webpage. However, they can be modified with different styles and themes identically. Here, we will teach you how to use inline tags in a HTML page.
Step # 1 – Insert an Image Tag
In this tutorial we will guide you on how to use inline tags in a HTML page. First of all, open up the source code of your HTML page in a Text editor. Now we are going to insert an image inline to the text.
For this purpose, enter the image tag as
<im src = “cloud.png” />
Step # 2 – Save your Changes to view the image on the page
By entering the Image tag in the HTML page, an image with the name “cloud.png” will appear in line with the text on the page. You can now save your changes and refresh the browser to view the image inserted successfully.
Step # 3 – Replace the Paragraph tag with Div tag
Now in the next step, try to insert inline text by replacing the paragraph tags which is the “<p>” and “</p>” with the “<div>” and “</div>” tags.
Once done, insert another “Div” tag inside the existed tag by entering the code as
<div style = “background: yellow; display: inline;”> and put the closing tag at the end of sentence which you want to inline.
Step # 4 – Save your Changes to view the inline text on the page
Now click on the “Save” button to save your changes and refresh the browser to view the inline text highlighted with a Yellow background on the page. In this manner, you can work with html inline tags.
Home