Absolute Basics | Answers

Display a message with minimal code

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

What is this? HTML can be written without any markup elements! No, not exactly. The document type is not specified in the source for this solution, leaving the browser to enter quirks mode. In quirks mode, the browser does the best it can to correctly display your page. In future solutions we specify <!DOCTYPE html> in the source code, which is the HTML5 document type.

If you specify a certain variant of HTML, such as XHTML, you may be forced to write well-formed markup. It’s worth looking into the purpose of XHTML for more background on this issue of well-formedness.

Greet HTML5, specifying a doctype and root element

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

The root element surrounds all html source code, with the exception of the doctype. More elements should also be specified, and these will certainly be covered in later exercises.

Write some paragraphs in a webpage

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

Whitespace formatting is ignored in HTML5, such as the indentation and paragraphing in the above solution. Indentation can be added with elements such as paragraph <p> and unordered list <ul>.

Choose a program from the hello world wikibook, and copy it into a webpage.

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

Here we’ve written a simple golang program in the HTML document, demonstrating what happens when several different types of indentation are used. The result is the formatting has been removed. Other elements are needed to present the code the way I set it out in the source code, as well as CSS if highlighted code is a concern.

Absolute Basics | Advanced Questions

Write a very simple webpage in five different HTML versions

NOTE: This exercise is likely to be updated over time. Current solutions are drafts.

HTML 5 Document

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

HTML 4 Document

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

HTML 3.2 Document

Coming Soon! Sorry this exercise is taking some time to research.

HTML 2.0 Document

Coming Soon! Sorry this exercise is taking some time to research.

XHTML (Strict) Document

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

In all these examples there is a set of elements that span all of the language variants. Here’s a breakdown:

  1. Document Type: <!DOCTYPE ...> The document type is used by the page renderer to determine what version of HTML to expect in the document’s source code. There is much more anecdotal information swimming around in the ether, for those who have a wicked urge to delve into the dark, twisty depths of the doctype’s history. Others who just want a straightforward explanation may find useful information around the web too, if you dare to look.
  2. Definition / Root: <html> ... </html> The root tags specifies that the nested content of the element is html source code.
  3. Metadata: <head> ... </head> Metadata is used to describe the content of a html document, such as the character set, content type and document title.
  4. Content: <body> ... </body> What is displayed to the web user is the content of the webpage, which may consist of embedded content, text content or both, and is collectively referred to as flow content.

Write a webpage with the essentials

Sorry! Your browser can't render the solution. Perhaps you're viewing this page offline. You can see the solution for this problem here on CodePen.

This an inherently subjective question, to an astronomical degree.