How To Create A Website Using Div Tags In Html

Download Article

If you have a site, then exploring its design by using CSS and div tags can take you and your website business one step ahead. Easy maintenance, faster loading and search engine friendly features shall give you benefits of better marketing strategy.

Steps Download Article

1

Know that the 'div' tag is basically utilized to establish separate areas or divisions of the website page. This is amongst the extremely powerful elements in "XHTML" since it is necessary for placing the design of web page using "CSS". In simple words, this process means implementing sites devoid of making use of tables for layout and positioning.
2
Create a Stylesheet - 'Div' tags use style sheets which allow the web design of the site to be independent of data. Designing backgrounds with colors and fonts, width, height, layout, and positioning of rows or columns can all be inserted into style sheets leaving only div code and information on actual pages.
- You can create stylesheet as another document and then link it. Open a new notepad document, write your code it in and save it under the ".css" extension.
- The CSS properties which very useful are "background-color", "height", "width", "float" and "clear".
3

Link the Stylesheet - You can link stylesheet using link tag. This should be used in the "head " section of your website. e.g. <link rel=stylesheet type=text/CSS href= path>. you should write the path to your CSS file in the place where "path" is written in this example.

{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/Design-a-Simple-Web-Page-in-Div-Step-2-Version-2.jpg\/v4-460px-Design-a-Simple-Web-Page-in-Div-Step-2-Version-2.jpg","bigUrl":"\/images\/thumb\/2\/2f\/Design-a-Simple-Web-Page-in-Div-Step-2-Version-2.jpg\/aid717211-v4-728px-Design-a-Simple-Web-Page-in-Div-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}

1
Understand the benefits of making use of div tags or table-less:
- Loading of sites become faster. Websites that are based on 'div' tags render browsers to run much faster as they come in a very lightweight. 'Div' is controlled through Cascading style sheets and therefore, needs less coding that helps in keeping the file size to the minimal.
- 'Div' is friendly to all search engines – CSS based websites are search engine optimization friendly as these enable the web designer to keep main articles on top allowing search engines to find main contents more easily.
- A 'div' tag based website saves bandwidth. A table-less website has smaller file size, which means that it saves your bandwidth. If you have a huge traffic site, where each page is browsed by the site visitors, you shall save on the bandwidth size by not having tables. This saved bandwidth amount could be useful over a time period or at the end of the month.
- Cleaner Code – The websites using 'div' tags and CSS generates cleaner code. This cleaner code permits crawlers of search engines to read the actual content.

Add New Question

Question

How do I use the div tags to divide a page?

Nicole Futoryansky

Community Answer

You can use the div tags in the same way. If you don't want them to influence the CSS, then don't use them as selectors and no one should be able to tell that they are even there.
Question

How do I design a simple web page?

There is a hard way and and easy way. The hard way is using html,css, javascript. The easy way is using wordpress, or dreamweaver and the easiest way is to use and online based service that charge money but help you make your web pages.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

A site based on div tags are quite easy to maintain as the layout is controlled by a single file. Doing alteration on a single file reflects changes on all pages of a site where the CSS has been put to use.

Thanks for submitting a tip for review!

About This Article

Thanks to all authors for creating a page that has been read 39,598 times.

Is this article up to date?