This article is going to teach how to start a accessible tableless HTML document under the Strict doctype.
Before each code job you should think about what is going to go where and how your HTML is going to need to be laid out. For this example we are going to be "needing" a basic two column page with the navigation just below the header.
When you've finished your design it's time to step back to basics. You want to make the code so that anyone can access it, even those who cannot run the CSS you will use to beautify the page, or the images. So you do this by using H tags, lists and paragraphs.
Let's begin by laying out our head area of the HTML, we want to use a strict doctype along with meta tags, external CSS and a title.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="learn, html, tableless, coding">
<meta name="description" content="Learn the base of HTML tableless coding.">
<meta name="author" content="Jeff Andersen">
<meta name="copyright" content="Copyright SiteGuts.com, All Rights Reserved.">
<meta name="robots" content="all">
<style type="text/css">@import"global.css";</style>
<title>SiteGuts.com, The basis behind every website is code.</title>
</head><body>
As you can see i have used the Strict doctype along with a meta tag for the UTF-8 charset, this is a widely used character set and is the one i often choose. I have also included meta tags for the description, author, copyright and a tag for robots. The robots tag can be changed to include robots or exclude them from your website, i want to have search engines crawl my page so i have set it to all. We have also added external CSS, i chose to use the @import method of including CSS, you don't have to do it this way, you can go with the conventional way if you wish. Finally we added a title, i used the Siteguts.com title for fun. From here we go on to list the main heading for our page. We do this within H1 tags, which tells the browser that it is the main title.
<h1>Siteguts.com</h1>
Again, i'm using the Siteguts.com information for fun. Now for the interesting part, yet very important. For our navigation we want to use an unordered list. This is because if the user cannot display CSS we would like the list to stack itself using bullets to make it easy to navigate through the page.
<ul>
<li>Homepage</li>
<li>Links</li>
<li>Contact</li>
</ul>
Now we move on to the paragraphs of information. For this part i generally start with content i'd use the the left and then progress on the to right side. You can see what i mean by looking at how the main page of Siteguts.com is laid out and how the code below is shown. For our secondary titles, we want to use another H tag, this time <h2>.
<p>
<h2>Submit content to keep us going</h2>
Although we currently write the majority of the articles here at Site Guts, we would greatly appreciate it if you could submit unique articles for publishing here in our articles section. The catch is in order for them to be published they must be unique articles written by you, the submitter. This ensures that our visitors get unique help unlike any other site on the net today. If you would like to submit an article please do so by clicking submit in the top navigation and then fill out the form. Thanks.
</p>
<p>
<h2>Welcome to the site</h2>
Welcome to SiteGuts.com, an online coding resource for beginner to intermediate coders. Our website thrives off teaching people how to hone their coding skills or start them out. If you're starting out learning to code, it's best to start out in the beginner section and start off by reading about the code itself and then move on to what it can do. If you're an intermediate coder, then obviously you know what this code does and are probably looking to enhance your code's usability and productivity, it's best that you start in the intermediate/advanced section of our articles where you can learn about semantics, bugs, code hacks, and various other methods of enhancing your code. Hopefully you will find something here that will help you out with learning to code and soon you'll be able to fofill all your coding desires.
</p>
<p>
<h2>Site description</h2>
SiteGuts.com is a online coding resource which helps beginner to intermediate coders hone their skills by reading our articles and testing their skills in our online editor. By having the online editor handy, it allows visitors to read the article right next to their program and see first hand if they're doing it right. This is turn helps them become better coders to then branch off and either start coding on their own using a specific code handling program or just code "freestyle" in our online code editor. Articles here are one hundred percent unique and are copyright their respected authors. If you would like to link to an article, feel free to do so but the link must come directly here to the SiteGuts articles database. </p>
Now all we have to do is close our body and html tags to finish off the document.
</body></html>
If you save your document now and look at it in a browser, you have a bare bones page with all the essential content being shown without flaws. This is exactly what we wanted so that users browsing via cellular phones or using a very old browser can still view and utilize your content.
If you weren't sure on something, take a look at the full code below and see where you may have went wrong:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="learn, html, tableless, coding">
<meta name="description" content="Learn the base of HTML tableless coding.">
<meta name="author" content="Jeff Andersen">
<meta name="copyright" content="Copyright SiteGuts.com, All Rights Reserved.">
<meta name="robots" content="all">
<style type="text/css">@import"global.css";
<title>SiteGuts.com, The basis behind every website is code.
</head>
<h1>Siteguts.com</h1>
<ul>
<li>Homepage</li>
<li>Links</li>
<li>Contact</li>
</ul>
<p>
<h2>Submit content to keep us going</h2>
Although we currently write the majority of the articles here at Site Guts, we would greatly appreciate it if you could submit unique articles for publishing here in our articles section. The catch is in order for them to be published they must be unique articles written by you, the submitter. This ensures that our visitors get unique help unlike any other site on the net today. If you would like to submit an article please do so by clicking submit in the top navigation and then fill out the form. Thanks.
</p>
<p>
<h2>Welcome to the site</h2>
Welcome to SiteGuts.com, an online coding resource for beginner to intermediate coders. Our website thrives off teaching people how to hone their coding skills or start them out. If you're starting out learning to code, it's best to start out in the beginner section and start off by reading about the code itself and then move on to what it can do. If you're an intermediate coder, then obviously you know what this code does and are probably looking to enhance your code's usability and productivity, it's best that you start in the intermediate/advanced section of our articles where you can learn about semantics, bugs, code hacks, and various other methods of enhancing your code. Hopefully you will find something here that will help you out with learning to code and soon you'll be able to fofill all your coding desires.
</p>
<p>
<h2>Site description</h2>
SiteGuts.com is a online coding resource which helps beginner to intermediate coders hone their skills by reading our articles and testing their skills in our online editor. By having the online editor handy, it allows visitors to read the article right next to their program and see first hand if they're doing it right. This is turn helps them become better coders to then branch off and either start coding on their own using a specific code handling program or just code "freestyle" in our online code editor. Articles here are one hundred percent unique and are copyright their respected authors. If you would like to link to an article, feel free to do so but the link must come directly here to the SiteGuts articles database.
</p>