History and Basics of Html5

zak — Fri, 22 May 2020 20:53:57 +0000

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.

Creating Web Pages with HTML
Adding Style to HTML pages
History of HTML
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

<!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

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

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 content type and specifies the Character Set
- 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 Tim Berners-Lee 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 Standard Generalized Markup Language (SGML) (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.

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

DEV Community: zak