html

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as:

title

The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.

Example:

<title>Grandma's Heavy Metal Festival Journal</title>

body

The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.

Example:

<html lang="en">
<head>
    <title>Document title</title>
</head>
<body>
    <p>This is a paragraph</p>
</body>
</html>

article

<article>: The Article Contents element

Example:

<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

section

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

Example:

<h1>Choosing an Apple</h1>
<section>
    <h2>Introduction</h2>
    <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>

<section>
    <h2>Criteria</h2>
    <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>

p

The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

Examples:

<p>
    Geckos are a group of usually small, usually nocturnal lizards.
    They are found on every continent except Australia.
</p>
 
<p>Some species live in houses where they hunt insects attracted by artificial light.</p>

div

The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

Example:

<div>
  <p>
    Any kind of content here. Such as <p>, <table>. You name it!
  </p>
</div>

span

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

Example:

<p><span>Some text</span></p>

img

The <img> HTML element embeds an image into the document.

Example:

<img src="destination/folders on computer, or web address" alt="discribe image in few words" />

embed

The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

Example:

<embed
  type="video/quicktime"
  src="movie.mov"
  width="640"
  height="480"
  title="Title of my video" />

progress

The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Example:

<label for="file">File progress:</label> <progress id="file" max="100" value="70"> 70% </progress>

70%

ul

The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.

Example:

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

ol

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

Example:

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

li

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Examples:

Ordered List

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

Unordered List

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

and many others.

Reference