7
\$\begingroup\$

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">
<Head>
    <title>Fellows and Fullwood LTD</title>
    <meta Charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</Head>
<body>
    <div id="container">
        <div id="Header">
            <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="#">About Us</a></li><!--
            --><li><a href="#">News</a></li><!--
            --><li><a href="#">Careers</a></li><!--
            --><li><a href="#">Contact Us</a></li>
            </u1>
        </div>
        <div id="Main">
          <h2>Contact us</h2><form  action="" method="POST" enctype="multipart/form-data">
            <div align="center">
              <p>
                <input type="hidden" name="action" value="submit"/> 
              </p>
              <p>Your name:<br>
              <input name="name" type="text" value="" size="30"/>
                <br /> 
                Your email:<br>
                <input name="email" type="text" value="" size="30"/>
  <br /> Your message:<br />
                <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>
                <li><a href="#">About Us</a></li>
              <br></br>
                <li><a href="#">News</a></li>
              <br></br>
                <li><a href="#">Careers</a></li>
              <br></br>
                <li><a href="#">Contact Us</a></li>
                <br></br>
          </u1>
        </div>
        <div id="Footer">
            <p>&copy;Copyright Fellows and Fullwood 2014.</p>
        </div>
    </div>
</body>

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Use Lorem Ipsum instead of lots and lots of text. ;) \$\endgroup\$
    – x4nd3r
    Commented Apr 29, 2014 at 23:59

3 Answers 3

Reset to default
15
\$\begingroup\$ 
      <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="#">About Us</a></li><!--
          --><li><a href="#">News</a></li><!--
          --><li><a href="#">Careers</a></li><!--
          --><li><a href="#">Contact Us</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>

Please learn to love labels 

            <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">
          <p>&copy;Copyright Fellows and Fullwood 2014.</p>
      </div>

HTML 5 introduces the <footer> element.

\$\endgroup\$
0
3
\$\begingroup\$

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/>
\$\endgroup\$
3
\$\begingroup\$

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"

\$\endgroup\$
1
  • \$\begingroup\$ Same goes for the IDs. \$\endgroup\$
    – user688
    Commented Apr 29, 2014 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.