What is HTML?
Firstly, all html markup is defined by HTML tags, Let’s talk about those!
Tags or <elements>
Everything in HTML is contained in tags, which are enclosed in arrow brackets <element>. There is a difference between requirements for XHTML and HTML4 or HTML5. XHTML is based off the XML markup language. In XML everything must be properly nested, and all tags must close. In pure HTML this is not the case, however it is good practice to keep the XHTML conventions in place, as it makes for cleaner, easier to read code, which generates less errors. If we apply the XHTML conventions, there are two types of tags structure we can look at:
- Self-closing tags
- Regular tags
Self closing tags
These are tags that as the name suggests do not require a separate closing tag. An example of this is <img> <meta> or <br> and example of this may be:
<img src="my_image.png" alt="my_image" title="my_image" />
Opening and closing tags
All other tags must be used in pairs – spaced between the opening tag and a closing tag. An example of this would be:
<span> Words go between the two tags </span>
HTML page Structure
A HTML page has a defined document structure
- The Document Root
- The Document Head
- The Document Body
The Document root is the <html> tag. All the HTML content must be between this element. The <html> tag has two children, the <head> and the <body>. There is also a <!doctype> declaration tag which links and informs of the Doctype Definition (DTD), which is not strictly HTML, but more a message to tell the browser, how the webpage is built.
This is where the “magic” happens. It is the core of the website. This where all content – such as text, audio, video, and images are displayed – though text based browsers will call the alt attribute on your image and other rich media files, so remember to optimise for accessibility. Within this section you can create the user interact-able content of a website. HTML in the past was solely used for styling, but this is best served by CSS. If no styling is applied at this juncture then the site be automatically render the default styles, such as text in Times and images. Designers and developers look to print media to divide the layout of the page further, with HTML using semantic markup tags to create better meaning to layout, and indeed content.
Semantic HTML and Page Layout Structures
This section generally mimics a newspapers main headline layout, with the logo, and a navigation section. It is usually visual and engaging, and remains the same site-wide, with the exception of logged in/logged out variations on dynamic websites.
This section may not be required but it makes styling more efficient. I like to have things like company logo, company details, navigation links and shopping cart (where applicable) in the header. The header can then be styled different to the body if you like.
A very new element in HTML5, This is where you display the core content of your web page. It contains the information of each relevant page, i.e. welcome screen, about, products/services etc… It is subdivided into different sections, depending on content, these may include:
The footer is increasingly important for SEO. Contact information and social Media links are best placed here. Like the header, it is a site-wide layout structure, that should not change. Links to site maps and information specific to the business is best placed here.