HTML5(NEW ELEMENTS, SEMANTICS, MIGRATION)

#html #webdev #beginners #tutorial

Introduction
To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to 'block'(This is used if you have HTML4 or older versions of HTML in your website).

HTML SEMANTICS

📌I learnt about HTML semantic elements, they clearly describe meaning to both the browser and the developer.

📌Non-semantic elements tell nothing about its content. Such as <div> and <span>.

📌Semantic elements clearly defines its content. Such as <form> and <table>.

Whiles learning about the <section> element, I really wondered if it was necessary to include them in your codes. Because isn't;

<body>
<section>
    <h1> Heading </h1>
    <p> Content </p>
</section>
</body>

THE SAME AS;

<body>
    <h1> Heading </h1>
    <p> Content </p>
</body>

Wouldn't they give off the same results? Or you need to add the <section> to make it look more 'professional'. These are some of the thoughts that goes through my head when I'm learning.

And also i realized on the w3 schools tutorials for HTML, they kept on adding this '... is not supported in IE9 and earlier... or ... is not supported in Safari or IE11 and earlier versions'. As a beginner, does that mean I should also learn those elements 'just in case' or i should just skip them because if they not supported in earlier versions of some web browsers? Then what's the point of
using/learning about them? After all, technology is evolving and developers are always using current stuff for their projects. So is it really that important to pay attention to these outdated elements and what they do? (Maybe I'm just lazy and i am finding ways to skip most of the stuff i have to learn).

📌A <footer> element typically contains the author of the document, copyright information, links to terms of use, etc.
You can have more than one <footer> element in one document.

📌The <nav> element defines a set of navigation links. I remember when i tried to create a navigation link on my coffee website (I use that site to practice all I have learnt), I wanted to use the 'text-align' CSS styling. and my links got bulleted. I was so so frustrated but now I am excited because i can add the navigation links to the site.

📌Not all links of a document should be inside the <nav> element. Basically, it is intended for only major block of navigation links.

STEPS INVOLVED IN MIGRATING FROM HTML4 TO HTML5

Change the doctype to HTML5 doctype; <!DOCTYPE html>
Change the encoding information; <meta charset="utf-8">
Add the HTML5Shiv (A JavaScript workaround that enables styling of HTML elements in versions of Internet Explorer prior to version 9.)

📌I haven't covered JavaScript yet, so i am going to bookmark this and talk about it when i am familiar with JavaScript.

Replace with equal CSS styles for HTML5 semantic elements; if you were styling in CSS with HTML4 i.e

 div#menu ul li {

                          display:inline;
                          margin: 7px;
                       }

will become;


    nav ul il {
        display:inline;
        margin: 7px;
        }

📌And replace the outdated HTML4 elements with the current ones.

CONCLUSION

Almost done with most of the basics under HTML. The next post should hopefully be about CSS. I have added the nav element to my coffee site (new update). Can't wait to get in-depth knowledge on CSS and JavaScript later on! That's all for today😊.