This example is the way that the navigation area and its contained links were positioned before the international standards group that maintains the specifications for html styling updated the specifications to include an element called nav. The link in the navigation area above will take you to a page that uses the up-to-date specifications.
The div created in the very first example could be a navigation area, but that div is not named, and it is a very good idea to give names to at least some of the divs. The name can be either an id or a class, and the important difference is that there should be only one id div per HTML file.
Style specifications for the blue navigation div shown above:
div#navigation {width: 100%; height:80px;
padding: 2px 4px 6px 40px;
font-size: 24px; font-weight: bold;
background-color: DodgerBlue;
The specification of "2px 4px 6px 40px" for the padding of the blue area is a short-cut way of giving the padding for the top, right side, bottom, and left in that order. The longer version is "padding-top: 2px; padding-right: 4px; padding-bottom: 6px; padding-left: 40px". The sides can be listed in any order in the longer version. You may prefer to use the longer version unlil you feel comfortable writing style specifications.
This link will take you back to the page on which you can find links to the some of the basic concepts of styling HTML.