HTML

**HTML** (**H**yper**T**ext **M**arkup **L**anguage) is a standard markup language for web documents designed to be displayed in a web browser. HTML itself is static, and could be enhanced with Cascading Style Sheets to add design properties to the markup, and JavaScript to add functionality such as dynamic content.

## Markup

### Example

A basic HTML document must begin with a `!DOCTYPE` declaration, although newer browsers could still parse documents without the declaration, old Internet Explorer versions use a much more complicated `!DOCTYPE` declarations because they must include a Document Type Definition.

After the declaration of the document, a `<html>` tag must be present. Although like before, browsers could display the website normally, an inconsistency may produce an error to some format-sensitive softwares such as screen readers and older browsers.

A `<head>` meta element must be included to instruct the browser how to load the page. In the head element, sub-elements must be included as well.

This includes the elements:

* `<meta>`, controls preliminary data and identification that the browser loads for the first time. Data includes the webpage author, semantic data, license, and others. Self closing tag. Search engine crawlers makes first impressions based on the meta tags, and as such, formatting and filling out these tags is a recommended SEO practice.
* `<title>`, controls the title of the document, but not the name of the file.
* `<style>`, controls local in document styles, any CSS code in the this element would be parsed. It is recommended to use outsourced stylesheets due to how the browser parses styles.
* `<link>`, controls how the browser would fetch external resources, most commonly used to fetch CSS document. Unfortunately, JavaScript cannot be fetched using this method.
* `<script>`, like the `<style>` tag, this element executes any JavaScript code inside it, could also be used to fetch external JavaScript documents, although the resource that is fetched could be dangerous or malicious without proper HTTPS encryption, security protocols, integrity checks and basic code scanning: `<script referrerpolicy="origin" src="resources/code.js">`.
* `<base>`, controls the root base link. If the browser recognizes a base link, the document doesn't need to use the whole path to refer to root assets.

After the `<head>` element, the `<body>` element is introduced to the document, the `<body>` tag wraps around all the contents of the viewable part of the document.

The `<p>` (paragraph) tag denotes a part of the text that is considered a paragraph, the `<p>` element would expand and contract itself assuming how large and small it's contents is, although this could be restricted by wrapping it in a fixed width-height `<div>` element.

HTML markup normally is case insensitive and ignores whitespaces, but everything inside the element and its attributes is case sensitive.

```
<!DOCTYPE html>
<html>
 <head>
  <meta name="description" content="My first website!">
  <meta name="author" content="Myself">
  <title>A webpage :)</title>
 </head>
<body>
 <p>Hello world!</p>
</body>
</html>

```

#### Difference between markup language and programming language

HTML is a markup language, not a programming language. The difference is what markup language is, and what programming language is. A markup language tells the software how to display and react to it, whilst a programming language tells the program what to do.

### Semantic tags and ARIA

In recent years of development of the HTML5 Living Standard, Semantic HTML has become one of the recommended features of web development, semantic HTML tags are used to give meaning to a part of the markup, for example:

```
<div id="main-container">
  <div id="logo">
    <img src="/res/logo.svg" width="100px" />
  </div>
  <ul id="link-nav">
    <li><a href="/">Home</a></li>
    <li><a href="products">Products</a></li>
    <li><a href="about">About us</a></li>
  </ul>
</div>

```

The code above may be meaningful to the developer, but to screen readers and other assistive programs, it may just be another decorational piece of code to the website. Semantic tags have metadata already implemented in them, so the developer may use these tags to give meaning to assistive programs and even search engine crawler bots:

```
<header>
  <div id="logo" role="banner">
    <img src="/res/logo.svg" width="100px" alt="Our logo" />
  </div>
  <nav>
    <ul id="link-nav">
      <li><a href="/" title="Go to homepage">Home</a></li>
      <li><a href="products" title="Go to the products page">Products</a></li>
      <li><a href="about" title="Learn more about us">About us</a></li>
    </ul>
  </nav>
</header>

```

The snippet above is much more meaningful both to the developer, and assistive softwares. It also reduces the need to scope `id` selectors to elements as the semantic tags are unique by themselves and can be specifically targeted by both CSS and JavaScript. Most of the non semantic elements in the snippet have been added common accessibility components (`alt` for supplying alternate text or description for the interactive element) or ARIA attributes.

WAI-ARIA is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.And since HTML5, all ARIA attributes, roles and states are now valid, although it is highly recommended to use widely supported ARIA features rather than making custom ones.

## References

1. ↑ HTML doctype declaration *W3Schools* - Retrieved Eighth of July, 2021
2. ↑ HTML head Elements *W3Schools* - Retrieved Eighth of July, 2021
3. ↑ HTML meta tag *W3Schools* - Retrieved Eighth of July, 2021
4. ↑ HTML title tag *W3Schools* - Retrieved Eighth of July, 2021
5. ↑ HTML style tag *W3Schools* - Retrieved Eighth of July, 2021
6. ↑ HTML link tag *W3Schools* - Retrieved Eighth of July, 2021
7. ↑ HTML script tag *W3Schools* - Retrieved Eighth of July, 2021
8. ↑ HTML base tag *W3Schools* - Retrieved Eighth of July, 2021
9. ↑ HTML body tag *W3Schools* - Retrieved Eighth of July, 2021
10. ↑ ARIA *MDN Web Docs* - Revision Nov 10, 2021, by MDN contributors