HTML Layout System Importance
Published: 2020-11-05 19:23:00

##You will learn about
1.Why layout system is important?
* Content Flow
* Content Relationship
* Real World examples


##Why layout system is important?

HTML is the only way to display the content on web page. No matter how you are displaying the content on web totally it's up to you but the architecture behind it's construction must take the attention of browser while rendering HTML markup. However, CSS takes the job for the styling & positioning the content but not markup relation of HTML content which helps in SEO. Are you getting confuse?

*In Simple HTML tags have not only job of displaying your content on web page but also making relationship content to content*.

Look at code HTML code below 


```
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML layout system</title>

</head>

<body>

    <header>
        <h1>Main Heading of my site & SEO</h1>
    </header>

    <main>

        <article>
            <header>
                <h1>Heading of my article!</h1>
            </header>

            <!-- *** Section-1 *** -->
            <section>
                <img src="abc.abc" alt="abc">
                <blockquote>There was a saying who says!</blockquote>
                <cite>Mr. Unknown</cite>
            </section>

            <!-- *** Section-2 *** -->
            <section>
                <h2>Lorem ipsum dolor sit amet consectetur.</h2>
                <p>Lorem ipsum dolordelectus quideme.</p>
            </section>

        </article>

    </main>

    <footer>

        <h5>Any query?</h5>
        <p>Phone: 0123832</p>
        <address>Hyderabad, Pakistan</address>

    </footer>
</body>
</html>

 ```

If you have noticed on HTML document flow, you will get two important things which are 

##1. Content Flow
##2. Content Relationship


What do you mean by these two terms?

While developing a website many things should be in mind and above two are one of them.
##1. Content Flow

Let's think it by terminology of _content (content is the information and experiences that are directed toward an end-user or audience) & Flow (can have many things which relate to each other for single outcome)_

Now think in development perspective,

content flow means having several things work together for more readability for users as well for the machines for SEO.

Now, see the example of content flow in HTML 
```
<!DOCTYPE html>
<html>

  <head>
    <meta>
    <meta>
    <title></title>
  </head>

  <body>

    <header>
      <img / alt="logo">
      <nav></nav>
    </header>

    <main>

        <article>
          <header></header>
          <section></section>
          <footer></footer>
        </article>

        <aside>
          <section></section>
        </aside>

    </main>

    <footer>
      <h1> <small></small> </h1>
      <address></address>
    </footer>
    
  </body>

</html>
 ``` 
This is the actual content flow of HTML for user & as well for machines (browsers).

> from `!DOCTYPE` to `</html>` whole is content flow.
 How? `!DOCTYPE` tells the machine (browser) that this document is HTML5 supported document so render it accordingly.

![Explain the flow of content in HTML](https://dev-to-uploads.s3.amazonaws.com/i/cplm0vkfd6ss1tpy7k99.png)


Actually, flow tells the browser & the user an understanding manner that how document content is described.
More simple, a college-level essay can have built points & explaining them accordingly. this is the actual flow of documents.


Now come to 
##2. Content Relationship
Once you understand the Content flow then Content Relationship will be pretty easy for you!

Basically, it tells the browsers & the user about the relationship between a document and its content. How?

eg. 
Assume we have to write/represent the content about Pakistan country in written form, how you will organize this content about Pakistan?
In a professional manner, you must have to tell something in an organized way. like we have organized an easy with main and built points.

Essay title

 #Pakitan 

1. Pakistan's geography
  * routes 
  * weather
  * population 
  * culture etc
2. Pakistan's Politics 
  * Government
  * Foriegn Policy
  * Oppositon
3. Pakistan's Economy 
  * GDP growth rate
  * Libilites 
  * Import 
  * Expot 


So, What are these all?
This is the actual relationship between document and their content. However, point 1, 2, 3 are document and content same time and these numeric points are content of main topic which is __Pakistan__ &  built points which are represented by `"*"` these are the content of numeric points.


Real world examples:


![Pakistan goole search](https://dev-to-uploads.s3.amazonaws.com/i/5ngyotj6rpf166reb1hk.png)

Look at the screenshot, inside these boxes, we have each content of each document which helped the machine to search it out for us and now we are taking help of these content to reach out our target. 

You can see that these all content relates to the provided document named __Pakistan__ and search result telling more about Pakistan which relates to it like geography, politics, government etc. Now you know how HTML documents & its content relates to each other.

Did you think from where this content & document have came?
 lets pick one site 

![picked one search result](https://dev-to-uploads.s3.amazonaws.com/i/ly1kw6ua0lphzs4magfo.png)

just focus on content that tells us about the website.
Now we are going to open this site and after website looks like this 

![Pakistan website search result](https://dev-to-uploads.s3.amazonaws.com/i/z1iv2y39ubc7eih7qcxw.png)

This is the interface of the website. which tells the same thing before we have seen on search result.

now right-click on this site and go to  `view page source `

![right-click](https://dev-to-uploads.s3.amazonaws.com/i/41wh8hnx584yse9820sl.png)

then page source will look like this

![page source of website](https://dev-to-uploads.s3.amazonaws.com/i/89pbbtg80b1oir4iudm7.png)

now see the inside highlighted `meta tag` this is the actual content which relates to its document and this is telling to the machine that whenever the client (user) search if it is according to him then give him into the results. 

Did you notice one thing more?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lyf7iiiegps091y94yk.png)

Now you have practical knowledge from where things are coming.

finally an overview of this article,

* How layout system works in the manner of relationship between document and content by semantics tags which are introduced in HTML5

* HMTL tags can help to construct the logical and hierarchy structure 

* How semantic tags making relationships between document and content.

* layout based on semantic tags and good for SEO

In this article, all things are not covered about HTML Layout system but now you have massive knowledge about how browsers & HTML work together as a team for user.

This is the importance of HTML layout system!


__Note: CSS layout system is another thing which only represents the physical layout but not for logical layout of HTML__

For more details, 
[Semantic tag list and their roles](https://html.com/semantic-markup/#:~:text=Findings%20like%20these%20helped%20the%20W3C%20identify%20and,common%20and%20important%20semantic%20elements%20into%20four%20categories%3A)
follow me on Twitter I usually updates about Web-development
[Fahad Khan](https://twitter.com/fahad07_khan)