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.
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.
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 DonaldLouch.ca