Using a grid structure with content inside grid elements can be beneficial in the layout of an html page. This is called grid based design. The simplest form of grid based design is with a table where elements line up neatly in columns and rows.
If there are many different sized areas, the flex model can be used. In a flex-box, columns and rows can be different in size, and will be layed out one after another (often on top of each other). This model can be used to have a bunch of rows, with columns inside them of different widths.
With people browsing the internet more on tablets and mobile phones than ever before, web developers are faced with the challenge of designing a webpage to suit various screen sizes.
Responsive webpages can solve this issue. They allow a developer to change the layout of a page based on the size of viewers screen (in pixels).
When writing an HTML page, using elements for their intended purpose is good semantic structure. This means using <header>...</header> for a section is introducing the section below. Basically, the tag being used should reflect the type of content that is to follow.
It's possible to reset the CSS across all browsers and then work on a level playing field, with less fear that your page will look different on the different browsers.