HTML5 structure | My story of learning to CODE ( 1000h journey )

HTML and browsers are very forgiving regarding HTML structure. There will be no error even if there is no <head> tags etc.

It can be written in <TABLE> or <table>, it dosen’t matter. But there is correct way to structure it and write it. If you write it the correct way it will pay it of later. And even if u don’t use “” e.g like here <INPUT TYPE=SUMBIT VALUE=Save> even then HTML will understand you, but it would be better to write it the correct way.

Correct order is

<!DOCTYPE html>  <!-- tells the browser that this page is HTML5  -->

<html lang="en"> <!-- languages the page is written in. In case of Japanese it must be <html lang="ja"> not "JPN or JP"  -->

and after these two ROWS of code it will be followed by the <head> section. HEAD section includes metatags and links to CSS or <style> tags for internal CSS.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

Inside the <HEAD> tags, right below <TITLE> tags there must be <LINK> tag for CSS stylesheets. As you can see it’s attribute “rel” says what kind of link it is, it’s rel=”STYLESHEET”.

<link rel="stylesheet" href="">

Try to use SEMANTIC tags in the correct way!!!

Try to follow this ORDER and make a good use of <HEADER>, <MAIN> and <FOOTER> tags.


<body>
    <header>
        <nav></nav>
    </header>

    <main>

    </main>

    <footer>
        
    </footer>
</body>

Don’t use <SECTION> element to divide your page or article into different parts like HERO SECTION etc, but it must be used for DIFFERENT SECTIONS of your post with TITLES (H1 – H6), if no TITLES, then just use a normal DIV

PS! When writing an article OR LandingPage just try different semantic tags and see how GOOGLE indexes it.

<ASIDE> tag is for the following

sidbars
pullquote
Ads
and things SIMILAR

H1 tags can be used multiple times on the same page if used correctly.

HTML5 allows to used multiple <H1> tags on the same page if they are in different <SECTION>. E.g if it’s u blog`s MAIN page with the name of the BLOG <H1>My BLOG</H1> and then under this TITLE there will be a list of titles of other POSTS. In this scenario other posts’ TITLES can also be in <H1> tags.


<section>
    <h1>My BLOG</h1>
</section>

<article>
    <header>
        <h1>My life in TOKYO</h1>
        <p>Short intro to this blog post</p>
    </header>
</article>

<!-- book at p.37 -->

Try to use these SEMANTIC TAGS on some of your LP and see how it goes.

Useful HTML5 tags to know

<hgroup> -> can group HEADING with text <p> etc following it. It’s like a heading with EXPLANATION.
<header> & <footer> -> can be used many times to mark the HEADER section of page or article, including NAV section too
<blockquote> -> it’s used to mark TEXT pulled in from somewhere else.
<figure> and <figcaption> -> used with illustartions etc
<details> and <summary> -> this will create ACORDION component whiteout using JS.
<video> -> tag has now many useful attributes, just check the code below. You can even add THUMBNAILS now for your self-hosted videos.
<img> and <video> have LAZY loading (image will show up only when user scrolls to it) mode <img loading=”lazy”>, how cool is that!

<figure>
        <figcaption>these tags are used to illustration etc</figcaption>
    </figure>

Video tag code


    <video src="" autoplay muted poster="thumbnail.jpeg" controls preload="auto" width="350" id="videoTag"></video>

Can beginners also join?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus saepe nostrum dolore, sunt mollitia fugiat vero, minima ipsum tempora ducimus ea odio cumque eos labore aliquid nisi laborum hic impedit.

How much will this cost per month?

Are all course updated?