The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.
Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

HTML elements are usually either "block-level" elements or "inline" elements.
A block-level element occupies the entire space of its parent element (container), thereby creating a "block".
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. <b>, <td>, <a>, <img>, <span>
Formatting

By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

Content model

Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Question:What is doctype? Why do u need it?

Answer:doctype is an instruction to the browser to inform about the version of html document and how browser should render it.

It ensures how element should be displayed on the page by most of the browser. And it also makes browser's life easier. otherwise, browser will guess and will go toquirks mode. Moreover, doctype is required tovalidate markup.

Question:What are optional closing tag? and why would u use it?

Answer:p, li, td, tr, th, html, body, etc. you don't have to provide end tag. Whenever browser hits a new tag it automatically ends the previous tag. However, you have to be careful to escape it.

reason:you can save some byte and reduce bytes needs to be downloaded in a html file.

Question:What is the difference between span and div?

Answer:div is a block element and span is inline element.

Extra:It is illegal to put block element inside inline element. div can have a p tag and a p tag can have a span. However, span can't have a div or p tag inside.

Question:Difference between standard/ strict mode and quirks mode?

Answer:quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.

Question:What is semantic HTML?

Answer:Semantic HTML, or "semantically-correct HTML", is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content.

for example, <b></b> (for bold), and <i></i> (for italic) should never be used, because they’re to do with formatting, not with the meaning or structure of the content. Instead, use the replacements <strong></strong> and <em></em> (meaning emphasis), which by default will turn text bold and italic (but don’t have to do so in all browsers), while adding meaning to the structure of the content.

Question:Why you would like to use semantic tag?

Answer:Search Engine Optimization, accessibility, repurposing, light code.

Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly.

Search engine needs to understand page content to rank and semantic tag helps.

ref:why important,Wiki: semantic HTML

Question:What does “semantically correct” mean?

Answer:read it in Stackoverflow

(1)空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr

(2)可以省略结束标签的元素：colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th

(3)可以全部省略标签的元素：html、head、body、tbody