HTML Content Flow: A Learning Journey to Web Development
As we create lots and lots of elements in our document, HTML defines how those elements are rendered and organized on a web page. It determines which element comes before another one, which one sits on top of another one etc. These rules that control the flow of content is called the HTML content flow. Let’s take a deeper look.
N.B. This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
Order of HTML element
HTML follows a sequential method of content ordering. Which means, the element that comes first in the HTML code document also appear first on the web page. The next comes next. And depending on the level of HTML elements, they sit one after another. In case of inline-level element, they sit within block-level element if they are declared within a block-level element.
For example, take a look at this HTML code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Content Flow</title>
<style type="text/css">
p {
background-color: lime;
}
</style>
</head>
<body>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph <strong>Three</strong></p>
<p>Paragraph Four</p>
<p>Paragraph <a href="#">Five</a></p>
</body>
</html>Output:
Here, all the paragraphs appeared according to the order they show up in our code. And since paragraphs are block level element, they are displayed one after another and all the inline elements stayed within them.
Positioning of Elements
The content flow of HTML has a lot to do with the positioning of elements. As we know from the nature of block-level elements, they take up all the available horizontal space. They are fluid by default. Which means, if the screen size changes, these element changes their size too!
The content (usually text) starts to warp inside to fit within the element’s box. The height of the element adjusts automatically according to the needs of the content and all other element sitting after the prior element goes further down. Sound like responsive layout, right? Well, it is!
HTML is naturally responsive. If you don’t need multiple column layouts on your web page, your page is almost responsive by default!
Stacking Order
HTML supports nesting of tags. When a tag is nested inside another, it sits on top of its parent. So, if you have several elements nested inside a parent element, the innermost element appears on top of all other outer elements, and the grand most parent sits at the bottom. Let’s see a demo!
<!DOCTYPE html>
<html>
<head>
<title>Stacking</title>
<style type="text/css">
.grandpa {
width: 400px;
height: 400px;
background-color: hotpink;
}
.papa {
width: 300px;
height: 300px;
background-color: navy;
}
.son {
width: 200px;
height: 200px;
background-color: blue;
}
p{
color: white;
}
</style>
</head>
<body>
<div class="grandpa">
<div class="papa">
<div class="son">
<p>On the top of the world!</p>
</div>
</div>
</div>
</body>
</html>Output:
Notice how the outer div sits at back, and the inner div sits on top. The innermost element, the paragraph sits on top of every other parent element.
Overriding the HTML Content Flow
Since we try to design every single web page uniquely, it’s almost obvious that we need to place element differently than this default content flow. In that case, we can override these rules of HTML content flow using various CSS properties.
For manipulating the positioning of elements, CSS offers us the position property through which we can take any element out of the natural HTML content flow and position it manually. We also have the float property to alter the positioning of certain elements. And for changing the stack order, we have the z-index property.
Conclusion
It’s necessary to understand HTML content flow in order to have complete control over elements position when positioning them with CSS. Creating useful and appealing layout mostly depends on positioning the elements in right place.
Next, we’ll discuss various CSS positioning property in details to learn how we can place any element in any position. Until then, keep mistaking and I’ll see you soon!
