HTML elements

An HTML tag is composed of the name of the element, surrounded by angle brackets (< >). An end tag also has a slash (/) after the opening angle bracket, to distinguish it from the start tag. 

<p>example paragraph</p>​​​​​​​

Nested elements

Nested elements are elements that are inside other elements (elements can contain elements).

<div>
    <h1>page header</h1>
    <p>page paragraph</p>
 </div>

In the given example, <h1> and <p> elements are nested inside <div> element.

Void elements

Not all elements have an opening and closing tag. Some elements called void elements or empty elements consist only of a single tag e.g. img, input, link, hr, br. An empty element is an element that cannot have any nested elements or text nodes. In HTML, using a closing tag on an empty element is usually invalid (e.g., <input type="text"></input> is invalid).

Void elements are:

<img />
<meta />
<br />
<link />
​​​​​​​<input />

Semantic vs non-semantic elements

Semantics refers to the meaning of a piece of code.

For example, the <h1> element is semantic because the text wrapped around its tags indicates "a top-level heading on the page."

<h1>This is a heading</h1>

Other sematic elements:

<article>
<p>
<nav>
​​​​​​​<code>

Elements <div> and <span> don't have any semantic meaning.

block vs inline elements

A block-level element always starts on a new line and takes up the full width available if the width property is not set.

Example block-level elements are:

<div>
<p>
<table>
<h1>

The inline elements only occupy the space bounded by the tags defining the element, instead of taking up the full width available.

Example inline elements are:

<span>
<strong>
<em>
<a>.