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
!DOCTYPEto</html>whole is content flow.
How?!DOCTYPEtells the machine (browser) that this document is HTML5 supported document so render it accordingly.
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
- Pakistan's geography
- routes
- weather
- population
- culture etc
- Pakistan's Politics
- Government
- Foriegn Policy
- Oppositon
- 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:
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
just focus on content that tells us about the website.
Now we are going to open this site and after website looks like this
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
then page source will look like this
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?
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
follow me on Twitter I usually updates about Web-development
Fahad Khan
Top comments (0)