HTML Tutorial

What Is a 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.

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.

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.

What are Elements & Tags in HTML?

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).

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>

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>

What are Element Attributes in HTML?

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

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>

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.

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.

What Is Head Element in HTML?

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.

Title

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>

Meta

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>

Style

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

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

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>

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.

What Are Phrasing & Non-Phrasing Elements in HTML?

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.

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>

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, h2, 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>

Semantic Sectioning Elements

Semantic sectioning elements are elements that convey in an algorithmically readable way the meaning of their content and the content of their enclosing elements through dividing the enclosing elements into named parts.

The semantic sectioning elements are:

• section,
• article,
• nav, and
• aside.

Section

The section element represents a thematic group of content which can be but doesn't have to be headed with one of the header elements (h1, h2, etc.).

The section element can represent for example:

• a document introduction,
• a chapter,
• a summary,
• side information, and
• any other separated thematic piece of content,

<body>
  <h1>Witcher Horses</h1>
  <section>
    <h2>Introduction</h2>
    <p>There are many horses in Witcher universe.</p>
  </section>
  <section>
    <h2>About Geralt's and Ciri's Horses</h2>
    <p>Geralt's horse name is Roach and Ciri's horse name is Kelpie.</p>
  </section>
<body>

Article

The article element represents a stand-alone and independent group of content that can be easily cut off from an HTML document and paste into another.

An HTML document can include many article elements within itself.

<body>
  <h1>Horses</h1>
  <article>
    <h2>Geralt's Horse</h2>
    <p>Geralt's horse name is Roach.</p>
  </article>
  <article>
    <h2>Ciri's Horse</h2>
    <p>Ciri's horse name is Kelpie.</p>
  </article>
<body>

Section vs Article

It is allowed to nest multiple article elements within a single section element and it is allowed to nest multiple section elements within a single article element.

<body>
  <section>
    <h1>...</h1>
    <article>
      <h2>...</h2>
      <section>
        ...
      <section>
      <section>
        ...
      <section>
    </article>
    <article>
      <h2>...</h2>
      <section>
        ...
      <section>
      <section>
        ...
      <section>
    </article>
  </section>
  <section>
    <h1>...</h1>
    ...
  </section>
<body>

It is disputed (vide Stackexchange) whether multiple section and/or article elements nested directly in the body element should be headed with h1 or h2.

Nav

The nav element represents a group of navigation links of crucial importance for the enclosing element such as body, section, article, header, and/or footer.

<article>
  <header>
    <nav>
      <a href="...">...</a>
      <a href="...">...</a>
      <a href="...">...</a>
    </nav>
  </header>
  ...
</article>

Aside

The aside element represents a group of content which does not constitute a part of the main content of its enclosing element to which it is only indirectly related.

<article>
  <h1>Horse Names</h1>
  <p>Geralt's horse name is Roach.</p>
  <p>Ciri's horse name is Kelpie.</p>
  <aside>
    Geralt and Ciri are witchers.
  </aside>
</article>

Semantic Phrasing Elements

The semantic phrasing elements are elements that control the structure of phrases in HTML documents and convey to computer programs the meaning of their content.

The most notable semantic phrasing elements are:

• em,
• strong,
• mark,
• time,
• abbr,
• q,
• cite, and
• code.

Emphasis

The em element is a semantic phrasing element that represents the part of a phrase which is emphasized.

Browsers typically add font-style: italic; CSS attribute to em elements.

<p>
  Geralt had many horses. He called <em>all</em> of them "Roach"
</p>

Stronger Emphasis

The strong element is a semantic phrasing element that represents the part of a phrase strongly emphasized. Stronger than when the em element is used.

Browsers typically add font-weight: bold; CSS attribute to strong elements.

<p>
  There are many swordsmen in the Witcher universe. <strong>None of them could compare to Geralt of Rivia.</strong>
<p>

Marking Relevance

The mark element represents the part of a phrase that is highlighted due to its relevance (as opposed to em and strong importance emphasis).

The mark element can for example be used to highlight:

• a part of a quotation, or
• a matched search string.

<blockquote>
  There are many high fantasy books. <mark>None of them compares to "the Wither".</mark>
</blockquote>

Point or Period in Time

The time element represents a specific point or a period in time.

The time element can have the datetime attribute to indicate an algorithmically readable counterpart of the point or the period in time.

