All geek questions in one place

Proper structuring for HTML

I read about best practices for website design. But I'm still interested, because the answers found are mostly different, depending on the area of ​​the project and many other considerations.

But just to shorten it, I basically wanted to ask about the proper formatting for the 3 main elements on the website.

  • Headline
  • Home / Body
  • Footer

How should the structure be built? These three should be wrapped in a container as follows:

<div class="wrap"> <div class="header"></div> <div class="body"></div> <div class="footer"></div> </div>

And what should the style look like? I saw some people advising using a position: absolute for CSS, while some others use relative instead. Sorry for the simplest question, but I'm really confused by this at this current point of my training.

+6
source share
5 answers

HTML Example 5. Now the best daytime width is .content{ width:960px }

 <!-- Outer Div --> <div id="content"> <!-- Inner Content --> <div id="content-inner"> <!-- header --> <header> <div class="header"> <div id="header_wrapper"></div> </div> </header> <!-- body --> <div id="content-body"> <section></section> <section></section> </div> </div> <!-- footer --> <footer> <div class="footer"> <div id="footer_wrapper"></div> </div> </footer> </div>
+1
source

The only reason a pseudo standard exists, such as having a large number of wrappers, is because it is useful in creating layouts. In principle, all this for some reason. If you can design the page you want without having <div id="mainwrapper"> around it, then you don’t need the main wrapper. :)

My advice would be to just start building the site and try to make it look the way you want using simple CSS elements and styles. If you cannot make it work - for example, you don’t understand how to create a layout of column columns, then just search on the Internet for something like “layout of HTML columns” and from there.

Edit: Doing work usually means no need to use tables, lots of magic numbers and lots of elements to create something simple.

Rule of thumb: do not cut or paste code / solutions unless you understand 1) what they do 2) why you need them. It’s better to try to create it yourself, and then, when you work with it, understand why some templates (clearfix, avoiding tables, floating layouts, etc.) are so common. It may not save you time right now, but it will definitely make you a better developer in the long run.

+4
source

HTML layouts are very subjective and depend on your requirements / preferences as a developer. Two main layouts: Static (using absolute positioning, etc.) and floating (using floating divs for liquid layout).

This is a good article that describes these principles in more detail .

Basically, you should use block level elements, i.e. div tags to structure your page. In cases where you have tabular table data, everything is fine, but do not use it for your layout, as it is slow to render and can complicate the job when you need full control over the page layout.

Best styling practice allows you to use CSS to position and style your elements using class attributes rather than inline ones. This will allow you to minimize your CSS scripts and reduce the overhead on your page. CSS has evolved very well, and many selectors are available to reduce the number of classes in your markup. For more information about them, see the CSS selector in W3C .

+2
source

When writing HMTL, you must remember the readability of the markup and the ease with which it can be changed in the future.

Try and consider the separation of problems . Which parts of your site are structurally related to others and which are independent of others. Try to combine element-dependent elements (using div, etc.) and do not separate unrelated ones.

Try and structure your CSS in a similar way if the position of two elements depends on the other, but the other does not, group related elements under one class, and then use inheritance to structure the differences. where, since unrelated should probably be in a separate css class in general.

Also try structuring your CSS so that it can be reused.

A bit of common points, but hopefully this helps?

+1
source

Source: https://habr.com/ru/post/921760/

More articles:


All Articles