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.)
