This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.

John McSweeney - picture detail

John McSweeney

February 5, 2012, 3:49 am

Website Design

Basic HTML

 

Using an HTML editor will remove much of the tedium of writing web pages, but it is essential that one gains a good understanding of HTML in order to identify problems at source.

An HTML document is essentially divided into two sections, the head and the body.

<html>
   <head>
      <title>My Home Page</title>
   </head>
   <body>
      <h1>Some Really Important Title</h1>
      <p>This is where I will put some paragraph text.</p>
   </body>
</html>

Plain HTML is terribly forgiving. One can get away with murder and most designers commit it on a daily basis. Error recovery forms a large slice of the code used to engineer modern browsers. They are programmed to display very poorly constructed markup. Does each opening tag require its partner? No, <p> does not require </p> to display a paragraph. Will this always be the case? Not if XHTML has its way. Under XHTML, markup syntax will be strictly policed. One false uppercase, one omitted closing tag and a web document will be cast into the void. Is this really going to happen? I take a similar approach to Pascal's feelings about the existence of God. The answer is probably no, but I'm not about to take any chances. Write tags in a consistent manner and I would advise the use of lowercase, which for XHTML is required.

The <html> tag has a matching </html> closing tag at the foot of the document. All markup should be placed between these two tags. The <head></head> tags delineate the head of the document. Everything placed between them is not displayed in the main window of the browser. This is where one places the title of the document and any text placed here will be displayed in the titlebar at the top of the browser window. The <title></title> tags must be placed between the <head></head> tags. (Under XHTML definition the title tags are mandatory.)

The <body></body> tags contain the mark-up of any content to be displayed in the browser window. In the above example, two pieces of text are marked up with <h1></h1> and <p></p> tags. The <h1></h1> tags instruct the browser that what is placed between them is really important and deserves a very large font whereas the <p></p> tags should be displayed in something more appropriate to the status of paragraph text. This HTML is describing the structure of the document. There is nothing here specifying the display and layout. It is the browser that determines the layout and font type, font colour etc.

The other tags that should be part of your basic HTML kit are those used to construct:

  • Hyperlinks
  • Anchors
  • Ordered lists
  • Unordered lists
  • Tables
  • Insertion of images
  • Line breaks

Here is some markup that will achieve this. Note the use of indentation. Although this has no effect on how the document is displayed in the browser, it helps a reader to understand the structure of the document. For example, we can see that the ordered list tags <ol></ol>, are nested within the <body></body> tags and that each item of this list is nested within the list tags by using item <li></li> tags. Note that the line break tag <br> does not require a matching closing tag.

<html>
   <head>
      <title>HTML Test Page</title>
   </head>
   <body>
      <h1>How to use HTML</h1>
      <h2>Introduction</h2>
      <h3>Paragraph with line break and hidden anchor</h3>
      <p>Here are a few examples of basic HTML.<br>
      <a name="top"></a>When you click on the hyperlink at
      the foot of this page, you will return
      to the anchor at the start of this line.</p>
      <h3>Ordered list</h3>
      <ol>
          <li>First item </li>
          <li>Second item</li>
      </ol>
      <h3>Unordered list</h3>
      <ul>
         <li>Bullet point</li>
         <li>Another bullet point</li>
      </ul>
      <h3>Table</h3>
      <p>This table contains two rows and 3 columns,
       border 1px and width 400px.</p>
      <table border="1" width="400">
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
      </table>
      <h3>Image</h3>
      <p>Here is a jpeg inserted into the body of this document.</p>
      <img src="images/wave3_2.jpg" width="100" height="123"
      alt="A jpeg of a collage">
      <h3>Hyperlink</h3>
      <p>Here is a <a href="html2.htm">hyperlink</a> taking you back
       to <strong>html2.htm</strong></p>
      <p>Here is another link taking you to <a href="#top">the anchor
      at the top of the page.</a></p>
   </body>
</html>

You can view the above page here.

Another useful piece of markup, not used above, is the non-breaking space. This is written as &nbsp;. I often resort to it for indenting code. By entering this into the markup, the browser is prevented from collapsing a space. The non-breaking space is also useful for similarly preventing the collapse of a table cell. Most HTML editors, e.g. Dreamweaver, automatically insert a non-breaking space into each cell when constructing a table, but when hand coding a page, this markup is worth remembering.

Next page » CSS

Previous page « Introduction to HTML