Div codes with html

. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.

The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.

Источник

How To Use a , the HTML Content Division Element

The HTML Content Division element ( ) acts as a container to structure a webpage into separate components for individual styling. This tutorial will teach you how to create and style containers on your webpage.

On its own, the element has little effect on the layout of the page and is usually given attributes to adjust its size, color, position, or other features. Typically, developers style elements with CSS, but this tutorial will give you an understanding of how elements work by styling them directly in an HTML document.

The element is styled with the HTML style attribute. As demonstrated in the example below, a element can contain multiple style properties:

div style=”property: value; property: value;”>div> 

Notice that the element has opening and closing tags but does not require any content. To understand how the element works in practice, clear your index.html file and paste the code below inside. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

div style="width:300px;height:200px; background-color:red;"> div> 

Save the file and reload it in the browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive a red box with a width of 300 pixels and a height of 200 pixels like this:

You can also add content to a element by adding content in between the opening and closing tags. Try adding text in between your tags like so:

div style="width:300px;height:300px; background-color:red;"> This is text inside a div. div> 

Save the file and reload it in the browser. You should receive something like this:

You can also put containers inside containers. Try adding a yellow container inside the red container like so:

div style="width:300px;height:300px; background-color:red;"> div style="width:100px;height:100px; background-color:yellow;"> div> div> 

Save the file and reload it in the browser. You should receive something like this:

Note that elements are block-level elements and will start on their own line and push subsequent elements down to the next line. Try adding another element to your file to understand how it is pushed down to the next line (even though there appears to be enough space for it to fit next to the second element:

div style="width:300px;height:300px;background-color:red;"> div style="width:100px;height:100px; background-color:yellow;"> div> div> div style="width:100px;height:100px; background-color:blue;"> div> 

Save the file and reload it in the browser. You should receive something like this:

You should now have a basic understanding of how elements work. We will return to elements when we begin building our website in the third section of this tutorial series.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

Источник