HTML Explained
HyperText Markup Language
When we say HTML, the first thought that comes to our heads is “what does HTML stand for?”. So let’s start at the beginning. HTML stands for HyperText Markup Language. In fact, it’s the markup language which is used to create web pages and applications which you view every day on the internet. Its pretty much what began the internet as most people know it.
HTML facilitates a web designer to specify what content is needed to be displayed on a web page to be accessed later by us using a web browser. The current standard version of HTML is HTML 5.0, though HTML 4 is also still in wide use.
Sell also Version 5.0 Documentation, Version 4 Documentation, Cascading Style Sheets
But, before we go into more details about HTML, let’s find out what Hyper Text and Markup Language means.
HyperText
<!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body> <h1>My First Heading</h1> The current standard version of HTML is <a href="https://www.w3.org/TR/html5/">HTML 5.0</a> though <a href="https://www.w3.org/TR/html4/"> HTML 4 </a> is also still in wide use. <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List ITem 3</li> </ul> </body> </html>
Hyper Text means text that is not linear. Or in other words, it’s text that contains links to other text. The best example you can take is hyperlinking which links you to other pages, paragraphs or even web pages. Hyper Text can be used to move around the web to any place with the use of links.
HTML HyperLink example.
<a href="http://www.somelink.com/somefolder/index.html"> Example Link </a>
Markup Languages
Markup Language (acronym: ML) is a language which is used to annotate text and mark them for manipulation using a computer. Markup languages help the computer to distinguish the text to be manipulated and is, therefore, human readable. Some well known markup languages include HTML, XML (Extendable Markup Language) and XHTML (XML and HTML combined later to become HTML5). All major word processors had their own markup tags. Also, printer formatting languages use something similar.
XML Example
<?xml version="1.0"?> <!DOCTYPE SEEDS ONHAND "seeds.dtd"> <?xml-stylesheet type="text/css" href="xmlseedsstyle.css"?> <SEEDS> <TITLE>Seeds On Hand</TITLE> <SEED> <ITEM>Bean</ITEM> <TYPE>Pinto</TYPE> <SUPPLIER>Fred Brown</SUPPLIER> <COST>2.00</COST> <AMOUNT>1 lb</AMOUNT> </SEED> <SEED> <ITEM>Bean</ITEM> <TYPE>Green</TYPE> <SUPPLIER>Judy Green</SUPPLIER> <COST>1.00</COST> <AMOUNT>1/2 lb</AMOUNT> </SEED> <SEED> <ITEM>Squash</ITEM> <TYPE>Summer</TYPE> <SUPPLIER>Fred Brown</SUPPLIER> <COST>3.00</COST> <AMOUNT>1/4 lb</AMOUNT> </SEED> <SEED> <ITEM>Potato</ITEM> <TYPE>White</TYPE> <SUPPLIER>James Gardner</SUPPLIER> <COST>5.00</COST> <AMOUNT>5 lbs</AMOUNT> </SEED> </SEEDS>
While HTML contains predefined markup tags to present the data in a structured manner, some languages such as XML don’t contain predefined presentation semantics. You can make your own XML tags up at will. Java makes heavy use of XML files for configuration files. Java has superb API’s for reading and writing XML.
HTML Elements
HTML documents are made by a collection of nested elements. The elements are predefined, each having a specific function to give the final result we see on a web page.
Tags
A single HTML element is comprised of a single tag or a pair of tags. The HTML tag is denoted by enclosing the name of the element in angle brackets.
Ex: <head>
In the general case of having a pair of tags, the first tag is the opening tag and the last tag is the closing tag of the element. The closing tag is specified by adding a forward slash in front of the element name in the tag. Together the two tags define the scope of the element and its effect on the content.
Ex:<h1> Content to be affected </h1>
Basic HTML elements
HTML element- The opening and closing HTML tags, <html> and </html> indicates the HTML content which finally makes up the web page. This usually comes first in the file or after the DTD (Doc Type Declaration).
The next two important elements are the Head and the Body elements which are found nested in the same level, in the given order within the HTML element.
Head element- The text between <head> and </head> tags include the title element, metadata and other scripts and links to CSS stylesheets.
Body element- The body element denoted by <body> </body> tags contain the elements and content that makes up the visible content on the final output of the web page.
Title element- This element nested within the head tags are used to give the title for the web page to be displayed on the browser tab.
DocType Declaration- The DTD or the DocType Declaration varies with the version of HTML you want to use for your web pages. For HTML5, the DTD is <!DOCTYPE html>. And this is specified at the beginning of your HTML file.
Hello World in HTML
Given below is the simplest ‘Hello World!’ program for HTML with its output.
<!DOCTYPE html> <html> <head> <title> This is a title </title> </head> <body> Hello World! </body> </html>
Attributes
While an opening and closing tag can define basic scopes, there are attributes of elements that can enhance the functionality of a tag or give the declaration a more specified definition. An element can have one too many attributes.
These attributes are given values to specify the required end result. While some attributes have fixed values like ‘true/false’, there are other attributes which can have a numerical range. If the values of attributes are not specified by the designer, they are assigned with their default value.
<body align="center"> Some text to be center justified. </body>
Comments
Comments can be added in HTML to facilitate the reader to understand the function of each element’s usage or the markup in an HTML file. A comment doesn’t appear on the end result of the web page but can be referred from the HTML file.
Ex: <!– This is a comment –>
Parentage and history
Parentage
HTML was born as a subset of SGML (Standard Generalized Markup Language), based on SGML principles. Therefore HTML is a SGML application alongside XML and XHTML which are also SGML applications.
SGML was based on older generalized markup languages originated at IBM such as GML and ISIL. But there’s nothing more to note about SGML except to say when searched you can find out that there are other SGML applications in use as well. Learning a bit about SGML and its history will give you a better understanding of the complete technology surrounding its applications.
DTD (Document Type Definition) is also an important keyword to learn and get an understanding of when talking about HTML. This is because HTML, as well as XML and XHTML all, have their own DTDs. All SGML applications should have their own DTDs. DTD explain how to form the document and are used by tools to make sure documents are well-formed.
History
The beginning of HTML is marked in 1989 when a physicist named Tim Berners-Lee working as a contractor at CERN proposed an Internet-based hypertext system. Even though he wrote the browser and server software for HTML in 1990, the specification for HTML was released to the public in late 1991, in a document by the name of ‘HTML Tags’. This first version comprised of 18 HTML elements of which 11 are still available in HTML 4.
HTML 5
HTML 5 is a combination of HTML 4 with enhancements, XHTML and HTML DOM. HTML5 is what become of DHTML. It is the best practice nowadays to use HTML only for the content of the web page and not for formatting. Instead, CSS level 3 is now used for Formatting your web site. As a matter of fact, HTML comes with standard basic formatting which is usually completely replaced with CSS formatting. Though it doesn’t have to be, CSS may merely alter or add to the basic HTML formatting. I say more about CSS in the article about CSS.
HTML constantly goes through revisions and additions to cater the demands of the growing population of internet users. These changes are overlooked by the W3C (World Wide Web Consortium) which designs and maintains the HTML language and its standards. Therefore, if you require more information on HTML, the best place to visit is w3c.org.
Important changes in HTML standard best practice.
- Tables should no longer be used for layout, use CSS instead.
- Tables should only be used for displaying tabular data.
- HTML frames are no longer recommended and should not be used, use div tag and CSS instead.
- Though iframe (internal frame) might have limited usefulness in certain applications.
