Web Design - Basic HTML

By CRAIG KUNCE

Let's begin by explaining the HTML code that makes up the basic page structure of a web page.

 

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">

<title>Web Design Fundamentals</title>

<meta name="description" content="Let's begin by explaining the HTML code that...">

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

<script></script>

</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="navigation"></div>

<div id="content">

<h1>A heading block element</h1>

<p>A paragraph block element</p></div>

<p><img src="path/path/image_name.jpg" alt="altname" width="500" height="400"/></p>

<p><a href="https://kuler.adobe.com" target="_blank">kuler.adobe.com</a></p>

<ul>An unordered list block element

<li>An ordered list block element</li>

</ul>

<div id="footer"></div>

</div>

</body>

</html>

 

<!doctype html>

This tag (or element) defines this document type as html5. It is a short and efficient string.

Previous versions of html may have looked like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. Which, of course, is a bit longer and less efficient.

<html lang="en">

This tag defines the primary language for this web page as english.

Tags (or Elements)

A tag or element is a chunk of code that is contained within brackets that are less-than and greater-than signs, along with a forward slash (/) to close it. An opening head tag looks like this <head>. And a closing head tag like this </head>. The content would go between the two tags.

html5 seeks to reduce the amount of code needed and allows you to eliminate the closing tag altogether if there is no content between the opening and closing tags. The meta tag above would be an example of this. Instead of this:

   <meta name="description" content="Let's begin by explaining the HTML code that..."></meta>

we can use this self-closing tag:

   <meta name="description" content="Let's begin by explaining the HTML code that makes up...">

Attribute and value statement

The meta tag we just looked at has two attributes and values.

<ATTRIBUTE="VALUE"  ATTRIBUTE="VALUE">

<meta name="description" content="Let's begin by explaining the HTML code that makes up...">
<div id="article_main"></div>

Coming soon… <article></article>, <aside></aside>