<div>
  The summit is to take place on <time datetime="2022-03-01">March 1st, 2022</time>
</div>

Examples of valid datetime attribute:

• a year (e.g. 2022)
• a year and month (e.g. 2022-01)
• a year, month and day (e.g. 2022-01-01)
• an hour, minute and second (e.g. 09:30:00),
• a local year, month, day, hour, minute and second (e.g. 2022-01-01T09:30:00),
• a global year, month, day, hour, minute and second (.e.g 2022-01-01T09:30:00Z or 2022-01-01T09:30:00-0400), and
• a duration string.

Abbreviation

The abbr element represents an abbreviation or an acronym.

The abbr element can have an optional attribute title which semantically expands the content of the abbr element. Some browsers expand the title when hovering over the abbr element.

<p>
  The effectiveness of <abbr title="United Nations">UN</abbr> is questioned by many.
</p>

One of the usage examples of an abbr element is using it within a dfn (definition) element.

Quote

The q element represents an inline quotation. Browsers typically display a q element in quotation marks.

For non-inline (aka block) quotations use the blockquote element instead of the q element.

<p>
  I love the quote from the Andrzej Sapkowski's <cite>Last Wish</cite>: <q>Evil is Evil. Lesser, greater, middling… Makes no difference. The degree is arbitrary. The definition’s blurred. If I’m to choose between one evil and another… I’d rather not choose at all.</q>
<p>

Citation Reference

The cite element represents a reference to citation source title. The cite element is often used with the q or blockquote elements to refer to the source from which a given quotation originates.

<figure>
  <blockquote>
    Evil is Evil. Lesser, greater, middling… Makes no difference. The degree is arbitrary. The definition’s blurred. If I’m to choose between one evil and another… I’d rather not choose at all.
  </blockquote>
  <figcaption>
    From <cite>Last Wish</cite> by Andrzej Sapkowski.
  </figcaption>
<figure>

Inline Code

The code element represents a piece of computer code.

Most browsers use a monospace font for a code element.

<p>
  In JavaScript an assignment of an arrow function to a variable might look like this: <code>const foo = bar => console.log(bar)</code>
</p>

Semantic Non-Sectioning Non-Phrasing Elements

Semantic non-sectioning non-phrasing elements are HTML block elements of non-sectioning nature that convey in an algorithmically readable way the meaning of their content.

The most notable non-sectioning non-phrasing semantic elements are:

• main
• header,
• footer,
• figure, and
• details.

Main

The main element represents the primary content of a given HTML document.

It is not allowed for an HTML document to have more than one visible main element.

<body>
  <header>...</header>
  <main>
    ...
  </main>
  <footer>...</footer>
</body>

Elements shared between many HTML documents of the same service or application (such as header, footer, sidebar, links) should not be enclosed within the main element.

In turn, the main element cannot be enclosed within an article, aside, header, footer, or nav element.

The main element can be helpful for assistive computer programs at finding the primary content of a given document.

Header

The header element denotes an introductory group of content for a body, section, and/or article element.

It is allowed for a body, section and article element to each have a separate header element.

Typically header includes within itself:

• a heading,
• a cover image and/or logo,
• an author,
• a date,
• an editorial, and
• navigation links.

<article>
  <header>
    <h1>...</h1>
    <a href="http://soundof.it" rel="author">Tom</a>
    <time datetime="2022-02-23">February 23rd, 2022</time>
    <p class="editorial">...</p>
  </header>
  <p>...</p>
  <p>...</p>
</article>

Footer

The footer element includes a summative and metadata group of content for a given body, section and/or article element.

It is allowed for a body, section and article element to each have a separate footer element.

A footer element can include for example:

• an author,
• contact information,
• a copyright indication,
• an attribution indication, and
• navigational links.

<article>
  <header>
    ...
  </header>
  <p>...</p>
  <p>...</p>
  <footer>
    <p><a href="mailto:example@example.net">example@example.net</a></p>
    <p>&copy; 2022 All rights reserved</p>
  </footer>
</article>

Figure

The figure element represents an independent piece of content (typically an image) relevantly connected with other pieces of content of the HTML document.

A potential figure's caption is enclosed within the figcaption element.

<p>
  <figure>
    <img src="/assets/horses/roach" alt="Geralt's horse">
    <figcaption>Geralt's horse</figcaption>
  </figure>
