Let’s get cracking on with HTML, what it is, what goes into making it and how knowing about it you can quickly check a website for efficiency.
What is it?
Starting off, let’s go into the different elements that can make up a modern website. HTML stands for Hyper-Text Markup Language HTML is the language of webpages and is what a browser interprets to serve a page to a user (yes all those funny looking words and sentences mean something.)
The following are referenced within a HTML file:
CSS means Cascading Style Sheet. This where your HTML page gets all its good looks from. For instance, types of font, sizes, colour, etc.
The following is used to dynamically call HTML files or information within a HTML page. PHP means PHP: Hypertext Preprocessor. PHP is a free server side scripting language (there are others Microsoft’s .ASP is another) that serves pages when they are called for, and as an example WordPress is written on PHP although with it’s own set colloquialisms. Another example is when you log in to a site and it knows who you are for instance when you shop on Amazon.
So why is this all important?
Websites are becoming more and more complex, though at their cores they will all use HTML + CSS to display content. There are other forms of dynamic and server scripting languages, yet they will all perform a similar function by outputting HTML to give to the browser.
Knowing these elements and how they work together is important to be able to find information quickly and understand how the pages were constructed. From that we can efficiently find elements that may cause issues or flag problems from a marketing future proofing perspective. This allows us to advise our clients on the best courses of action with their online business presence and SEO and none of us want to wait for a page to load!
It is now common and BEST practice to segment our websites, keeping content, style and scripts separate. Not only is this helpful going over website data, but it means things can be quickly and easily altered. This means in its simplest form that CSS files, JS and other variations of scripts are kept separate externally and are referenced by the HTML and are called only when needed. It also looks pretty.
To see an example of what makes up a website right click on a webpage of your choice and click View Source
Confusing isn’t it?
Now I will break down what you see when looking at a site with the basic structure of HTML. Here’s some mark-up I wrote earlier.
<title> Pagey McPageFace </title>
<meta-description=” … “/>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link ref=”stylesheet” type=”text/css” href=”styley_mcstyleface.css”/>
<div id=” … “>
<div class=” … “>
<h1>Some amazing, awesome relevant title!</h1>
<!– This is a comment –>
Breaking all that down:
<DOCTYPE! …> – This tells the browser how to read and interpret the HTML
<html> – This opens the HTML document to be read
<head> – This loads page information
<title> … </title> – The title of the page (relevancy)
<meta-description=” … “/> – Keywords and page descriptions here please.
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> – This says what character-set is used in the page (There are others for other written languages like Chinese/Korean, etc)
<link ref=”stylesheet” type=”text/css” href=”styley_mcstyleface.css”/> – This is a reference link that pulls in an outside source, in this case it is the CSS file to control the style of the page
</head> – Closes the head section
<body> – Opens the body section ( this is all your content )
<div id=” … “> – This is a unique element like header or footer
<div class=” … “> – This is a generic element used for styling multiple items
<h1> – Important page title
Some amazing, awesome relevant content!
<h2> – Slightly less important sub-title
More info on awesome relevant content!
<p> – Paragraph for content
</div> – Closes the class section
</div> – Closes the id section
<!– | In these special tags is a comment so you can say what a particular piece is within the page, or ask people why they are sniffing around your markup | As a best practice, JS Links are now often placed under content before the closing body tag. This is to speed up content load times so users are not staring at blank page while it loads –>
</body> – Closes the body section
</html> – Closes the document
Getting to Grips with HTML
The important part of HTML is the mark-up part. Knowing these little tags will allow you to quickly understand a document and how the HTML relates to elements of the rendered page. To relate, when you highlight a word or sentence and click the bold or italic button to create emphasis, HTML tags are doing exactly the same thing.
There is a specific set of tags that are universal to HTML pages; h1-h6, p, div’s, b, ul, li, as a basic list (a little HTML joke there). These can be altered by calling to a style sheet. All of the content will be placed within tags:
The makeup of Mark-Up Tags
These are the opening and closing tags (these tell the browser that in here is something important to reference and that it need to display what is inside the tags)
<h1> This is a main header and is awesome! </h1>
<h2> This is a secondary header! I’m not as important as my h1 cousin, but I can still be there as sub-heading! </h2>
<p> Imma paragraph and tell you all the amazing content you want to show off! BOOM! </p>
* Don’t forget to close brackets and elements as this can cause some pretty funny problems (but mostly some massive headaches)
An important note about IDs and Classes (these are referenced generally in a style sheet). ID’s are unique <div id=”…”> and should only be referenced ONCE in a HTML file. An example of this is to define areas to the page like header, nav, content, footer (HTML5 has made this easier with semantic elements already defined, caution is advised though as not everyone is HTML5 ready still).
Classes are generic <div class=”…”> can be used as many times as you want within a HTML file. They are used to define equal styles across elements.
I hope this has been easy to follow and helped demystify the crazy and exciting world of HTML.