What is HTML? Let’s Explain it! (An Introduction)

What is HTML?

HTML or HyperText Markup Language – is the core language that powers the content of the web. In this short post I will aim to lead you through the structure of HTML and how it interacts with a web page. HTML is for content, and content only. In the past it had to style and layout pages too, but that job is best done with CSS. Javascript looks after behaviour.

web structures
Source: Keith Gregg

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.

The Head

Like your head, the <head> element is where the logic and data of the page exists. The browser will automatically choose not to display this with CSS. It Contains all the non visual data that controls the execution of the website. It holds meta data, links to CSS stylesheet files, language and character definition as well as other relevant data to the website. Sometimes you will see links to JavaScript files. This is gone out of practice, due to the ubiquitous nature of mobile searching. For faster page loads, all <script> elements should be placed before the closing <body> tag.

The Body

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

The Header

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.

A newspaper <header> source: http://static.guim.co.uk/

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.

The Main

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:

  • <article>
  • <section>
  • <aside>
  • <header>
  • <footer>
  • <address>
  • <figure>
  • <table>

The Footer

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.

Advertisements

6 thoughts on “What is HTML? Let’s Explain it! (An Introduction)

    1. n’awww cheers! such a lovely thing to say. As someone who went from Art to learning IT, I found the language used was unfriendly and daunting. I try to make it accessible, cos it really is!

      Like

  1. You have a really good thing going on here. You should do more of web related posts. I’ll definitely read them.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s