HTML Academy
Previous task
HTML document structure1/18
Back to the list of tasks
  • 1. The HTML doctype, or document type declaration
  • 2. Basic HTML tags
  • 3. The head tag, which provides metadata information about the page
  • 4. The title tag for page titles
  • 5. The main tag for main content
  • 6. The header and footer tags
  • 7. The section tag, which is used for semantic sections
  • 8. The nav tag, which is used to specify the main navigation
  • 9. The article tag, which is used to indicate an independent section
  • 10. The aside tag, which is used to specify additional content
  • 11. The h1-h6 and title tags in HTML
  • 12. The p tag for paragraphs
  • 13. Let’s finish designing our pages
  • 14. The meta tag, which is used for page character encoding
  • 15. The meta tag, which is used for keywords
  • 16. Let’s connect another frame to the page
  • 17. Summary of “HTML document structure”
  • 18. First test
Basic HTML tags
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The HTML doctype, or document type declaration

Illustration of the final result for the chapter

In the last chapter, we saw how HTML and CSS work, and at the same time we earned the confidence of the instructor, Muffin. Therefore, the boss has entrusted us with a weighty task: designing a website for a novice coder. This website will serve as a learning diary, and Muffin will track your progress.

Your task for this chapter is to develop templates for the main and internal pages of the website. You will learn more about how to lay out HTML pages and the tags that are used to create the important structural blocks on these pages. At the end of the chapter, you will obtain the result that is similar to what is presented in the illustration on the right.

Let’s get started!

Each HTML document starts with a document type declaration or doctype. The document type is necessary to allow the browser to determine the HTML version and therefore to correctly display the page.

The doctype looked like the following in the old version of HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

It is much simpler in the current version of HTML:

<!DOCTYPE html>

Let’s practice assigning the correct doctype to the document.

Comments

  • index.html
  • style.css
HTML
<!-- Add the doctype here --> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
CSS
body { background-color: #ffffff; background-image: url("htmlacademy.svg"); background-position: center top; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0

    Add a document type declaration to the page. To do this, perform the following steps:

    1. Insert the line of code <!DOCTYPE html> to the very beginning.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.