</p>

Details

The details element represents a piece of content that is only disclosed once the element's label is clicked. Therefore, the details element can have a closed and an open state.

For details' label the summary element is used.

<p>
  <details>
    <summary>Roach</summary>
    Roach is a name given to all horses owned by Geralt.
  </details>
</p>

Presentational vs Semantic Elements

Most HTML elements used within body element can be categorized as presentational elements and/or semantic elements.

A presentational element is an element that does not convey to computer programs reading it what its content is from the semantic perspective but only control how the content is displayed visually.

A semantic element is an element that conveys to computer programs, such as search engine web crawlers or assistive screen readers, what its content is from the semantic perspective. In addition, web browsers may also display visually a semantic element in a certain way. Furthermore, semantic elements are a way of describing their meaning in code to facilitate and enhance the quality of development.

Presentational Elements

As noted, presentational elements only control how an HTML document is displayed visually but do not describe semantically what their contents are.

Since 1997 using presentational elements has been discouraged in favor of using Cascading Style Sheets. Further, some presentational elements have their semantic "counterparts" which not only display visually their contents in a way similar to the presentational components but also tell computer programs what their content is. Such presentational elements and their "counterparts" are:

• presentational big element for making the content's font larger - use semantic h1 for headings or span with the font-size property for non-headings,
• presentational u element for underlining the content's font - use semantic em instead for emphasis, b for marking up keywords, and mark for highlighting references,
• presentational s and strike elements for striking out the content's font - use semantic del,

What Are Typographical Elements in HTML?

The HTML typographical elements are elements that are used to display their content in a specific manner not for presentational purposes but due to typographical conventions.

The notable HTML typographical elements are:

• sub and
• sup.

Subscript

The sub is a typographical element in which content is rendered with lowered baseline and decreased font size.

The sub element is typically used for:

• chemical formulas like C₈H₁₀N₄O₂,
• footnotes, and
• mathematics.

<span>
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub> stands for caffeine.
</span>

Superscript

The sup is a typographical element in which content is rendered with higher baseline and using the decreased font size.

The sup element is typically used for:

• ordinal numbers, like 5^th, and
• mathematical exponents.

What Are Anchors in HTML?

The a (aka anchor) HTML element represents a hyperlink to a web resource (a page, a file, an email, etc.).

The actual hyperlink is placed in the href (which stands for hypertext reference) attribute of the anchor element. The hyperlink label is placed between the anchor tags.

<a href="https://soundof.it">
  The best source of IT Tutorials - soundof.IT
</a>

