New online technology seems to be developed almost daily, however the basic standards and principles of HTML have been relatively unchanged over the past decade. Should you possess the determination (and a free text editor) you could still create your own website from scratch by following the basic principles of HTML and referencing a dictionary of the tags and rules to use. Thankfully you won’t need to go to this extreme, however it is still good to have a basic understanding of HTML and how your site is structured and built. Here’s what you need in getting to know HTML:
What is HTML?
HTML is short for “Hypertext Markup Language” and in current programming standards it is used to deliver the content of a web page. In earlier web development, HTML was also used to dictate how each page would look from a style and presentation point of view, however this is now the job of CSS (Cascading Style Sheets), bringing more flexibility to the way websites are built and altered in future. Both HTML and CSS are text files of code and are stored on your web server; when a page is opened using a web browser (like Chrome, Internet Explorer, Firefox etc), that browser reads the text files and displays the page on screen according to the commands given in these files.
View the source code of any web page and you will see the HTML code used to build the page and structure the content shown. This code consists of many tag pairs that are used to “mark up” your content, and are always lowercase, with angle brackets, and are followed by a “closing tag”. For example:
<h1>This is a main heading</h1>
<h1>is the “heading 1” tag and tells your browser that the text in between these tag pairs is an important heading on that page (more important than a <h2> or <h3> heading etc). Underneath a heading tag, you may have a paragraph tag which indicates a paragraph of text as follows:
<p>This is an example paragraph.</p>
The point of these tags is to organise your page content “semantically”, giving meaning to all of that information within headings, paragraphs, subheadings, and a hierarchy that both helps users navigate your content, and search engines display it according to relevance. For example, a keyword within a <h1> heading should indicate that this page and topic has much more relevance to that particular keyword that a keyword mentioned briefly within a paragraph further down the page. Search engines can use this information to rank pages and content for relevance.
CSS can then be used to work together with this content and present it in a more visually appealing format, dictating different fonts, bolds, italics, and colours specified within the CSS code to be applied to the content within the HTML code.
Take a Look Behind the Page
Go to any web page and select “View Source” in your web browser, and you will see the source code used to build that page. At first glance this might seem overly complicated, however once you know what you are looking at, you will see a structure and format that is quite simple and elegantly presented.
The first couple of lines on a page give the web browser information about the page’s format, and then underneath this you will find the entire code of the page within thetag pair. This tag pair contains two main sections; theandtag pairs. The head contains thetags, which is the name of each page displayed in your browser tab, and thetags, which are used as a description of the web page. Within the body tags you’ll find all of the content of the web page, including the <h1>heading and paragraph tags we discussed above.
CSS for Presentation
As we discussed above, the CSS is used to instruct the browser how to render each HTML tag, and thus controls the look and feel of the site. CSS files are usually kept in a separate text file and linked to you HTML file with a line of code such as:
In the above, you would replace “mywebsite.css” with the actual name of your CSS file saved on your server, and this file will contain a series of rules that are used to apply that style to each particular part of your HTML page.
Learning how to write a CSS file is beyond the scope of this brief introduction, but it does not have to be overly complicated; it is simply a way of dictating which style rules (chosen by you) apply to each particular part of your HTML on your web pages. Should you wish you get more hands-on with HTML and CSS there are plenty of free and paid instructional guides and videos available online, and http://www.codecademy.com/ may be a good starting point.
