Home  Privacy

HTML Basics – Conclusion

Over the past few tutorials, you have learned some basic HTML tags that allow you to create structured webpages with images and hyperlinks. They are plain in appearance, but HTML is about the structure of your document – not its appearance.

You have seen (16 + 5) HTML tags and 1 document declaration tag that can be used to create web documents.
There are 5 tags – along with the document declaration – that form the basic skeleton of an HTML5 document. The remaining 16 tags allow you to structure and organize your content.

Contents

  1. An Overview of HTML
  2. Document Declaration
  3. Template Tags
    1. html
    2. head
    3. body
    4. title
    5. meta
  4. HTML Tags
    1. p
    2. h1 – h6
    3. strong
    4. em
    5. i
    6. mark
    7. ul
    8. ol
    9. li
    10. img
    11. a
  5. Conclusion

An Overview of HTML

You have seen 21 of the 108 HTML tags.

  • Most HTML tags come in pairs: consisting of a start tag and its corresponding end /tag.
  • Content – which may contain HTML tags – is placed between the tags.
  • You have seen two exceptions to the tag-pair rule:
    • the img which has no closing tag because it doesn’t take any content – instead, it embeds an image into the document where the tag occurs.
    • the meta, which takes some attributes
    • while these tags do not take a closing tag, some people prefer to write them with a closing indicator /:
    <meta />
<img />
    • since these tags don’t enclose any content, their behaviour is, generally,1 controlled by attributes
  • If there are errors in the tags (for example, forgetting to close a tag), the browser (user-agent) doesn’t issue an error, instead it tries to render the document as best it can.
  • HTML collapses all white space (spaces, tabs, newlines, etc) into a single space. There is no difference between the way the following two code snippets will render: 
    <p>
  Mary
  had      a
  little
  lamb.
</p>

<p>Mary had a little lamb.</p>

    If you need to preserve formatting, use the pre tag (preformatted) instead of the p tag.

  • All HTML tags are case-insensitive.
  • Every HTML start tag can have one or more attributes. Not all attributes have a meaning or effect on all tags, however the id attribute can be used with all tags.

Document Declaration

Every HTML5 document needs to begin with:

<!DOCTYPE HTML>

It is case insensitive.
If you omit it, the web browser (also known as a user-agent) will switch to quirks mode and try to render the HTML in some “compatible” manner. This is a bad idea, since incompatible browser behaviour was common prior to HTML5. With the introduction of HTML5, browsers have been pretty good about complying with its requirements – they might not support all the features, but they avoid doing things in an incompatible way.
It is an obsolete artefact, but without it, your documents will probably not display correctly:

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.2

Template Tags

Every HTML document must be composed of at least the html, head, and body tags. While the title and meta tags are not essential, they really should be included in every HTML5 document.

html

This is the start of the HTML document. It is also known as the root. It is an error to have more than one html in a document.3

All HTML documents are divided into two sections: a head and a body. Inside the head section goes meta-data about the document. In other words, information about the document goes in this section: author, version, date, etc.

body

The content of the document goes in the body section.

title

The title of the document, usually showing in the browser title bar or tab, goes here.
While not essential, this information is read by spiders (automated bots that crawl webpages) and a good title helps improve your search engine ranking – there are many, many other factors, but a good title is one of them.

meta

The meta tag is used for meta-data that cannot be represented using some other tag (we have seen the title tag, there are a few others). In this case, we have used it to indicate the text encoding of the document – UTF-8. Unless you have a good reason for using some other text encoding, you should always use UTF-8.4

HTML Tags

HTML tags in the body section of the document serve 3 general purposes:

  1. structure (like the heading tags)
  2. formatting and semantics (like the strong tag)
  3. embedding (like the img tag)

p

This is, probably, the workhorse tag of HTML. It structures your content into paragraphs.
Paragraphs cannot be nested, so if a new p begins without the previous paragraph having been closed, a new paragraph will begin. In effect, each new p automatically closes the previous p tag. This is one of the few tags were you are permitted to omit the closing tag – but I don’t recommend it.

h1 – h6

The heading tags divide your document into sections. h1 should be used for the top-level section with h2 through h6 tags used for various levels of subsections.
An outline of your document can be determined from these headings.5

strong

A formatting tag which is used to mark up parts of your document that are important, serious, or urgent. It also has semantic meaning.

em

A formatting tag that is used to mark up parts of your document that require emphasis but are not important, serious, or urgent.

i

A formatting tag that is used to mark up parts of your document that are, in some way, different from the normal flow of the document. For example, technical terms, foreign words, or the internal thoughts of a character.

mark

A formatting tag that is used to mark up parts of your document that you want to highlight for reference purposes.

ul

A structural tag that marks an unordered list. This is a list of items that are bulleted instead of numbered.
It works together with the list items tag (li).

ol

A structural tag that marks an ordered list. This is a list of items that are numbered. The attributes reverse and start control the numbering behaviour.
It works together with list items (li).

li

List items need to be used inside of either ul or ol tags.
List items can contain pretty much anything you like – including other lists.

img

A single tag which embeds an image into the flow of the content. In other words, the image appears as if it was part of the sequence of words.
To have an image act as a stand alone element, it is necessary to wrap it inside paragraph tags.
The behaviour of the tag is controlled by the attributes src and alt. If the image referenced by src cannot be loaded, the alt text will be used in its place.

a

This is a formatting tag that marks a hyperlink in the document.
Its behaviour is controlled by the attributes href, target, and download.
This is another tag that is very important for ranking better with search engines – unfortunately, you cannot use this on your own webpages to improve your ranking. Search engines count the number of hyperlinks to your content from other websites and use this to determine your authority. The best way to get other sites to link to your content is to create high quality content. There are no shortcuts.6

Conclusion

You’ve come a long way in your journey to learn web development. This was, probably, the hardest part (although, you might disagree once we get to JavaScript).
You’ve learned how to create structured and functional HTML documents (even if they are plain looking) – everything else builds on this. You can easily look up more information on the other 90 (or so) HTML tags we haven’t covered so far. We will be looking at more HTML tags later in this tutorial series – introducing them as needed.
In the next set of tutorials, we will be looking at CSS (Cascading Style Sheets). CSS is how we manage the look and feel of a webpage – so you will not longer be stuck with the default presentation of your browser. HTML provides the structure for HTML documents, CSS provides the appearance.
As always, the more you practice the better you get.

  1. There are single tag HTML elements that work without needing any attributes.↩
  2. The DOCTYPE↩
  3. While it is an error to have more than one html section per document, forgetting it is not necessarily fatal to your document. Browsers (user-agents) try really hard to parse the document as HTML and will try to fill in the missing html tags. Nevertheless, it is always best practice to write correct HTML.↩
  4. One reason you might not use UTF-8 encoding is because the document you are converting to HTML was originally encoded using a different encoding and it is not possible to convert it to UTF-8. You will need to specify that encoding into your document. IANA maintains a list of recognized character encodings↩
  5. You can try HTML5 Outliner for Google Chrome and HeadingsMap for Mozilla Firefox. There may be other similar plugins available for other browsers.↩
  6. While links back to your site are important, search engines use algorithms to determine if you site is being linked to from a quality site or a “junk” site. In the past, people tried to game their SEO (search engine optimization) by spamming their links around the web (for example, by leaving comments with a link back to their site). Links to your site in comments, have very little (if any) bearing on your search rank. Links to a site in the body have much higher weight.↩

Published

Do not republish this article, in whole or in part. You may publish a short excerpt and provide a link back to the original article.