The href can point not only to pages or files but also to emails (mailto:), phone numbers (tel:) and page sections (#).

Anchor Specific Attributes

The anchor element can be configured with several specific attributes. The most notable of them are:

• download - indicates to the user agent to download the linked resource instead of displaying it,
• hreflang - indicates the linked resource language,
• target - indicates where to display the linked resource (use _blank to open in a new tab),
• rel - indicates the relationship or relationships with the linked resource (e.g. nofollow, author, license, alternate, next, prev, first, last, external).

Semanticity of Lists

Using lists for denoting sets of semantically connected items, as opposed to using other HTML elements for that purpose, is the correct approach from the HTML semanticity perspective.

Types of Lists

Generally, in HTML5 there are three types of list elements:

• ul - an unordered list,
• ol - an ordered list, and
• dl - a description list.

Unordered List

An unordered list is a set of semantically connected items typically marked with bullets.

An unordered list is denoted by the ul element and each of its items by the li element.

<ul>
  <li>Roach</li>
  <li>Kelpie</li>
  <li>Bucephalus</li>
</ul>

Ordered List

An ordered list is a set of semantically connected items typically numbered sequentially.

An ordered list is denoted by the ol element and each of its items by the li element.

<ol>
  <li>Roach</li>
  <li>Kelpie</li>
  <li>Bucephalus</li>
</ol>

The following attributes allow for configuring an ordered list

• start - indicates the first sequence number,
• reversed - reverses the numbering sequence.

Description List

A description list is a set of semantically connected items comprised of terms with their descriptions. Items in a description list are typically marked with bullets.

A description list is denoted by the dl element. A term in a description list is denoted by the dt element and its description by the dd element.

<dl>
  <dt>Roach</dt>
  <dd>Geralt's horse</dd>
  <dt>Kelpie</dt>
  <dd>Ciri's horse</dd>
  <dt>Bucephalus</dt>
  <dd>Alexander's horse</dd>
</dl>

List Nesting

A list can be nested within a li element of another list.

What Is Multimedia Embedding in HTML?

HTML allows for embedding the following type of multimedia:

• images,
• videos,
• audio files, and
• vector graphics, and
• objects (e.g. PDF documents).

Images

Intro

To embed a semantically important image on an HTML page the img element should be used.

The img element's src (stands for source) attribute points to a relative path or an absolute URL with the image data.

<img src="images/horses/roach.jpg">
<img src="https://soundof.it/images/horses/roach.jpg">

It is possible to control an img element dimensions with width and height HTML attributes and/or CSS.

Semanticity of Images

For robots (such as search engine web crawlers and assistive technologies) optimization it is considered a good practice to:

• add alt (stands for alternative text) attribute i.e. a description of the image,
• have src to point to a semantically meaningful relative path or absolute URL (images/horses/roach.jpg is better than dns/ho_ro_10.jpg).

In addition to making the robots life easier the alt attribute is also displayed to the user when there are any problems with downloading the image from its source.

<img
  src="images/horses/roach.jpg"
  alt="A drawing of Roach, the horse of Geralt of Rivia."
>

When an image is semantically important, it is recommended to use img elements over CSS background properties. The CSS background property should only be used for decoration purposes as having no semantic meaning.

Images With Captions

It is often a sound idea to nest an img element within a figure element and support it with a caption using a figcaption element.

<figure>
  <img
    src="images/horses/roach.jpg"
    alt="A drawing of Roach, the horse of Geralt of Rivia."
  >
  <figcaption>
    Roach - Geralt's horse.
  </figcaption>
</figure>

The difference between the figcaption element and alt attribute is that the figcaption element is always visible to the user.

Videos

To embed a video use the video element. The video's data source is indicated in the src attribute.

The controls attribute indicates that the video should be equipped with the native user agent's video controls.

<video
  src="movies/horses/roach.mp4"
  controls
>
</video>

Nowadays, video files are often embedded using third-party's (such as YouTube's) ready-made embedding HTML code.

Audio Files

To embed an audio file use the audio element. The audio file's data source is indicated in the src attribute.

The controls attribute indicates that the audio element should be equipped with the native user agent's audio controls.

<audio
  src="sounds/horses/roach_neighing.mp3"
  controls
>
</video>

The notable audio element's optional attributes are autoplay, loop, and muted.

Scalable Vector Graphics

Scalable vector graphics (SVGs) are rendered by user agents instead of just being served like pre-rendered raster images.

SVGs have two main advantages over raster images:

• smaller memory size, and
• scalability (i.e. the ability to be zoomed in without quality loss).

The main disadvantage of SVGs towards raster images is SVGs':

• limited semanticity as SVGs cannot have descriptive file names, nor alt attributes, and
• limited support in some user agents like older browsers or email clients.

There are two ways of embedding an SVG file within an HTML document:

• using img element, or
• using svg element (so called inline SVG).

<img src="svgs/horses/roach.svg">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="...">
  </path>
</svg>

Objects

The HTML object element represents an external resource to be embedded within an HTML document. The resource type is indicated in the type attribute and the address (a relative path or an absolute URL) to the resource in the data attribute.

The HTML object element is a phrasing element.

PDF documents are often embedded in HTML documents using the object HTML element.

<object
  type="application/pdf"
  data="https://soundof.it/pdfs/horses/about-roach.pdf"
>
</object>

What Are Forms in HTML?

The form element represents a user inputtable and actionable part of an HTML document.

Once a form's inputs are filled in a user can submit the form which triggers a request to the server. The server response to the request causes a new page load based on the response data.

Action & Method

Form element's inputs are a way of forming the request parameters which is being sent once a submit button click event occurs.

The form's action attribute indicates a relative path or an absolute URL to which the request is sent once submitted. When action is unprovided the current URL is used.

The method attribute indicates an HTTP method of the request (POST, PUT, PATCH, GET, etc.).

<form action="https://soundof.it/witcher_horses" method="post">
  <label for="witcher_in">Witcher</label>
  <input id="witcher_in" name="witcher" type="text">
  <label for="horse_in">Horse</label>
  <input id="horse_in" name="horse" type="text">
  <input type="submit" value="Add horse">
