History and Basics of Html5 
Tags: html, beginners, basics
Published: 2020-05-22 20:53:57

---
title: History and Basics of Html5 
published: true
description: 
tags: HTML5, Beginner, Basics
series: Web Design Principles
---

HTML(HyperText Markup Language) is a structured language, meaning it lets you identify specific parts of the web-page. 
Such as headings, footers, paragraphs, and lists, these are all in the form of elements. 

---

# Table of Contents
1. __Creating Web Pages with HTML__
2. [Adding Style to HTML pages](#adding-style-to-html-pages)
3. [History of HTML](#history-of-html)
4. [Good Coding Practices](#good-coding-practices)

---

###Creating Web Pages with HTML
Web Pages are simply text documents that use the structure of HTML, to define how it should look in the browser. 
The section below displays an example of the structure of the HTML text document and what it looks like in the browser.


---
####Html Structure
```html
<!DOCTYPE html>
<HTML>
<head>
    <title>Title of the webpage</title>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
</head>

<body>
    <h1>The is main the header within the html page</h1>
    <p>A Paragraph within the web page</p>
    <ul>
        <li>A Item in a list</li>
        <li>A Item in a list</li>
        <li>A Item in a list</li>
        <li>A Item in a list</li>
        <li>A Item in a list</li>
    </ul>
</body>
</HTML>
```
>Web Image below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wpkqc5y7h6s5sjqxcftc.png)

---

####Html Syntax

######What is a HTML tag?
* An __html tag__ can either be an opening tag or a closing tag, as stated below.
* An __opening tag__ contains an opening bracket (<) and a closing bracket (>) with the HTML element name between them. e.g. `<h1>`
* A __closing tag__ is the same as an opening tag except that it has a backslash (/) before the element name. e.g `</h1>`  

> On another note, __opening tag__ can also have attributes, one example is an id, e.g. `<h1 id=1>`

######What is a element?
* An element is a __pair of HTML tags__, which contain content between the tags. e.g. `<h1>This is the Heading</h1>`
* There are many different types of elements, some of the basics ones are 
    * HTML
    * head
    * body
    * h1
    * p
    * li
* Each element has a task of shaping the way content will display in the browser. 
* Some elements have no end tag, these elements are known as `void elements` because they contain no content but have an action, such as `<br>` which inserts a line break on the page.
* If you want some more info on the difference between an element and a tag check <a href="https://en.wikipedia.org/wiki/HTML_element#Elements_vs._tags">here</a>.


######The Basic Structure of html elements in a document
* `Doctype` -> This element specifies the __rules for the document language__ which in turn allows the browser to __interpret and display__ the code properly.
* `html` -> This is considered the __root element__ of the page, as it is the __container element__ for all other elements.
    * `head` -> This element contains information that __describes the document__.
        * `title` -> Specifies the the __name of the document__, which displays in the __page tab__
        * `meta` -> defines the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">content type</a> and specifies 
          the <a href="https://www.w3.org/International/getting-started/characters#what">Character Set</a> 
    * `body` -> This element section __displays the page content__ 
        * Most things within the body displays content on the page, a few elements are:
        * `li` -> displays a list item in a list element, such as `<ul><li></li><ul>` 
        * `p` -> displays a paragraph on the page.
        * `h1 -> h6` -> displays page headings, decreases in size with higher values.
            

---

###Adding Style to HTML pages

To alter the looks of a web page, web designers use a styling language called __Cascading Style Sheets (CSS)__. Using this language you can alter many things, such as __color__, __typography__, __page layout__, and even __page disposition on different devices__.

To include a style sheet in the document, either use the `<style>... style rules ...</style>` element nested within the __head element__ or import it using the link element e.g. `<link type="text/css" rel="stylesheet" href='style.css' />` which should also be in the head element.

####CSS Syntax
The style rules inside the CSS stylesheet determines the characteristics of the HTML, these rules require a certain format. 

######Example: 
```p {color: red;};```

> Explanation below

###### The Selector
The selector in the example above is the `p` element, meaning that the `p` element in the HTML document will be affected. 

###### The Declaration
The Declaration is `{color: red;}`, what this means is that we want the `p element` to be defined by whatever is within the brackets, in this case, the `p element` color will be red. 

---

###History of HTML
There are many HTML coding practices in the world, understanding a few of them will help you recognize a few web design methods, an example would be a site that still uses a table to structure content on their website, this design method has become obsolete, being replaced with the use of CSS.

The person to propose HTML, was <a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a> at the European Laboratory for Particle Physics(CERN) in 1989.
The reason he proposed this idea was due to the need for a way to easily manage and share information among colleagues over the internet.
In that period, the difficulty of using the internet for exchanging files and messages, resulted in only a few specialists in science, military, and academia to use the internet. Mr. Berners-Lee was able to solve this issue by joining the ideas of a simple tool for reading documents (Browser), with a set of rules for creating a markup language(HTML), and a protocol of communication that allowed the sharing of documents. This is currently known as Uniform Resource Locators(URLs). This simple structure made the use of the internet available to the general public.

When Mr. Berners Lee developed the idea of documents hosted on hypertext servers and connected by URLs, he created a simplified version of <a href="https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language">Standard Generalized Markup Language (SGML)</a> (standard for document Structures), which he named HTML. Mr. Berners Lee took only the necessary elements from SGML for basic office use, such as generating structured reports. 
The first version of HTML contained roughly around 20 elements such as __titles__, __heads__, and __paragraphs__.

###### HTML Standards
As HTML came into existence and the initial surge of interest in HTML grew, an organization by the name of __World Wide Web Consortium (W3C)__ was founded to create standards and best practices for the web. 

After W3C was founded, the interest in the web grew exponentially. This resulted in companies realizing that they needed a footprint on the web. Publishing companies then started to create their paper-based advertisement on the web, meaning they needed to hire print designers which are now known as __web designers__.
HTML was a designer's horror, as it was not initially designed for the multi-column page such as in a newspaper, each browser generated the HTML differently thereby making it browser-specific and at that time most monitors were 640x480 resolution that only supported 256 colors... 
> A grim time indeed.  

When HTML Tables came into play, it became most designers favored way of building pages, due to being able to build multi-column pages. 

Most web browsers were forgiving of non-standard HTML code, this meant that web designers eventually understood that they can manipulate the code as they wanted since there was a very good chance that the content would look fine on the web. For example, if you left out __closing tags__ or used tags in the wrong order, the page would still be generated.

HTML 4.01 was released in 1999, this tried to address multiple issues. Such as separating style from HTML  which led to deprecating the font element.

__History of HTML Releases__

| Version | Date Release  | Features |
|:-----:|:-----:|:-----:|
| HTML 1.1 | 1992 | Initial Proposal |
| HTML 2 | 1995 | Viewable By Browsers |
| HTML 3.2 | 1997 | Forms and Tables Introduced |
| HTML 4.01 | 1999 | Style Sheets and Scripting|
| HTML 5 | 2014 | Page Layout Elements (audio,visual,animation elements)|
| HTML 5.1 | 2016 | New elements and attributes |


###### XML and XHTML
XML known as __Extensible Markup Language__ was released after HTML 4.01 in 1997, XML was __W3C's attempt__ to move in a different direction with a markup language and was not a forced replacement of HTML. Some part of the reason was due to many people joining and using the web, this attracted bigger corporations such as banks and created online stores which led to the pushing of a stricter language. XML is a stricter language than HTML, as it has to be syntactically correct to be processed by a parser.

__Things unique to XML:__
- One error in the XML documents will prevent it from being processed, as when compared to less strict HTML
- XML lets developers define their markup language, meaning they can create a set of elements that match existing things, like town or city, and then be able to match those elements to the tables in the database.

XML looks similar to HTML with some syntactical differences.
The example below shows what an XML document structure can look like.
```xml
<book>
    <name>New Book</name>
    <chapter>Chap 1</chapter>
    <chapter>Chap 2</chapter>
    <chapter>Chap 3</chapter>
    <chapter>Chap 4</chapter>
</book>
```  
The above example looks like HTML, but with no valid HTML tags. Unlike HTML, XML is not recognizable by browsers and will not know how to display the information, therefor CSS is used to structure the elements of XML on the page.

W3C understood that XML could fix the issue of the wide variety of coding styles with regards to HTML. This further pushed the movement of evolving XML as a language standard. So that the entire web could use a unified language syntax. Eventually W3C joined HTML and XML, keeping the attributes and elements of HTML and named it __XHTML (Extensible HyperText Markup Language)__.

The rules for XHTML are:
* There must be closing tags
* All tags must be correctly nested
* Attributes must be contained in quotation marks
* Element names must be in lower case
* The documents must be well formatted

__The issue with XHTML__ was that many developers did not want to learn the intricacies of XHTML and many websites still used legacy coding methods, meaning they did not want to change something that already works, an old saying of `if it ain't broke don't fix it`. 

Dissatisfaction began to rise in the programming community, when W3C proposed their first draft of XHTML 2.0 which was not backward compatible with XHTML 1.0 or HTML 4 and even removed HTML elements that were currently in use such as `<img>`, `<a>`. Which led to a new HTML version started by a community effort.  
 
###### HTML5
In 2004 an independent group of vendors and browser representatives of the web development community joined together to propose HTML5 as a better step forward rather than XHTML 2.0, this group was known as the __Web Hypertext Application Technology Working Group(WHATWG)__. 
In 2007 the W3C announced that they would restart the support for HTML, and in 2009 they mostly dropped support of XHTML 2.0.

__With the coming of HTML5 a few features of older HTML versions where removed, and a few added:__
* Removed  - Display elements in favor of CSS usage.
* Removed  - Frames and Frame-sets.
* Added    - Support for looser coding style and stricter syntax usage.
* Added    - Application usage, such as local storage, drag and drop, background data processing.
* Added    - logical data sectioning, such as `<footer>`, `<nav>` and `<section>`.
* Added    - Animations that play directly in the browser.


###### Choosing the Correct Mime and Document Type
> For the web page to display correctly, a Doctype and Mime type is needed.

__Document Type__

The `<!DOCTYPE>` statement came from __SGML__ and was used to define a __Document Type Definition(DTD)__ which contained rules for HTML or XML. 

HTML5 is no longer based on SGML, so the DOCTYPE is mainly used to display the page in standard mode, without the doctype the page will be displayed in quirks mode, which is browser specific rules for rendering the page without a standard specification such as W3C rules. 
<a href="https://www.youtube.com/watch?v=FZTZBd33Ys8">This</a> is a good display of the difference between quirks and standards mode.
 
__Mime Type__

The Mime __(Multipurpose Internet Mail Extensions)__ came into existence as an email standard, and from there was brought into the web. The Mime type shows the type of document you are presenting, this means that it is used by the browser to determine the type of content you are presenting
and how it should be rendered.

---

###Good Coding Practices

The best way to implement the best practices is to follow the following guidelines:
- Stick to the standards
- Use semantic markup
- validate your code

###### Stick to the standards

If you want to stick to the standards (unlike most), then simply just strictly follow the guidelines set out by W3C.
This involves creating web sites that are accessible to the widest range of browsers and operating systems, as-well-as using CSS to overcome browser limitations and create a visually appealing website.   


###### Use semantic code
Using Semantic code is the act of using markup for it's intended purpose. For instance, using `h1` for an actual headings or using `<article>`, `<section>`, `<aside>`, `<nav>` for their intended purpose.   


###### Validate your code
Validating your HTML code is as simple as uploading your file to https://validator.w3.org/#validate_by_uri+with_options, 
and fixing the errors that are returned.