HTML - HTML Page Layout [LESSON]

HTML Page Layout

HTML Layouts

When planning a website, one of the most important things you need to do is determine the layout of the page. There are many layout designs that you can find online.  You can use tables to layout pages, this used to be very common, but isn’t as common now. The advantage of tables is to be able to place your elements where you want them on the page. See the example below:

Use the HTML Table Layout activity below to learn more about the different parts.

Another way of creating a layout is using <div> tags. These elements are similar to text boxes and you can use CSS to place them where you want them on the page, you can style them with color and fonts. This is the most common way to create HTML layouts. The <div> stands for division and is used for sections or blocks in an HTML document. These can also be manipulated using JavaScript.

HTML has several semantic elements; these are used to define the parts of the page layout. It is important to understand the HTML layout semantic elements and use them appropriately in your web pages.

Complete the Semantic Layout by dragging the element to the correct description, click the Begin button to start.

Learning Object Transcript Links to an external site.

Other Layouts

There are many other layouts that we won’t go into in this course. However, you can find them online. Layouts are constantly being developed, so it is a good idea to search for some of the newer layouts if you want to have an unusual page. CSS layouts and grid layouts are very popular as well. There are a lot of layouts available on the W3Schools website.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION