A layered assembly

• HTML5 forms the framework of your website. It contains the instructions for the browser to visualize text and other elements of your website. In the early days, HTML was the only thing you had. An up to date website would be HTML 5.0 compliant – this will make mobility support easy. But you must be careful that if the browser does not support HTML 5.0, you fallback to a legacy syntax.
   
• CSS3 is the layout layer. It defines the style of your website (font, colors, layout, …). In the early days, the HTML code did include layout. Nowadays, it’s “good practice” to place this in the CSS layer. By adapting some definitions in the CSS layer, you can update a whole website to a new corporate look. A modern style website should be using CSS. The current standard is CSS3.
   
• The functionality layer on the other hand is not always required. If complex field validation is required, complex interaction with background processing, then you will need coding. With the arrival of HTML5, more and more (forms, multimedia) can be achieved without true coding. Coding will is most cases be done in JavaScript (but many other solutions are available, such as Flash and SilverLight). Flash and Silverlight are a dead end street as not supported by many mobile devices. Go for the HTML5 standards. Search engines will mostly not look into proprietary coding. So if you are using coding to navigate between screens, you might loose the search engine in understanding this. Dynamic data, e.g. fetched through coding from a database is also invisible for the search engine.
   

Structure = HTML

HTML language

The base of a website consists of the structure laid down in HTML coding. It’s the code the browser will use to visualize the website. HTML is the code the search engine will be reading. Make sure that what should be seen by the search engine is part of the HTML code (and not produced by a programming language such as JavaScript or Flash).

The study of HTML (and CSS and JavaScript) are outside the scope of this  course. But just to give you some idea, let's look at displaying a bullet list.

And now a table: A table consists of 3 parts: Start-and-end of the table definition, start-and-end of a row, each time containing one or more start-and-end of a cell.

HTML: Assisting the search engine

• Pictures: make sure the “alt” text contains a clear description of what the picture all about. Make use of search keys. The search engine will not index the photo by itself (some experiments are going on with face recognition, well known places & buildings). Change also the file name of the picture to something meaningful (e.g. from can335654.jpg into sunset_ostend.jpg)
• Meta tags are used in the code block “head” of a page. Some of those are relevant for the search engine:
• meta name=“description” content=“”
• A description of your page in less then 150 characters. This text is the one displayed in the search results of your search engine. Is important for the click through rate, so reflect on what you put in. It should be an attractive text convincing people it’s worth to click.
• meta name=“keywords” content=“”
• This was in the early days the key location to enumerate keywords. People tried “Black hat” tricks here, like a long lists of key words with no relevance to the page. Don’t do that anymore, you will get penalized. You must fill it truly in, and the search engine will look at it. But the search engine will also look to your text and you will not be able to fool the search engine if you put in not related stuff.
• meta name=“robots” content=“”
• This instructs the search engine on what to do with this page. Should he index it ? Are the links on the page to be followed ?
• Values are: “Index, follow”, “index, nofollow”, “noindex, follow” and “noindex, nofollow”
• If you don’t provide this tag, the default selected will be “index, follow”

Layout = CSS

•     CSS = Cascading Style Sheets
•     Determines the looks of your webpages
•     Colors, fonts, style, layout
•     HTML = data and structure without layout 
•     CSS = layout without data and structure
•     Website builders such as Weebly will just change the CSS coding if you switch theme

Functionality = coding

• Although, with the latest HTML 5 standard a lot is possible without coding, you will have to resort to coding if you have advanced functionality requirements. Typical examples are browser games, complex field validation, calculations, dynamic data fetching.
   
• This will often be written in JavaScript. If you produce content en navigation in JavaScript, the search engine will likely not track this. Search engines can read some basic JavaScript, but don’t count on it.
   
• If AJAX is used, JavaScript code in your browser will send commands to the Webserver, where also part of the processing is happening. AJAX and search engines are not a good match. So you have to take in account that what is build there is data not available to the search engine.
   
• There are other technologies around, such as Flash and Silverlight. Those are fancy and powerful, but might not work on tablet/smartphones though. As more and more website access is coming from those new devices, one has to favor techniques which work on Apple IOS and OSX, Linux, Android, Microsoft phone platforms. So you might go for a less fancy JavaScript and using only standards within HTML5 in order to have better multiplatform support.
   
• To conclude: Make sure text and navigation can be found in HTML. If you have this hidden in code, you risk that parts are invisible to the search engine.