</form>

The above form gets input from a user about a witcher and their horse and once submitted makes a POST request to https://soundof.it/witcher_horses URL.

Names & Values

Generally, the values of form elements' name attributes are sent to the server like name=value.

How the names and values are being sent in the request depends on the request's method. With GET the name and values are being sent as URL parameters. With POST, PUT and PATCH the pairs constitute the request body.

Form Elements

Forms are built using many different elements. The most notable of those are:

• label,
• input,
• textarea,
• select,
• button, and
• fieldset.

Common Form Elements Attributes

The most common attributes of form elements are:

• id - used for 1) connecting an element with its respective label, and 2) targeting and element to apply CSS styles.
• name - used for building keys of form parameters at form submission (name=value),
• readonly - used for disabling user input at a given element (the element remains selectable and its value is included in the form parameters),
• disabled - used for disabling 1) user input at a given element, 2) selectability of the element, and 3) inclusion of the element's value in form parameters
• required - used for indicating the indispensability of providing a value at a given element before the form submission,
• autofocus - used for indicating the one element to be focused once the page loads,
• form - used for connecting an element with a form (using the form's id) if the element is not nested within that form,
• placeholder - used for providing a hint displayed to the user within the input.

Labels

Form elements that allow for collecting data are often accompanied by labels. The label element represents a description of a given form element that is displayed to the user and is useful for assistive programs such as screen readers.

Furthermore, clicking on a label often focuses the bound element and/or selects (or toggles) its value.

A label element is bound with a given input element when the label's for attribute is equal to the element's id attribute.

Inputs

Intro

The input element allows for collecting user data in many different forms. The most notable of those are:

• text,
• radio,
• checkbox,
• file,
• button, and
• submit.

Text Inputs

The text type input collects a user's single-line textual input.

<form>
  <label for="witcher_name">Witcher name</label>
  <input id="witcher_name" name="wname" type="text">
  ...
</form>

The notable specific text input attributes are:

• autocomplete - a string that informs a web browser about the semantic value of the text input field such as user, email, new-password, current-password, etc. to autocomplete with data already available to the browsers,
• minlength - a number with the minimum number of UTF-16 characters considered to be a valid input,
• maxlength - a number with the maximum number of UTF-16 characters considered to be a valid input,
• pattern - a regular expression value which must be matched for a user input to be considered valid.,

There are specific purpose inputs that might be considered variants to the text input. Such inputs are handled by user agents specifically and are often extended with specific behavior. Those inputs are:

• email - informs the user agent that the input is dedicated to collecting an email address and extends input with email address validation,
• password - informs the user agent that the input is dedicated to collecting a password and extends the input security for entering passwords through visual obscuring of the user input,
• tel - informs the user agent that the input is dedicated to collecting a phone number and extends the text input with a telephone validation,
• number - informs the user agent that the input is dedicated to collecting a number and extends the text input with a number validation,
• url- informs the user agent that the input is dedicated to collecting an URL and extends the text input with an URL validation,

<form>
  <input type="email">
  <input type="password">
  <input type="submit">
  ...
</form>

Some of the specific purpose inputs apply :valid or :invalid pseudo-classes on validations.

Radios

The radio input type allows for selecting one and only one option out of two or more options that are typically displayed visually as small circles (highlighted when selected) accompanied with labels.

<form>
  <p>Choose your most favorite horse:</p>
  <div>
    <input type="radio" id="roach-id" name="horses" value="roach" checked>
    <label for="roach-id">Roach</label>
  </div>
  <div>
    <input type="radio" id="kelpie-id" name="horses" value="kelpie">
    <label for="kelpie-id">Kelpie</label>
  </div>
  <div>
    <input type="radio" id="bucephalus-id" name="horses" value="bucephalus">
    <label for="bucephalus-id">Bucephalus</label>
  </div>
  ...
</form>

radio inputs are grouped using the name attribute. In a given radio group only one radio input can be checked.

A selected radio input in a given group is marked in DOM with the checked attribute. The checked attribute can also be used to mark the input selected by default.

The value attribute's value is used when submitting data to a server.

The radio input is styled with the operating system default styling unless appearance: none property is used which allows for custom styling.

Checkboxes

The checkbox input collects yes or no data from a user regarding a specific matter. A checkbox element is often displayed to the user as a square that allows being ticked or in other words a box that can be checked.

A checkbox input can only apply checked or unchecked (yes or no) state to one specific value whereas a radio input group can apply such a state to one value but from many miscellaneous values.

<form>
  <input type="checkbox" id="likes_horses_id" name="whether_likes_horses" value="does_like_horses" checked>
  <label for="likes_horses_id">Likes horses</label>
  ...
</form>

If the value attribute is omitted the attribute gets on value by default.

Once the form is submitted the pair name=value is submitted provided the respective checkbox is checked. In the above example, it would be whether_likes_horses=does_like_horses. If the checkbox is not checked no name=value pair is submitted.

The presence or absence of the checked attribute indicates whether a given checkbox is checked or not.

File Inputs

The file type input collects a user-provided file or files stored on their device. Once collected, the file or files can be, for example, submitted to the server.

<form method="post" enctype="multipart/form-data">
  <label for="horse_pictures_id">Upload your favorite horse pictures:</label>
  <input
    type="file"
    accept="image/jpeg"
    multiple   
    id="horse_pictures_id"
    name="horse_pictures"
  >
</form>

The attribute accept indicates the type of files accepted by the input.

The presence or absence of multiple attribute indicates whether a given file type input accepts multiple or only one file.

In certain circumstances, the capture attribute can be used to control the user device's camera to be used for capturing an image or a video file when the input allows for such file types.

When a form includes a file type input it often comes with the attribute enctype with the value of multipart/form-data which allows for entire files to be included in the collected data. When no enctype attribute is present then the default value of application/x-www-form-urlencoded is used.

Submit Inputs

The submit type input is rendered by user agents as buttons and once a click event occurs the attempt is being made to send (submit) the collected form data to the URL indicated in the form's action attribute using the method indicated in the form's method attribute.

<form action="https://soundof.it/witcher_horses" method="post">
  ...
  <input type="submit" value="Add horse">
</form>

The value attribute allows for setting the text that is being displayed as the button's label.

Button Inputs

The button input collects a click event from a user.

The click event should be associated with a JavaScript event handler function with the desired functionality.

The value attribute includes the text displayed to the user.

<form>
  ...
  <input
    type="button"
    value="Click me please!"
  >
  ...
</form>

In addition to the input type button HTML includes also the newer button element. The button element's text, as opposed to the input type button, is not included in the value attribute but between the opening and closing tags.

Textareas

The textarea collects multi-line data from a user.

<form>
  <label for="comment">Provide your comment below:<label>
  <textarea id="comment" name="mycomment">
</form>

The most notable specific textarea attributes are:

• autocomplete,
• minlength,
• maxlength.

Selects

The select input collects a user input through allowing the user to select a value from a list of selectable values.

<form>
  ...
  <label for="horses_id">Select a horse</label>
  <select id="horses_id" name="horse">
    <option value="roach">Roach</option>
    <option value="kelpie">Kelpie</option>
    <option value="ihuarraquax"> Ihuarraquax </option>
  </select>
</form>

The option value attribute is the value that is being sent to the server after submit.

One of the most notable select element's attributes is multiple which boolean value controls whether the select element allows for multiple values to be selected at the same time.

It is possible to group options with the optgroup attribute.

Buttons

The button element collects a click event from a user just like the input of type button when the button's type attribute is set to button.

The button's type attribute can also be set to submit or reset which equips it with the relevant functionality of respectively the input type submit or reset. The default type of the button element is submit.

The button element, as opposed to the input type button, submit or reset, can include any phrasing content between its mandatory opening and closing tags.

<form>
  ...
  <button
    type="button"
  >
    Increase by 1
  </button>
  ...
</form>

The button element can have the value attribute which translates into name in the form data.

Conversely, the button element name attribute does not translate into name in the form data but is used to describe the button's functionality for assistive technologies.

Fieldsets & Legends

The fieldset element groups several form elements. A fieldset element is often captioned with a legend element.

<form>
  <fieldset>
    <legend>
      Horses
    </legend>
    <label for="owner_name_id">Owner's name</label>
    <input id="owner_name_id" name="owner_name" type="text">
    <label for="horse_name_id">Horses' name</label>
    <input id="horse_name_id" name="horse_name" type="text">
  <fieldset>
  ...
</form>

When the disabled attribute is present on the fieldset opening tag it disables all inputs nested within the fieldset element.