# Basic webpage structure

I'm new to HTML coding and have created a basic webpage structure for a basic website with 5 pages.

Can anyone suggest any improvements that could help with the structure, layout and design for the pages?

Code for one of the pages is below (all the same except for the names):

<!DOCTYPE html>
<html lang="en-GB">
<title>Fellows and Fullwood LTD</title>
<meta Charset="utf-8"/>
<body>
<div id="container">
<h1 align="center"><img src="Images/fellows.gif" width="150" height="39" longdesc="Images/fellows.gif"><font size="12">Fellows and Fullwood</font></h1>
</div>
<div id="nav">
<u1><!--
--><li><a href="#">Home</a></li><!--
--><li><a href="#">News</a></li><!--
--><li><a href="#">Careers</a></li><!--
</u1>
</div>
<div id="Main">
<div align="center">
<p>
<input type="hidden" name="action" value="submit"/>
</p>
<input name="name" type="text" value="" size="30"/>
<br />
<input name="email" type="text" value="" size="30"/>
<textarea name="message" rows="7" cols="30"> </textarea>
<br /><input type="submit" value="Send email"/>
</p>
</div>
</form>

<p>lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here lots and lots of text here
</p>
</div>
<div id="Sidebar">
<h2>Sidebar</h2>
<u1>
<li><a href="#">Home</a>                  </li>
<br></br>
<br></br>
<li><a href="#">News</a></li>
<br></br>
<li><a href="#">Careers</a></li>
<br></br>
<br></br>
</u1>
</div>
<div id="Footer">
</div>
</div>
</body>


-
Use Lorem Ipsum instead of lots and lots of text. ;) –  voidHead Apr 29 '14 at 23:59

      <div id="Header">


HTML 5 introduces the <header> element.

          <h1 align="center">


Don't use presentational attributes, like align, use CSS.

          <img src="Images/fellows.gif" width="150" height="39" longdesc="Images/fellows.gif">


The alt attribute is mandatory. If the text that follows it duplicates the information in the image, then use alt="".

The longdesc attribute has been removed from HTML 5. In HTML 4 it should point to an HTML document that describes the image (for people who cannot see it), not the image itself.

          <font size="12">Fellows and Fullwood</font>


The <font> element is obsolete and should not be used (and I'm pretty sure 12 isn't a valid size for it anyway). Use CSS.

          </h1>
</div>
<div id="nav">


HTML 5 introduces the <nav> element.

          <u1><!--


An Unordered List is ul not u1.

Use a validator.

          --><li><a href="#">Home</a></li><!--
--><li><a href="#">News</a></li><!--
--><li><a href="#">Careers</a></li><!--
</u1>
</div>
<div id="Main">


HTML 5 introduces <main>

        <h2>Contact us</h2><form  action=""


You can omit the action attribute entirely if you want to resolve to the current URI.

         method="POST" enctype="multipart/form-data">
<div align="center">
<p>
<input type="hidden" name="action" value="submit"/>
</p>


Most of the paragraphs in this form at dubious at best but this is just wrong. There is no content for the user at all, and certainly no paragraph.

            <p>Your name:<br>


            <input name="name" type="text" value="" size="30"/>
<br />


In general, prefer container elements and CSS margins/paddings to hard line breaks. <br> is most useful when line breaks are a significant part of content which is otherwise continuous (such as street addresses or poetry).

      <div id="Footer">
</div>


HTML 5 introduces the <footer> element.

-

For later you can always visit this site for help : http://validator.w3.org/check

Here are the errors I found by pasting your code into the validator:

1. The align attribute on the h1 element is obsolete. Use CSS instead. It is better to separate content from style.
2. An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
3. The font element is obsolete: again use css.
4. Element u1 not allowed as child of element div in this. You really don't need that div :)
5. Using </br> is wrong: it doesn't have a closing tag use this instead : <br/>
-

I say you are using <Head>..</Head> and <body>..</body> that is not very consistent. I suggest you replace it with just lower-case letters, so: <head>..</head>.

Another tip: if you want dummy text have a look on Google for "Lorem ipsum"

-
Same goes for the IDs. –  nyuszika7h Apr 29 '14 at 19:29