# Roamfree official website

If it is possible, could someone please revise my code to see if any improvements can be made?

<html>
<title>Roamfree - Official Website</title>
<style>
ul {
list-style-type: none;
margin: 25px;
overflow: hidden;
}

li {
float: center;
}

display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: #7A991A;
}
</style>

<body>

<div class="top"> <h1 style="font-size:250%">Welcome to the Roamfree Homepage!</h1> </div>

<div class="main">
Roamfree is a small company that wants to be recognised by the internet and we
decided to make a website to hold ALL our future products, apps and games!
This is a Prototype website (not even alpha) so I need support from
the online community so my coding skills will progress further and this company
will (eventually) grow!</p>

<h1>Relyr</h1>
<p title="Description">Well Relyr is the measuring app that I am currently developing
and it is optimised for iOS 8 and is targeted at the Iphone 5s (sorry Ipad users)
and you press Start then you walk with your Iphone with you and afterwards you press
Stop then using GPS it approximately calculates how far you walked, this is mainly for
architects and builders but perfectionists can also use it as well :)</p>
</div>

<p>So, my first update for this newly founded company as I am VERY happy to have
a opportunity to get some of the profits and of course the fans and supporters as well
and here's to a (hopefully) HUGE future for this company because of the support
and help from you guys.</p></div>
<p style="font-size:100%">Where do you want to go?</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#news">News</a></li>
</ul>
</div>

</body>

</html>

Your HTML seems to be correct, except you do not have a doctype in there, which goes at the top of the document:

Doctype for HTML5:

<!doctype html>


li {
float: center;
}


center is not a possible value for float - only left and right are.

Otherwise, your code has no errors according to the official W3C validators:

Your HTML markup is, however, very difficult to read due to your wild indentation. For example, you have this:

<head>
<style>

...

</style>


Your ending </style> tag should have the same level of indentation as the beginning tag, and I was taught to use 4 spaces as the indentation level. Part of the problem is you are mixing tabs and spaces as your indentation level - only use one.

You also have this:

<div class="main">
Roamfree is a small company that wants to be recognised by the internet and we
decided to make a website to hold ALL our future products, apps and games!
This is a Prototype website (not even alpha) so I need support from
the online community so my coding skills will progress further and this company
will (eventually) grow!</p>

<h1>Relyr</h1>
<p title="Description">Well Relyr is the measuring app that I am currently developing
and it is optimised for iOS 8 and is targeted at the Iphone 5s (sorry Ipad users)
and you press Start then you walk with your Iphone with you and afterwards you press
Stop then using GPS it approximately calculates how far you walked, this is mainly for
architects and builders but perfectionists can also use it as well :)</p>
</div>


Again, the indentation is wild.

Your indentation on the CSS is very good. However, as your webpage grows, you may find it easier to have the CSS in a different file than the HTML and link to it like this:

<link rel="stylesheet" type="text/css" href="Styles.css">


If you have multiple designs for different types of media, such as phones, printers, and regular computers, you can set the media tag like this:

<link rel="stylesheet" type="text/css" href="PrintStyles.css" media="print">

• I had a different CSS page I just didn't show it – Mobal Dec 29 '14 at 22:34
• Plus I took the navigation bar from w3 schools so that is why it has A LOT of code in the style anyway if i have links in the future pages which I will then it would mess the links up so I didn't want that to happen then I spend three hours before I find the problem! – Mobal Dec 29 '14 at 22:37

I prefer two column indent for HTML. Unlike code, you can't say that the indent is too much and abstract part of the markup to a function.

<h1 style="font-size:250%">Welcome to the Roamfree Homepage!</h1>


You should avoid using style attributes on HTML tags. Use CSS instead. If you are having trouble making your style affect just what you want, add an id or class attribute (or both).

For search engine indexing purposes, it's best to have just one h1 tag per page. It can be helpful to give it the same text as you have in the title tag.

There are six levels of headings in HTML, but you are only using one. Usually you want the h1 tag content to describe the whole page. Then you want h2 tags to identify the sections. If you need to break things up further, you can use h3, h4, h5, and h6.

<div class="top">
<div class="left">
<div class="right">


Try to avoid naming things in the markup (HTML) by where they should be. Instead focus on naming what they are. For example, header would be a bit better than top, but greeting would be even better. Then left could become updates and right could become navigation.

        <li><a href="#home">Home</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#news">News</a></li>


The href values here won't work. What these are doing is linking to anchors in the current page, but you haven't anchored anything. Also, they look more like they should be going to different pages. So you might have them look like

        <li><a href="/">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="news.html">News</a></li>


You also may want to consider using absolute URLs, as those let you specify the protocol and domain as well as the path.

• BTW it is a test so I don't want to connect the links yet – Mobal Dec 29 '14 at 23:33

# Div div div

Div is not the only container element available to us anymore. There are more semantically appropriate choices available to use now: header, footer, article, section, nav, aside, etc. These elements have special meaning when it comes to the document's outline. Div should be reserved for when you need a container element purely for styling purposes, not for sectioning.