Jump to main content
Menu

Getting Started with HTML

Start with the Doctype

  • The first line of code in your text editor file is the doctype.
  • Doctypes define the document type being used (the version of the markup language).
  • You will come across a variety of doctypes in use on the Web, especially with older pages.
  • Since our focus is HTML5, the doctype to use is: 
    <!DOCTYPE html>
  • Doctypes are critical when you validate your code; validation refers to checking your code for compliance with the indicated code specification.
  • The final impact of a doctype is on the rendering mode used by the browser; using a proper doctype can result in a faster rendering process.

Add <html> and Specify Document Language

  • The <html></html> tags are the next code to be added to your page.
  • This is referred to as the root element for the page, since it holds all the rest of the code for the page and identifies it as HTML code. 
    <!DOCTYPE html>
<html lang="en" dir="ltr">

</html>
  • Note that there are two attributes that are included in the <html> tag:
    • lang - This communicates the human language for the content in the page.
    • dir - This is the direction that language flows (ltr = Left to Right; rtl = Right to Left)
  • lang can be used with almost any tag, but it is good to specify it here to cover the entire document (the setting is inherited by, or passed along to, the tags within).

    The two-letter codes used are from ISO standard 639.

  • Specifying the language benefits both screen reading technology as well as search engine spiders / bots.
  • Important: Attributes can appear in any sequence. HTML has no requirements that attributes appear in a specific order.

Provide the <body>

  • After the </head> tag we have the <body></body> tags, which define the body of the document. The body is the rest of the document and holds almost all of the tagging for the page as well as its text content.
  • If we wanted to start off with the requisite "Hello world!" message (a rite of passage in practically every computer language), the code would be: 
    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <title>Our First Hello World Message</title>
  <meta charset="utf-8" />
</head>
<body>
Hello world!
</body>
</html>
  • To see the rendering and make edits in CodePen:

    See the Pen Hello World by Jason Withrow (@jwithrow) on CodePen.

White Space / Empty Space and HTML

  • HTML ignores any white space / empty space between characters beyond the first space, but it does render that single space. Thus we would still see "Hello world!" even if the code was typed as: 
    Hello    world!

    or:

    Hello
   world!
  • Avoid having leading space within a tag, which is space between the opening tag and its initial content character. This is an example of leading space (note the space after the opening title tag): 
    <title> Our First Hello World Message</title>
  • Avoid having trailing space within a tag, which is space between the final content character and the closing tag. This is an example of trailing space (note the space before the closing title tag): 
    <title>Our First Hello World Message </title>
  • If you need space, put it before the opening tag and/or after the closing tag.
  • Leading space and trailing space become problematic in various situations, such as layouts where the extra space is rendered and causes visual gaps or extra space that is not wanted.
  • As a general rule, you want to avoid leading space and trailing space.

Build a Starter Template

  • I recommend creating a starter template, which are bare-bones HTML files with the basic structure shown in this article.
  • You can then make a copy of the appropriate file and start from there, without needing to recreate all the tags each time.

Validate Your Code

  • Validate all of your HTML using the W3C's validator (https://validator.w3.org/nu/). This will ensure that your code is valid, conforming to the doctype specified.
  • You can either provide the address of the code online, upload the file from your computer, or copy / paste the code into a textarea box.
  • Errors have their line numbers provided, a brief snippet of the appropriate code is shown, and a potential explanation / fix is provided.
  • It is a good practice to fix the first error and then re-validate the updated code.
    • You will often find that other errors have now been resolved, even errors that appear unrelated.
    • This is because the initial error caused a ripple effect throughout the rest of the code that threw other tags into an invalid state.
    • If you do not re-validate the code, you could spend a lot of time looking at a reported error that is no longer a problem.
  • The validator will also flag some things in the code as warnings. This is often related to improperly coding something, such as writing an ampersand as & rather than as &amp;
  • Info / notices from the validator can be ignored. For example, the validator is programmed to throw notices when tags are self-terminated, which can be ignored. Well-formed code won't create the scenarios they are worried about there.
  • Important: You can have a perfectly valid page that renders as a mess. You followed all the rules about what tags and attributes can be used, as well as where tags can be used and how they can be nested, but the setup is not one that is producing the desired appearance. The validator cannot help you with that situation.
  • Helpful Troubleshooting Tip: If you 'View Page Source' in Firefox (right-click on the browser window and it should be an option in the context menu that appears) the source code should be color-coded and errors will be in red. That is a quick way to see where problems exist in the code, such as unclosed tags, improper nesting, etc.