How To Use HTML Semantics like a HERO

Content

1. Introduction :

What is Semantics?
Our similar experience in HTML

2. List of Sematic elements

How to use semantics elements examples.

3. Where can I start?

Well...? right here with this article.

4.Fast ways of learning HTML...if any?

Coding Partner
Practice by cloning sites

5. Words of encouragement

(Gaining Semantic Super Powers photo by Ali-Unsplashed)

1. Introduction

a. What is Semantic?

Can you take a wild guess? I know its still a little bit hard to remember all this information as a beginner, after seeing your first code. So the easier way to remember is mostly by doing it and keeping notes. So Semantic elements are tags that tell you a story about what that element is about to do or what it is used for. Lets take a look shall we:

<form>
    <!--THIS FORM WILL GET OR COLLECT USER INPUT.-->
</form>

So the first thing that stands out here is... ooh he is about to create a form. In this case we will create a login form using the

<form>

tag. And just like that the tag

<form>

is descriptive enough not just to you but others as well to let them know what you are about to do(its also important that other developers are able to identify with your code). So the story is told just by

<form>

. Note: the

<!-----..>

is a way we comment in HTML, so that line will be ignored. Another type of semantic element:

<form>
     <section class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </section>
</form>

So a

<section>

is another but not the last type of semantic element. A section means that any content inside of it is grouped. So I hope by now you get an idea of how to use semantic, where to use semanntic and why do you need to use semantic by just these two examples above. Lets continue...

b. Our similar experience in HTML

Yeap I have crazy experiences with programming. When I started learning programming or coding some might call it, I was nervous like many beginners would. I didn't know what I was getting my self in to, until I saw a complete code for the first time in particular HTML, and I was like hmm... help? It blew my mind for a second and got me excited at the same time. so here was my famous semantic code at least I thought it was semantic when I started coding, expressed in one line:

<div>
<!-----LINE(S) OF CODE--->
</div>

I am not kidding, this was literally the only tag I used in HTML, come on...I was excited,

<div>

got me excited. What I didn't know was what semantic means and why is it important. By the way

<div>

are not semantic elements so as

<span>

. So what am I saying? Don't ever make

<div>

your only best friend, he will deceive you of his awesomeness and when you look for him in your code, you will not find him, he is gone be careful of just using

<div>

only, you might just loose your super powers. Any way I digress. Lets continue...

So my advice is have fun with code, keep notes as you are coding, its important. I to made the mistake not keeping notes and of not reaching out to software communities, don't make that mistake, Well all of that has changed now, I reach out more, plan better, always take notes of what i can improve and how I can improve it. so here's one community l enjoy : Click here to visit: Stack Overflow

To all the beginners reading this, make sure you type your code manually, that helps with that information registering to your brain, its like the more you type on the keyboard the faster your typing gets. So that is my brief experience with HTML, there's a lot more but we will cover those in the next articles.

2. List of Semantic Elements

So here is what you have been waiting for, a list of Semantic elements:

<article>
<aside>
<details>
<footer>
<figure>
<main>
<mark>
<figcaption>
<nav>
<figure>
<section>
<form>
<time>
<summary>
<header>
<table>

So these are some of the new semantic elements, note: this list mentions some and not all semantic elements.

a. How to use semantic elements

So here we will be briefly taking a look at some elements and how to use them for your code to appear more professional and clean by using semantic elements. Think of semantic elements as organizers.

2.1 <article>

<!--Used in blogs, forum posts and magazines or news paper articles.-->

</article>

<article>
  <h1>USING AN ARTICLE</h1>
  <p>I am learning about article elements and what they do, this is interesting</p>
</article>

2.2 <nav>

<!---Are used to define a block of navigation lists-->

</nav>

<nav>
  <a href="">Home</a> |
  <a href="">Blog</a> |
  <a href="">About</a> |
  <a href="">Contact</a>
</nav>

2.3 <footer>

<!---This element contains navigation, authorship information, copyright-->

</footer>

<footer>
  <p>Published by: Richard Phala</p>
  <p>Contact information: <a href="phalarichard1@gmail.com">Richard Phala</a>.</p>
</footer>

The footer is by far everyone's favorite tag, cause it can only mean one thing, you have reached the end of designing your code. I mean who does not like finishing their program? So I hope with these 3 examples you get the picture. So for your task you can go ahead and research about the remaining tags, check out the link: Click here for more ---> More_Semantics

3. Where can I start?

So you are now asking, But where can I start. I have also raised this question several times, well you are in luck because there are awesome links that will help you with the layout of your design, sectioning and will take deeper in the sematic topic, Please consider taking a look at these awesome free coding platforms that helped me and are still helping me with organizing my code.

4. Fast ways of learning HTML

So this is the question that everyone has and wishes that for clarity. Well Let me contribute to this sub topic. I believe anything in life, there is not a fast way in learning it. What is fast any way when it comes to learning a new skill? I always use these points that help me learn in a paced manor:

Make sure it is what you want to do
Plan for every project and learning
Be patient when learning a new skill
Invest your time learning
Be consistent
Code. learn. code. learn
Have fun

a. Code Partner

When I started I was doing solo coding, I was still trying to figure out what programming is all about, to some extant this method can take you up until a certain level in your coding skills. But I now have the privilege of having a coding partner and here are the benefits and ways on how you will learn faster/ paced:

Having a coding team - reviewing code.
Talking about your code with the team
coding with a partner, and explaining what you are doing
Making mistakes and debugging together
Making and thinking about suggestions

And here is the link you can visit to start learning with a coding partner, team and a larger community: https://www.microverse.org/?grsf=166cdq

b. Practice by cloning

“

You don't learn to walk by following rules. You learn by doing, and by falling over.”
― Richard Branson

One of the greatest methods of learning is doing. I have several projects cloned from original sites and all the code was not copied but managed to adopt the same layout. The code might not be the same word for word but the layout and function meets the requirements, So my advice is START CLONING, make those mistake, correct them, ask for help and just like that you become a Sematic Hero for using HTML and a Programmer.

5. Words of encouragement

You are good enough, you are capable, you are smart and you have what it take to become the best at what you do. You just have to be willing to step in and start enjoying it. When I started i made mistakes and was frustrated but one thing I didn't allow myself to do was to give up or entertain the thoughts of giving up. YOU GOT THIS!!!!!!