HTML Tutorial

HTML Tutorial

HTML (which stands for HyperText Markup Language) is the markup language of the Internet. HTML was first specified in 1990 by CERN researcher Sir Timothy John Berners-Lee. Along with HTTP (Hypertext Transfer Protocol), CSS (Cascading Style Sheets), and JavaScript, HTML is the underpinning force of the World Wide Web. This HTML Tutorial covers the crucial parts of version 5 of HTML (aka HTML5) such as elements, tags, attributes, semanticity, forms, and multimedia embedding.

1.

Intro

1.1.

Markup Language

A markup language is a set of rules that can be processed by a computer connected with a given computer document file and dedicated - among others - to the following aspects:

  • presentational - presenting the document in a certain visual way to the end human user,

  • semantic - describing the document in a certain semantic way to computer programs reading the document enabling those programs to better understand the document (e.g. better understanding of the document by web crawlers enhancing search engine optimization).

HyperText Markup Language (HTML) is a standard markup language.

Currently the presentational aspects of HTML give way to using the Cascading Style Sheets. Further, given that the semantic aspects are getting more and more important - as they may increase search engine optimization (SEO) - using HTML for controlling visual aspects is even frowned upon as it might hinder the said optimization.

1.2.

Inception & Development

HTML was first proposed in 1989 by Sir Tim Berners-Lee who in 1990 created the first HTML browser and server software. HTML was always closely related to XML. In the period from the year 2000 until the release of HTML5 in 2008 HTML was based on XML and even called XHTML (for Extensible HyperText Markup Language).

The notable differences between HTML5 and XML is that:

  • some HTML5 elements can be unclosed but XML enforces tag closing,

  • when it comes to element names and attributes HTML5 is case-insensitive but XML is case-sensitive,

  • an HTML5 parse error does not abort processing by the HTML5 parser but XML parse error aborts processing by the XML parser.

1.3.

HTTP & WWW

Most often HTML documents are received from remote hosts using Hypertext Transfer Protocol (HTTP). HTTP is a protocol that specifies communication rules and interface methods used by host computers in the World Wide Web communication system. The secured variant of HTTP is HTTPS

World Wide Web is an information system in which documents - including among others HTML documents - and other web resources are identified by URLs i.e. Uniform Resource Locators. Over the Internet, such resources can be accessed using computer programs such as - among others - web browsers.

2.

Elements & Tags

2.1.

Elements

HTML elements are building blocks of HTML documents that instruct and/or inform computer programs that are reading them with regards to the expected behavior of those elements, their visual presentation, and the probable meaning of their contents (if an element includes content).

2.2.

Tags

HTML elements are denoted by so-called HTML tags. Tags themselves are never displayed to the end human user.

An HTML element starting tag starts with < and ends with >. For example: <div>.

An HTML element closing tag starts with </ and ends with >. For example: </div>.

The starting tag <div> along with the corresponding closing tag </div> constitute a div element. A div element can include content.

<div>
  What a great element!
</div>
2.3.

Primary Elements

An HTML document include one catch-all element - namely html element. The html element in turn includes within itself two elements: head and body. Generally, all HTML documents have the following structure.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
<html>
3.

Attributes

3.1.

Intro

An HTML element can have attributes. HTML element's attributes are appended to its opening tag or its sole tag.

3.2.

ID & Class

Two of the most commonly used attributes are id and class.

