This beginner HTML5 tutorial will help you make smooth strides towards a basic understanding of HTML and HTML5. You’ll become familiar with these three related terms: Elements, Tags and Attributes.
Along the way, you may stumble across a few tricky patches related to browser support and the nesting of elements, but we’ll have you back on your feet in no time as we reach the conclusion. Let’s get started.
NOTE: This is a companion tutorial to “Smooth Strides from CSS to CSS3.”
HTML5 is the latest version of HTML, the standard markup language used to create web pages. HTML is written in the form of elements consisting of TAGS enclosed in angle brackets ( like <html> ).
You can’t actually see HTML when you look at a web page in a browser. It can only be seen in the source code. Web browsers read the code and then produce the web page that you see on the screen.
HTML5’s goal is to make it easier to create web pages than in the past by offering a simple syntax and many new capabilities. It is also supposed to help make a cleaner and more efficient World Wide Web.
Let’s Create a Page about Speed Skating.
Let’s say that you’re interested in creating a web page that is all about “speed skating.” You have an image of a speed skater and a lot to say about the subject. You also want to code your web page from scratch.
You can create your HTML document in a plain text editor.
Your HTML5 page will start with this: <!DOCTYPE html>
<!DOCTYPE html> goes at the top of every HTML5 page.
<!DOCTYPE html> means “this page is written in HTML5.”
Next you’ll add some elements. (We’ll start slow, then pick up speed.) You will add some old HTML elements and some elements that are new to HTML5.
What are HTML Elements? HTML elements consist of a start tag, content, and an end tag. They’re really quite simple. These elements are nested together in a web page.
Examples of elements: head, body, p
Examples of elements as tags: <head>, <body>, <p>
An element becomes a tag when we use the angle brackets around it. To create a web page, we use those tags to instruct the web browser. A start tag begins a particular HTML instruction. An end tag ends it.
NOTE: Some tags have no end tags.
The first element we’ll add is the HTML element.
The opening (start) tag is <html>. The closing (end) tag is </html>. The only difference is the “/” in the closing tag.
<html> … </html>
These <html> tags surround everything else you will add to your page except <!DOCTYPE html>
Proper Nesting of Elements
With HTML, elements are nested inside other elements.
For those elements with closing tags, that have another element inside of them, be sure to close the inner element before closing its containing element. HTML5 is pretty forgiving but this will make your code easier to read. So since the HTML element contains everything except <!DOCTYPE html>, all other elements with closing tags must be closed before you add the closing </html> tag to the document.
Let’s take a closer look at HTML elements in Part Two.
Return to Top