Jump to content

SPAN vs DIV in W3 How to Include HTML Demo


frankosport19

Recommended Posts

Greetings ....

This is in regards to the W3 Demo Page "How to Include HTML"

Take special note of the "Include The HTML" section, where the DIV tags are used in the example. I experimented with that successfully but noted one issue.

If you use the DIV tags to include a secondary HTML file within the main HTML file, the resulting on-screen output will appear by itself on its own separate line. If you are desiring for something to be displayed on the same line along with other items,, be it at the start of the line, the end of the line, or anywhere in-between, the SPAN tags should be used in place of DIV. You of course will take care that the included HTML file does not contain BR's, HR's or any other line-breaking code that could upset the display of the particular line of items.

Thanx-A-Lot and Much Appreciation
 

Edited by frankosport19
Link to comment
Share on other sites

You can use CSS to make the <div> elements behave as inline elements. Being an inline element, <span> is not permitted to contain bock elements such as <div>, so the best option is to use a <div> and use CSS to make it behave like a <span>.

Link to comment
Share on other sites

15 minutes ago, Ingolme said:

You can use CSS to make the <div> elements behave as inline elements. Being an inline element, <span> is not permitted to contain bock elements such as <div>, so the best option is to use a <div> and use CSS to make it behave like a <span>.

Fair Enough -- If you can please provide a demo of that, or else provide a link to a demo (simple one, if possibel) I will appreciate it.

Edited by frankosport19
Link to comment
Share on other sites

It is simple CSS.

For this HTML:

<div class="like-a-span">...</div>

Your CSS would look like this:

.like-a-span {
  display: inline;
}

This <div> now behaves like a span.

Link to comment
Share on other sites

Greetings @Ingolme

 

Works like  a charm! Thank You!

Just so folks know why and how the DIV status can be changed by CSS, it might a good idea to make mention of it in the  "How To Include HTML" demo page

BTW --  and you probably know it already -- as an alternative to your suggestion,  one can place style="display:inline";  within the confines of the DIV code.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...