Both id and class can be used for:

  • selecting the element for styling in CSS (# for id, . for class),

  • selecting the element in JavaScript (getElementById for id, getElementsByClassName(). for class)

Further, id can be used for fragment identifier linking i.e. linking to a specific place in a document.

The difference between id and class is that:

  • in a given HTML document there can be only one element with a given id whereas there might be an unlimited number of elements with a given class,

  • a given HTML element can only have one id however an unlimited number of classes

<body>
  <div id="horses" class="names, coloration">
    ...
  </div>
  <div id="witchers" class="names, schools">
    ...
  <div>
</body>
3.3.

Style

An HTML attribute can be styled in two ways:

  • through selecting in CSS and applying respective styling,

  • through applying inline styling using the style attribute.

<p style="background:black;color:white;">
  White text on black background.
</p>

Nowadays, using inline styling is discouraged in favor of CSS.

3.4.

Global Attributes

id, class and style are examples of global attributes i.e. attributes common to many HTML elements.

Other notable HTML global attributes are:

  • autofocus - indicates the element to be focused once the page loads,

  • hidden - prevents the element from rendering,

  • lang - indicates the element's content language,

  • tabindex - indicates the sequential position in Tab key navigation,

  • title - a description of the element which might be presented as a tooltip by a user agent, and

  • event handlers such as onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmouseenter, onmouseleave, onselect, onsubmit.

4.

Head

4.1.

Intro

The head element includes the document's title that can be displayed to the end user and metadata elements that are not displayed to the end user but rather describe the document. Further, the head element can include JavaScript script elements that can be evaluated and dynamically alter other HTML elements of the document.

The head element often includes elements such as title, meta, style, link, and script.

4.2.

Title Element

The title element is important for web crawlers which crawl the document with the purpose of best understanding its content. Further, the title from the title element is often displayed in a web browser tab for a given document.

<head>
  <title>
    Witcher Horses
  </title>
<head>
4.3.

Meta Elements

The meta element is dedicated to HTML document's metadata. There might be many - and most often there are - meta elements for a single HTML document.

The notable meta elements are:

  • charset - specifies character encoding (HTML5 recommends UTF-8),

  • viewport - controls the viewport (i.e. the area visible to the end user) size and shape - a typical mobile friendly meta viewport content is width=device-width, initial-scale=1,

  • robots - informs web crawlers whether the document should be crawled and to which extent (non-binding for web crawlers) - important for SEO,

  • description - important for SEO,

  • keywords,

  • Open Graph protocol (the Facebook protocol for mapping documents into Social Graph objects), and

  • other.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="robots" content="index,follow,all">
  <meta name="description" content="The site with all of the Witcher horses! All in one place!">
  <meta name="keywords" content="wither, horses, geralt, ciri, roach, kelpie">
  <meta property="og:site_name" content="soundof.IT" />
<head>
4.4.

Style

The style element contains Cascading Style Sheets markup for an HTML document.

<head>
  <style>
    .horses {
      color: red;
      font-weight: bold;
    }
  </style>
<head>
4.5.

Link

The link element is dedicated to:

  • indicating the canonical document for a given HTML document,

  • indicating alternate language versions for a given HTML document, and

  • creating relations with external resources such as style sheets or a favicon icon.

<head>
  <link rel="canonical" href="https://soundof.it/html-tutorial">
  <link rel="alternate" hreflang="en" href="https://soundof.it/html-tutorial" />
  <link rel="alternate" hreflang="pl" href="https://soundof.it/html-bryk" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...">
<head>
4.6.

Script

The script embeds executable (most often JavaScript) code and/or data (e.g. JSON data). A script element can include executable code and/or data within itself (inline) or point to an external resource using src.

<script>
  console.log("Roach is Geralt's horse.")
</script>

<script src="bundle.js"></script>

A script element does not have to be within a head element. Putting a script element within a body element is acceptable.

5.

Body

The body element contains the HTML elements that are visible to the end human user. There can be only one body element in a given HTML document.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <div>
      <h1>
        Horses
      </h1>
      <p>
        Geralt's horse is Roach and Ciri's horse is Kelpie.
      </p>
    </div>
  </body>
<html>

It is acceptable for a body element to include script elements.

6.

Non-Phrasing vs Phrasing Content Elements

6.1.

Intro

Most body HTML elements can be included in one of the two groups:

  • non-phrasing content elements - control the structure of an HTML document and the structure of its HTML elements,

  • phrasing content elements - control the structure of phrases (sentences) that are contained within HTML elements.

Both non-phrasing and phrasing elements are part of the so-called flow content elements.

Under HTML specification phrasing elements can be contained within non-phrasing elements however non-phrasing elements cannot be contained within phrasing elements.

6.2.

Non-Phrasing Content Elements

The non-phrasing content elements control the structure of an HTML document and the structure of HTML elements rather than the structure of phrases.

The most notable non-phrasing content elements are:

  • division - div,

  • paragraph - p,

  • headings - h1, h2, h3, etc.,

  • sections - header, main, footer, section, article, aside, and nav

  • anchors - a,

  • embedded code - embed & code,

  • images,

  • inputs and their labels.

<body>
  <div>
    <h1>
      Horses
    <h1>
    <p>
      Geralt's horse is Roach.
    </p>
    <p>
      Ciri's horse is Kelpie.
    </p>
  </div>
</body>
6.3.

Phrasing Content Elements

The phrasing content elements control the structure of phrases (sentences) contained within other HTML elements.

The most notable phrasing content elements are:

  • a spanning element - span,

  • a distinguished content - strong,

  • an emphasised content - em,

  • a cited title - cite,

  • a quote - q,

  • an abbreviation - abbr,

  • a line break - br,

  • embedded code - embed & code,

  • images,

  • inputs and their labels, and

  • superscript - sup.

As presented above some elements - such as images or inputs - can be both phrasing and non-phrasing depending on the context in which they are used.

<p>
  <cite>The Two Towers</cite> is <strong>the best</strong> part of the <abbr title="Lord of the Rings">LOTR</abbr> trilogy.
</p>

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.