SPAN vs DIV in W3 How to Include HTML Demo

[frankosport19]

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 July 27, 2019 by frankosport19

[Ingolme]

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

[frankosport19]

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 July 27, 2019 by frankosport19

[Ingolme]

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.

[frankosport19]

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.

[Ingolme]

I think that it is expected that people have already gone through the HTML and CSS tutorials when reading the How To guides.