Image of Author

How to create an HTML5 Document

by: Marc Pierre

About the author: Hello! My name is Marc Pierre and I am a computer science major at UMass Lowell. I am a junior and looking to graduate with my bachelor's degree in May 2020. This webpage is going to consist of my prior knowledge of html as well as the teaching in my GUI Programming I course. Along with being educational, all of my examples will help me introduce myself to my classmates and professor. This first page gives a brief overview of the structure of an html document. Please see the links at the bottom of the page for examples and my assignments from class Enjoy!

Structure

One of the first things we talked about in GUI I was structure. Everything needs some kind of structure and since html is a markup language (hypertext markup language) it's structure is no different than that of a word document. The structure of a html document consists of:

Document Type: <!DOCTYPE html>

At the beginning of any html document you must define the type. In this case <!DOCTYPE> html means the document is using HTML5.

HTML and Language:

Right after the type we want to create html tags. This defines the beginning and the end of our html document. But before we can start typing away we must first define the language our document will be written in. This is a pretty big deal for a document that is all text. This can be done simply by adding the attribute "lang" in the opening html tag. (EX: <html lang="en">).

Head Tag:

After the language we want to setup the head of our page. The head is not seen on the physical page if we were to open the document in a web browser but it serves a crucial task. Its job is to set things up so the document works as intended. Between the Head tags the first thing you'll need is the character set of the document. This can be done by adding the <meta charset="utf-8"> tag. After that is included you're all set to start on the body. However if there are stylesheets, meta data, title, or other links and attributes you want to connect to the document you can do so within the head tags.

Body Tag:

This is the part that everyone cares about. The body of the document. This is where all the text you see on a webpage lives. This webpage will be going over the tags that you'll find between the body tags and how they make your text look.