Hello guys, this is a tutorial on how to group contents together on your Html document, this grouping is done by Html <div> and <span> elements.
The <div> and <span> elements allows you group together several Html elements to create sections or subsections of a page.
For example, you might want to put all of the headers on the page within a <div> element to indicate that all of the elements within that <div> element are related to the headers. You might then attach a style to this <div> element so they display using a special set of style rules.
You can also read our tutorial post on: Html Formating
I will drop an example below so you get a clearer understanding of what am talking about.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example<title>
</head>
<body>
<div id="nav bar" align="right" >
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#">Advertise</a>
</div>
<div id="main" align="middle" styles="background-color:blue" >
<h4>This is the page main content</h4>
<p>Hello world,am a programmer</p>
</div>
</body>
</html>
<html>
<head>
<title>Div Tag Example<title>
</head>
<body>
<div id="nav bar" align="right" >
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#">Advertise</a>
</div>
<div id="main" align="middle" styles="background-color:blue" >
<h4>This is the page main content</h4>
<p>Hello world,am a programmer</p>
</div>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding and dont forget to drop your questions, i will attend to them as soon as possible.
<div> element will be treated in detailes in future tutorials and that will be when i drop my tutorial on layout because <div> element is used for designing a web page layout, now lets move to <span> element.
Span Element
The <span> element, on the other hand, can be used to group inline elements, so if you have a part of a sentence or paragragh you would want to group together, you make use of the <span> elements for that. Example goes below
You can also read our tutorial post on: Html Tags
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example<title>
</head>
<body>
<p>This is an example of <span style="color: red">span tag</span> along with css</p>
</body>
</html>
<html>
<head>
<title>Span Tag Example<title>
</head>
<body>
<p>This is an example of <span style="color: red">span tag</span> along with css</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the Html Phrase Tags.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.