HTML Development Page
HTML
HyperText Markup Language, or commonly referred to as HTML is a markup language for describing web documents (web pages) and alongside CSS and JavaScript is one of the three core technologies of the World Wide Web (WWW.) and nearly all websites today.
HTML was invented in 1990 by an English Physicist & computer scientist Sir Tim Berners-Lee whilst he was working at Cern, the first publicly available description is a document called "HTML Tags" and was based off "Standard Generalised Markup Language" (SGML) a complex and technical markup language used internally there.
A markup language is a set of markup tags and each tag describes a different document content by using keywords. HTML has become the standard markup language used to make up the content, framework and structure of websites today.
It is used by the web browser to interpret and compose the contents (documents) of a page such as text, images, photos and videos into the visual or audible webpages that we see or hear.
The browser does this by reading the HTML Syntax (tags), these are a collection of commands (keywords and symbols) that the browser understands to tell it how to format and display the content on the page. It does not however display the tags on the web page only the contents within the commands.
HTML tags are keywords enclosed in angle brackets e.g. <html> these commonly come in pairs
a start tag (or opening tag) <h1> and a end tag (or closing tag) </h1>, the closing tag in the pair always
contains a / symbol this tells your browser that this is the end of that command. However there are also some tags
which do not require a closing tag e.g. <img> image tag.
The HTML sets the structure of a webpage into sections which are commonly defined by the tags <head>, <body> and the page must always start with the <!Doctype> declaration.
<!Doctype html> This is vitally important command as it tells the browser what type of document it is reading.
<head></head> Text between this tag provides information about the document, included inside this are:-
<title> </title> this element provides the title and is required in a HTML document.
You can also include the following elements
<style> </style> instructs the browser where to find the style sheets.
<link> </link> element is used to link other resources (such as style sheets) to a document.
<meta> </meta> provides information about the Web page mostly to help search engines categorize them correctly.
<body></body> This is where the main content of your webpage is placed and can contain the following elements
<h1> </h1> are headings on your page, its number refers to the size of the heading you have assigned they can
number from <h1> largest to <h6> the smallest but will always be larger and bolder than your text.
<p> </p> p for paragraphs, where your text should be written.
<ul> </ul> & <ol> </ol> allow you to define a list then <li> </li> are used to define the list items.
<footer> </footer> now this isn't strictly necessary for your HTML document it is a common feature on today's web pages and separating this helps you as a developer to keep your code tidy thus reading your code easier.
There are many other commands used to control numerous other page elements a good source of these can be found .. Coming Soon
Though HTML is responsible for the page content and structure it doesn't control how the page ultimately looks this is why it is commonly used besides CSS and JavaScript.
The look of the page is the CSS (Cascading Style Sheets) job, it defines the colour, shape, style of layout (positioning of page elements) when using CSS commands these are written in a separate file to the HTML but is then linked to it via a tag in the head of your HTML page.
JavaScript is used to control the interactive elements such as collecting information in a form or making a button feature sound when moussed over or clicked.
So if you only made a web page with HTML tags it would look rather bland and uninteresting adding CSS and JavaScript will give you a more interesting and fun page by bringing colour, sound and interactive functions.
Originally any styling would have been added into the body of your HTML. Luckily HTML has kept evolving from the early invented language and today we use the latest revision HTML5. It now incorporates features that enable web developers to create websites that are faster and smarter than could be achieved with the older versions. These new features include
LocalStorage - which enables developers to store data on the users computer.
HTML5video - this enables video playback in your web browser without the need for a plugin such as flash, it also has new interactive elements such as date pickers and sliders.
New to HTML
Popover - When open, the popover elements will appear above all other elements in the top layer, and won't be influenced by its parent element position or overflow styling. Popover offers a number of uses that means you will no longer have to reach for JavaScript to solve.
We have written about it in more detail with a working example on JasmineWS in the Docs / HTML section Popover
Further references from Web.dev - Popover - MDN -Popover
This page was last updated on .
HTML Standard
- HTML 5.2 Living Standard Last Updated 15 March 2024
Looking to get started learning HTML?
Our guide will walk you though building your first website with just a browser and a GitHub Account.
Build & Publish a website in the browser
Build a website in your web browser using github.dev which is stored on GitHub and configure static hosting to host it.
Open JasmineWS.uk to get started. Two templates are available.