In this tutorial:
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."
Browsers typically display the block-level element with a newline both before and after the element.
Differences between block-level elements and inline elements:
The <p> element is a block-level element, while <b> element is an inline element.
Examples of the block-level elements are p, h1-h6, table, ul, ...
The full block-level element list can be found in MDN block-level elements.
Note: we can change elements presentation in CSS. We can change block element to be inline and via versa in CSS. This is useful for example for images, links, ...
HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the <span> and <div> elements apply no meaning at all. They are used quite extensively in conjunction with CSS. They are used to group together a chunk of HTML and hook some information onto that chunk in CSS.
<p> element represents a paragraph of content. It is block-level.<div> element is a generic container for flow content that by itself does not represent anything. It is block-level. It is used to group larger chunks of code.
<span> element is a generic wrapper for phrasing content that by itself does not represent anything. It is inline element. It is used for a small chunk of HTML inside a line.Note: where it is possible, use other elements than div and span.
HTML5 introduces a number of elements used for grouping blocks of code together and adding meaning at the same time. Some of them are described below. Examine your content and document structure to determine which of the new elements work with your page:
<header> is used to contain the headline(s) for a page and/or section. It can also contain supplemental information such as logos and navigational aids.<footer> contains information about a page and/or section, such as who wrote it, links to related information, and copyright statements. Represents a footer for its nearest sectioning content or sectioning root element. The footer element typically contains metadata about its enclosing section. such as information about the author of the section, copyright data or links to related documents.<nav> contains the major navigation links for a page and, while not a requirement, is often contained by header. Not all groups of links on a page need to be in a nav element — only groups of primary navigation links. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases.<aside> represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.<section> represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element. Section can be with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information. You can nest sections inside article and articles inside sections.<article> represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.<main> element represents the main content of the <body> of a document or application. The main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).
HTML5 Doctor has a flow chart to help you choose the right HTML5 structural elements.
The following are educational site examples. Pay attention to semantic elements.