<Div></Div> Vs <Div />

div/div vs div /

Mainly because <div /> is not valid HTML.

If you have a look through the different doctypes you'll notice that div cannot be self closing.

According to the W3C:

A div element must have both a start tag and an end tag.

Source: http://www.w3.org/TR/html-markup/div.html

To include Chucks comment here also, a trailing slash in HTML does not a self closing tag make. Self closing tags using a trailing slash are a feature of XHTML, not HTML.

Is there a difference between div / and div/div?

<div /> is not a valid markup. A self-closing tag is not permitted.

You need to use the full version <div></div>.

A self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.

jquery $('div') vs $('div /')

They produce identical results in jQuery.

Why are Fragments in React 16 better than container divs?

1. It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
2. Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.
3. The DOM inspector is less cluttered. :-)

You can find the descriptions of some other use cases in this React issue: Add fragment API to allow returning multiple components from render

difference between $('div') and $('div/')

No, jQuery will normalize those statements into the exact same.

In some earlier version of jQuery tho, it happend to be that <div> was actually faster than <div/> for whatever reason. I don't know yet, if that still applies.

http://jsperf.com/jquery-constructor-performance

Seems like this bug/feature is no longer true.

Difference between putting text in h1, h2, p or just div

Actually SEO, CSS, readability, and semantics.

What's worth to mention is that browsers automatically add some white space (a margin) and set display to block before and after, <p> tags and they are meant to hold text, however, they are not aware of whitespaces, unlike other tags like pre, eventually both are tags to hold text values.

headings <h1>....<h6> are really a role player in the matter of SEO and their count on each page matters, along with readability obviously!

<div>'s are meant to divide down your elements to structure your page, and other tags like sections, articles header...etc are just a kind of aliases of the div we know, and let's face it with their names they are making our life easier!

What is the difference between HTML div and span elements?

• div is a block element
• span is an inline element.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block-level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span> only accepts phrasing content, and <div> is flow content.

You asked for some concrete examples, so is one taken from my bowling website, BowlSK:

<div id="header">  <div id="userbar">    Hi there, <span class="username">Chris Marasti-Georg</span> |    <a href="/edit-profile.html">Profile</a> |    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>  </div>  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1></div>