I'd be starting the Frontend Development Series with this article.
This post was first shared on my blog @ Dillion Megida - Hashnode blog
Before I proceed, I recommend you go through the roadmaps for front-end development - Roadmap - Frontend
The first on the roadmap list is HTML, and the tags are:
- Learn the basics
- Writing Semantic HTML
- Basic SEO
- Accessibility
I would briefly go through the Basics of HTML before SEMANTIC HTML.
HTML is an acronym for Hypertext Markup Language
It is the standard markup language for creating Web pages.
It basically describes your webpage.
It consists of tags that control how contents are to be rendered to the browser. The tags are not displayed on the browser but the formated contents are.
Markup is what HTML tags do to the contents inside of them, e.g a text content which is markup-ed as underlined.
An HTML file is a file containing short-codes and saved with the .html extension. This makes the file to be viewed by browsers. The browser further renders the file and displays the contents as formated by the tags used.
- Note: The browser doesn't display the tags used, but the contents.
HTML is mainly the structure and the producer of contents for a webpage.
A basic HTML file may contain;
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML file</title>
</head>
<body>
<h1>Our program</h1>
</body>
</html>
<!DOCTYPE> defines the type of document. The extra html defines the document as HTML5. This will be useful for the browser to render it adequately.
<html> is the root element of our page.
<head> contains meta informations relating to our page. They are not visible in the webpage
<title> element assigns the title of our webpage. You find them at the label of your browser tabs.
<body> contains the things that will be visible in our page
<h1> defines a large heading of text - 'Our program'
HTML Tags
They are element names inserted between less than - < and greater than - >.
They usually come in pairs. In our program, we notice <h1>Our program</h1>.
The <h1> tag comes in pairs here as it also has </h1>. They are referred to as opening tag and closing tag.
The closing tag has a forward slash before the element to indicate 'closing'.
There are also tags that don't come in pairs, e.g<img>tag used for inserting images does not require a closing tag.
This article contains a lot of information about HTML which cannot be placed in this article.
Please go through it before continuing this article (if you do not have any prior knowledge of HTML)
If you go through the article well enough, you should see a thing or two about Semantic HTML.
Writing Semantic HTML
Semantic HTML is HTML that gives meaning to the web page rather than just a presentation.
What do I mean?
Rather than just aiming to present the visuals (which may be attractive also), descriptive meanings are attached to the page.
By adding semantic tags to your document, you provide additional information about that document and this aids in communication. They make it clear to the browser what the meaning of a page and it's contents is.
This clarity is also communicated with search engines thereby increasing SEO.
Semantic Elements
These are elements with meaning.
Examples are <code>, <em>, <blockquote>, e.t.c
HTML5 offers new semantic elements that add meaning to a page.
They include:
<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
I am not going to be explaining each in detail, but we'll be looking at a few.
Before the introduction of these new semantic tags, most developers would do something like this;
...
<div class='navbar'>
...
</div>
<div class='content'>
...
<div class='article-section'>
....
</div>
...
</div>
...
With adequate stylings, you'd achieve the actual presentation you want. But then, no much meaning to your page.
With these new semantic elements, our code above can be transformed to,
...
<nav>
...
</nav>
<main>
....
<section>
....
</section>
...
</main>
...
The div tag is just a container that divides the pages into sections. That's all.
But with <nav> and <main> tag as used above, we can already predict what such sections will contain.
N.B: You can choose to add classes, but at least, those sections now have meanings.
Like I mentioned above, these tags also aid faster SEO (Search Engine Optimization) as the page is well described.
That's all in this section. You can read more here. Stay tuned for the second section.
Thank you : )
Oldest comments (0)