H T M L Layout

Web page layout is an essential part of creating well-formed, well-structured, semantically-rich websites.

Creating Website Layouts

Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give appealing look to the website. You can find, most of the websites on the internet have put their content in multiple rows and columns — formatted like a magazine or newspaper, to give general web users a better reading and writing environment. This can be easily achieved by using the <table>, <div> or <span> tags and adding some styles to them.

HTML Layout Using Tables

Tables are the simplest method for creating layouts in HTML. Generally, this involves the process of putting the content into rows and columns. The following HTML layout is achieved using a table with 3 rows and 2 columns — the first and last row spans both columns using the colspan attribute:

Example

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
    <meta charset="UTF-8">
```
```
    <title>HTML Table Layout</title>
```
```
</head>
```
```
<body style="margin:0px;">
```

    <table cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-serif; width:100%;">

```
        <tr>
```

            <td colspan="2" style="background-color:#679BB7;">

                <h1 style="font-size:18px; margin:10px 0;">MYHTML</h1>

```
            </td>
```
```
        </tr>
```
```
        <tr style="height:170px;">
```

            <td style="background-color:#bbd2df; width:20%; vertical-align:top;">

                <ul style="list-style:none; padding:0px; margin:0px;">

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Home</a></li>

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">About</a></li>

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Contact</a></li>

```
                </ul>
```
```
            </td>
```

            <td style="background-color:#f0f0f0; width:80%; vertical-align:top;">

                <h2 style="font-size:16px; margin:0px;">Welcome to our site</h2>

                <p>Here you will learn to create websites...</p>

```
            </td>
```
```
        </tr>
```
```
        <tr>
```

            <td colspan="2" style="background-color:#679BB7;">

                <p style="text-align:center; margin:5px;">copyright &copy; myyhtml.mywebcommunity.org</p>

```
            </td>
```
```
        </tr>
```
```
    </table>
```
```
</body>
```
```
</html>
```

— The HTML code above will produce the following output:

HTML Table Layout

MYHTML

Welcome to our site

Here you will learn to create websites...

Warning:The method used for creating layout in the above example is not wrong, but it's not recommended. Avoid tables and inline styles for creating layout.

HTML Layouts Using Div and Span

The HTML <div> (stands for division) element is used for marking out a block of content, or set of other elements inside an HTML document. It can contain further div element if required, but it cannot be contained within an inline element. The <span> element on the other hand is used for marking out sections within a block element or other inline elements.

The following example uses the div elements to create a multiple column layout, producing the same result as in the previous example that uses tables:

Example

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
    <meta charset="UTF-8">
```
```
    <title>HTML Table Layout</title>
```
```
</head>
```
```
<body style="margin:0px;">
```

    <table cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-serif; width:100%;">

```
        <tr>
```

            <td colspan="2" style="background-color:#679BB7;">

                <h1 style="font-size:18px; margin:10px 0;">MYHTML</h1>

```
            </td>
```
```
        </tr>
```
```
        <tr style="height:170px;">
```

            <td style="background-color:#bbd2df; width:20%; vertical-align:top;">

                <ul style="list-style:none; padding:0px; margin:0px;">

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Home</a></li>

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">About</a></li>

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Contact</a></li>

```
                </ul>
```
```
            </td>
```

            <td style="background-color:#f0f0f0; width:80%; vertical-align:top;">

                <h2 style="font-size:16px; margin:0px;">Welcome to our site</h2>

                <p>Here you will learn to create websites...</p>

```
            </td>
```
```
        </tr>
```
```
        <tr>
```

            <td colspan="2" style="background-color:#679BB7;">

                <p style="text-align:center; margin:5px;">copyright &copy; myyhtml.mywebcommunity.org</p>

```
            </td>
```
```
        </tr>
```
```
    </table>
```
```
</body>
```
```
</html>
```

— The HTML code above will produce the same output as the previous example:

HTML Table Layout

MYHTML

Welcome to our site

Here you will learn to create websites...

Tip:Better layouts can be created by using DIV, SPAN and CSS. You can change the layout of all the pages of your website by just editing a CSS file.

Creating Website Layouts Using HTML5 Structural Elements

HTML5 has introduced new structural elements like <header>, <footer>, <nav>, <section> etc. to define different parts of the web pages in a more semantic way. You can consider these elements as a replacement for commonly used classes such as .header, .footer, .nav, .section etc. The following example uses the new HTML5 structural elements to create the same web page layout what we have created in the previous examples.

Example

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
    <meta charset="UTF-8">
```
```
    <title>HTML Table Layout</title>
```
```
</head>
```
```
<body style="margin:0px;">
```

    <table cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-serif; width:100%;">

```
        <tr>
```

            <td colspan="2" style="background-color:#679BB7;">

                <h1 style="font-size:18px; margin:10px 0;">MYHTML</h1>

```
            </td>
```
```
        </tr>
```
```
        <tr style="height:170px;">
```

            <td style="background-color:#bbd2df; width:20%; vertical-align:top;">

                <ul style="list-style:none; padding:0px; margin:0px;">

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Home</a></li>

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">About</a></li>

                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Contact</a></li>

```
                </ul>
```
```
            </td>
```

            <td style="background-color:#f0f0f0; width:80%; vertical-align:top;">

                <h2 style="font-size:16px; margin:0px;">Welcome to our site</h2>

                <p>Here you will learn to create websites...</p>

```
            </td>
```
```
        </tr>
```
```
        <tr>
```

            <td colspan="2" style="background-color:#679BB7;">

                <p style="text-align:center; margin:5px;">copyright &copy; myyhtml.mywebcommunity.org</p>

```
            </td>
```
```
        </tr>
```
```
    </table>
```
```
</body>
```
```
</html>
```

HTML Table Layout

MYHTML

Welcome to our site

Here you will learn to create websites...