Donald Louch - DIGI 220 Lab 2 Standard & Advanced

Semantic Formatting


When creating an HTML website it is highly recommended to use semantic elements as it, ... [helps] computers make sense of the meaning of your content. The World Wide Web Consortium (W3C) defines a semantic element as something that, ... clearly describes its meaning to both the browser and the developer. In addition, When you optimize your content with semantic elements and a clear workflow you can create higher quality content. Furthermore, by using semantic elements you can greatly increase your search engine ranking.

Pre HTML 5 Era

Semantic elements have been around since the pre-HTML 5 era. However, the elements were limited and only four main elements were used. Included are time which displayed time in the format that humans could understand. mark which was used to highlight certain text which made it easier for the viewer to see what was important. The head tag was used in every HTML document as it indicated the metadata and design of the website or page. Similarly, body was also included in every HTML document as it displayed the content.

HTML 5 Era

With the introduction of HTML 5, some new semantic elements were added. Included were strong which is used to make text bold; formally this was b. Another addition is em which is used to italicize text; formally this was i. With HTML 5, the ability to section content was introduced with the section tag. If you are wanting your content to be complete or self-contained in a blog style you can use the article tag. With HTML 5, complementary content such as sidebars has been given the tag aside. Navigation has been simplified in the new nav tag, with a more convenient and shortened title, you can quickly create a navigation section on your page. If you are wanting to display your logo, name, date, or meta information you can use the header tag. Similarly, if your wanting to include copyright information, notes or links you can now use the footer tag. With all of these new tags, it can be hard to decide which tag is more appropriate and which one you should use. The below flowchart is a very handy resource to help with picking which tag should be used for what.

HTML 5 Flowchart by HTML5 Doctor

Image Formatting

With HTML websites you can use images, however, they have to be in a 72 DPI resolution as well as in a JPG, PNG or a GIF format. Each format has their own attributes and uses. Below you can see two main images in each format to see if you can see the difference.

Image 1: PNG
Image 1: GIF
Image 1: JPG
Image 2: PNG
Image 2: GIF
Image 2: JPG

In my personal opinion, I notice a small difference with Image 1: GIF. The file sizes of the images are difference from each other, however, there's not a huge difference.

Poll: Vote If You Saw A Difference or Not: Vote on


Donald Louch

I'm a twenty-one-year-old photographer, videographer and graphic designer from Victoria, BC, Canada (now living in Nanaimo). I'm certified in both Digital Communication (DIGCOM) as well as Digital Production Writing and Design (DIPR) through Camosun College and I'm currently attending VIU (Vancouver Island University) for a bachelor degree in Digital Media Studies.