Jump to content
Sign in to follow this  
frankosport19

SPAN vs DIV in W3 How to Include HTML Demo

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

Share this post


Link to post
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>.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...