- Basic knowledge of HTML (Hypertext Markup Language), you can get an overview here.
So, if you got started with HTML(Hypertext Markup Language) 10 years ago, you are most likely used to the non-semantic way of writing HTML.
Semantic HTML simply means the markup code is easy to make sense of while you read through. This style of writing uses more descriptive tags like
<article></article>and others, to show the different parts of your website structure in code.
Before HTML5 came along, HTML documents were a mashup of div and span tags:
<div> </div>: These tags are used to show block level elements ie, each element inside a div tag represents a block of code that can stand alone.
<div> <h4>I am the heading for this section</h4> <p>I am the content for this section</p> </div>
<span> </span>: These tags are used to show inline elements ie, each element inside a span tag represents an inline text or information.
<p>I am an <span>inline element</span></p>
div tags were used to separate different sections of a HTML document while the
span tags were used for inline elements. However, with this new version of HTML ie HTML5, semantic tags were introduced to takeover and create more readable and accessible HTML documents.
*** Sample code***
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>I am the Title of the page</title> </head> <body> <div class="header"> <div class="nav"> <ul id="nav-items"> <li class="nav-links"> <a href="">Home</a> </li> </ul> </div> </div> <div class="main"> <h1>I am a heading</h1> </div> <div class="section"> <!-- a section here --> </div> </body> </html>
divwith class 'header' denotes the header section of the website. This is the part of the website that holds the navigation links (the
divelement with the class of
nav), the hero of the website and all other things in the 'above-the-fold' section of the website.
divwith the class
maindenotes the main section of the website. It is this section that holds the main contents of the website.
*** Sample code***
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>I am the Title of the page</title> </head> <body> <header> <nav> <ul> <li class="nav-links"></li> </ul> </nav> </header> <main> <h1>I am a heading</h1> <section> <p>I am a section title</p> </section> </main> <footer> <p>This is the footer</p> </footer> </body> </html>
headertag denotes the header of the website. It is this section that holds the navigation links in the
maintag holds the main block of your website. Using different
sectiontags, you can separate different sections of your website.
footertag is used to show the footer section of your website.
<main> </main>: This tag specifies the main contents of your HTML document. You would usually add your different
sectiontags to show the different sections of your page.
<header> </header>: This tag shows your readers the topmost part of your website, the introductory section. It typically contains the
navtags for navigation, some
headingtags, your logo or site title.
<nav> </nav>: This tag holds all the links to your navigation. In longform, this tag means 'navigation'.
<section> </section>: The
sectiontag is used to group different standalone sections of your website together. For example, you could have a
sectionlisting all your services, and another
sectionlisting details about your team.
<code> </code>: The
codetag is used to format text to resemble code blocks. Information inside the
codetag will be formatted to mono-space type text.
<map > </map >: The
maptag is used create an image map. In an image map, you can set different parts of the image, using the
areatag, to link to different external or internal pages. See example.
<mark> </mark>: The
marktag is used to highlight text. It has a default colour of yellow, but this can easily be changed using CSS (Cascading Style Sheet).
<detail> </detail>: The
detailtag helps you to create HTML dropdown effect. This is good for when you want to give the user the option of showing or hiding certain pieces of information. It usually contains a
<summary> </summary>: The
summaryis usually contained inside the
detailtag. It works as the heading for the details tag. Content inside this tag is usually seen by your website visitors.
<footer> </footer>: The
footertag is used to define the footer section of your website. Everything inside this tag is usually text or information belonging to the footer section of your page.
In conclusion, HTML5 tags are better to use for the following reasons:
Accessibility: Screen readers and other disability-aid devices have an easier time reading through semantic tags. This is because the devices can read the
headertags as headers, the
maintags as main content e.t.c. This makes your website accessible to a wider range of people and allows accessibility for all.
Readability: Semantic code makes it easier for you, the developer, and your teammates easily read through the codebase and make edits where necessary.
See you next week, I will be writing more on web development and other beginner friendly topics.
PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and see the programming language you should learn first.