LEARN HOW TO MAKE A WEBSITE USING HTML AND CSS: PART 4

in this chapter, we will see the most important elements in HTML, we will learn what is a div and a span, and why they are important and finally how to create a div and a span in HTML.

I-Div element 

to explain this as simple as possible, div and span are containers that contain a lot of HTML elements, they are like a box where you can put as much as you want of HTML elements, we use them regularly because they help us to style élement using CSS.

I will give you an example that will illustrate what is their utility.

imagine that you want to create an article post link, some modern websites use a card that contains different information about the post like the title, the image cover, the description and too many information, to create that kind of card it's simple, the card is a div and the different information are the HTML element that we will add to that div. and this is an example:

<div class="card" style="border: 1px solid black;width: 300px;">

 <img width="300" src="https://images.unsplash.com/photo-1527666466760-f6a7a2b31176?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
 <h1>blog post title</h1>
 <p>this is a little description of the blog post</p>

</div>

and this is the result of the work :

for this example to show better the div I use a style property, I will not explain that property now, we will see it in details in the style chapter that we will see soon, but for now, we just added a border to the div and given to it a width of 300px and that's it.
that's is a simple introduction of the div element all that you need to know is a div is like a box where we can put so many kinds of elements, we can create many elements with it and it will make styling easier 

II-Span element 

span element are not so important like div, they have the same definition except that span is an inline element, that's mean we can't add images or paragraph inside a span, but text, that are more used to style text like creating a floating letter in paragraph or coloring a specific word or sentence inside a paragraph. you will see too many details about divs and span in the next chapter that will speak about styling, we will see how to add colors, borders, and dimension to our element.

That's all about divs and span, as I said we will see more details about them in the next chapters.

I hope that this tutorial helped you to understand the basics of HTML. and by the end of this full training you will be able to create a complete web page using HTML and CSS, so see you in the next chapter.