# STRUCTURING YOUR HTML AND CSS HTML and CSS are vital languages that accompany web development, using them properly will lead to development of fluid and expressive web pages and using them wrongly leads to disruptive web pages that are difficult to style or implement when applying CSS for styling. Using proper structuring of elements is a good programming practice and in this article I will be explaining the structure of a given code and I will discuss the purpose of different elements used in the code. I will also explain and discuss how CSS can be used to style the given code and improve on it. **HTML STRUCTURE:** We will be working with the following structural HTML code for an ad section of a car dealing web page; ``` <!DOCTYPE HTML> <html> <head> <title>Assignment</title> <meta charset="UTF-8" <meta name="author" content="MP"> <style></style> </head> <body> <header></header> <main> <section> <div id="sedans"> <img src=""> <h1>SEDANS</h1> <p> Choose a sedan for its <br> affordability and excellent<br> fuel economy. Ideal for<br> cruising in the city or on<br> your next road trip. </p> <button>Learn More</button> </div> <div id="suvs"> <img src=""> <h1>SUVS</h1> <p> Take and SUV for its spacious<br> interior, power, and<br> versatility. Perfect for your<br> next family vacation and<br> off-road adventures. </p> <button>Learn More</button> </div> <div id="luxury"> <img src=""> <h1>LUXURY</h1> <p> Cruise in the best car brands<br> without the bloated prices.<br> Enjoy the enhanced comfort<br> of a luxury rental and arrive<br> in style. </p> <button>Learn More</button> </div> </section> </main> </body> </html> ``` From the above code you can see that we have tried to structure the code in a way that will be easy to style. You would also see that I added some semantic elements to help with better positioning and structuring. To better render understanding, I will explain a few of the elements used; `<main></main>:` This is a semantic element that is used to let the browser know that content grouped in this element are the main or important contents of the web page. `<section></section>`:This element is used to partition our web page into different parts to carry different content. This is also a semantic element. `<div></div>:` This is not a semantic element, it is also used to group contents in our web page and allows for grouping without contradiction of the semantic elements. From the code you can see that the divs are used to group content into various parts from large groupings to small or tiny groupings of content. `<style></style>:` The style is the element that holds all the applicable CSS styling that will be applied to our code. **CSS:** Cascading Style Sheet is a language that is used to better style or beautify our HTML code to give it a better display. From the structure of the HTML code above, the structure provides avenue for almost all the contents to be styled individually if we want to. Better structuring makes it possible to apply styling to even the intricate parts of our web page or code. From the HTML code, using CSS we can pick and style the various parts of our code by giving them colors to change their outlook using the color property or using the float to dislodge or reallocate various elements to different sections of our web page. Know that different outcomes can be used by different developers to arrive at a particular outcome; This is the beauty of CSS, the fact that there are several ways to arrive at a particular outlook. CSS is totally responsible for the layouts of web pages and determines where elements will be; moving from their traditional positions to anywhere and how we will want them to be displayed in our browser.