HTML stands for Hyper Text Markup Language and is the fundamental language of the web. Basically it tells a web browser what information to display on a web page and how to display it. To that end it can determine the structure of the page (and its content) as well as the formatting or styling (colour and size etc) of the page, although the latter are often controlled by style sheets instead (see CSS below).
The markup primarily uses tags, placed before and after each piece of content, to define what are known as elements. These elements can be individually defined and/or belong to (standard or bespoke) groups which can then be interpreted by the browsers. For example, a portion of text that needs to display as a paragraph should be preceded by a tag and closed by a tag.
The rules (i.e., syntax) that govern the use of HTML and what is standard mark up language are set by the W3C (World Wide Web Consortium) so that website and browser developers have a consistent language to work with. The latest incarnation of HTML is HTML5, which is intended to meet the needs of the current media-rich, multi-device world of online content, although it is presently still under development. The latest HTML standard is HTML4.01.
The initials CSS stand for Cascading Style Sheets, but the term is often interchangeable with simply style sheets. In essence CSS is used to specify the style that would be applied to a web page or set of web pages including, for example, the positioning of elements on the page, colour schemes, background imagery and font formatting.
When used in conjunction with properly defined and identified HTML elements its primary benefit is that it allows styles to be specified only once, in one style sheet, and then applied to multiple elements across either one page or an entire site; rather than having to be specified individually against each occurrence of each element (of which there could be thousands). In short, employing CSS means that all pages on a website can follow the same styling theme using just one style sheet. In addition, the same web page(s) can even link to different style sheets so that it can appear with different styling depending on how that page is viewed. For example, one style sheet can be activated if the user is viewing the site on a mobile device and another if on a PC.
The cascading element of the name refers to the way in which the styling is applied to a particular element following a hierarchy of specificity; a style sheet could, on the one hand, tell the browser to display all hyperlinks as blue, but, on the other, tell the browser that all hyperlinks appearing in the footer element should be red. The result would be that, for any links appearing in the footer, the more specific instruction would take precedence and they would display as red.
Gaining an understanding of the terms HTML and CSS, what they do, how they work and how they interact is really the first step in understanding how web pages and sites are put together. In the second part of this article, the terms XML and CMS will also be defined and their role in web development explained.