Layout and Design with division tag: div

Layout and Design with division tag: div

Now you know what HTML tags are and how they work, it’s time to start thinking about the layout and design of your web page.

So far our HTML elements have been positioned in the same place on our page.

If we want to position our text and images in different places or change the design of our web page, we need to learn some new HTML tags and attributes.

The division (div) opening tag is:

<div> 

and its closing tag:

</div>

The division tag helps us change the layout of a web page by splitting it into sections.

The tag is a useful and time-saving way of grouping HTML elements together.

It works like an invisible container.

When you group together HTML elements between an opening and closing div tag: (like so.)


<div>
Hello World!

By: Bernard Aybout
</div>

I am outside the div tag.

you can ask your browser to make the same changes to all the elements inside the div. (example: “Hello World“, and “By: Bernard Aybout” are inside the div from the sample code snippet above.)

Elements outside the div will be unchanged. (ie: “I am outside the div tag.” is unchanged because it is not grouped within the div from the sample code snippet above.)

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.