{"id":4014,"date":"2014-11-11T20:31:36","date_gmt":"2014-11-11T20:31:36","guid":{"rendered":"http:\/\/www.crimsondesigns.com\/blog\/?p=4014"},"modified":"2019-08-22T17:13:04","modified_gmt":"2019-08-22T17:13:04","slug":"smooth-strides-from-html-to-html5","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/smooth-strides-from-html-to-html5\/","title":{"rendered":"Smooth Strides from HTML to HTML5"},"content":{"rendered":"

\"SmoothThis beginner HTML5<\/strong> tutorial will help you make smooth strides towards a basic understanding\u00a0of HTML<\/strong> and HTML5.<\/strong> You’ll become familiar with these three related terms: Elements, Tags and Attributes<\/strong><\/span>.<\/strong><\/p>\n

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.<\/p>\n

NOTE: This is a companion tutorial to “Smooth Strides from CSS to CSS3.<\/a>”<\/p>\n

<\/p>\n

HTML5<\/strong> is the latest version of HTML,<\/strong> the standard markup language used to create web pages. HTML<\/strong> is written in the form of elements consisting of TAGS<\/strong> enclosed in angle brackets ( like <html> ).<\/p>\n

You can’t actually see HTML<\/strong> 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.<\/p>\n

HTML5’s goal<\/strong> 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.<\/p>\n

Let’s Create a Page about Speed Skating.<\/h3>\n

Let’s say that you’re interested in creating a web page that is all about “speed skating.”<\/span> 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.<\/p>\n

You can create your HTML document in a plain text editor.<\/h4>\n

Your HTML5 page will start with this: <!DOCTYPE html><\/strong><\/p>\n

<!DOCTYPE html><\/strong> goes at the top of every HTML5 page.
\n<!DOCTYPE html><\/strong> means “this page is written in HTML5.”<\/p>\n

Next you’ll add some elements. (We’ll start slow, then pick up speed.) You will add some old HTML<\/strong> elements and some elements that are new to HTML5.<\/strong><\/p>\n

What are HTML Elements?<\/strong> 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.<\/p>\n

Examples of elements: head, body, p
\nExamples of elements as tags: <head><\/strong>, <body><\/strong>, <p><\/strong>
\nAn 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.<\/p>\n

NOTE: Some tags have no end tags.<\/span><\/strong><\/p>\n

The first element we’ll add is the HTML element.
\nThe opening (start) tag is <html><\/strong>. The closing (end) tag is <\/html><\/strong>. The only difference is the “\/” in the closing tag.<\/p>\n

<html> \u2026 <\/html><\/strong><\/p>\n

These <html> tags surround everything else you will add to your page except <!DOCTYPE html><\/strong><\/p>\n

Proper Nesting of Elements<\/h3>\n

With HTML, elements are nested inside other elements.<\/p>\n

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<\/strong> is pretty forgiving but this will make your code easier to read. So since the HTML element contains everything except <!DOCTYPE html><\/strong>, all other elements with closing tags must be closed before you add the closing <\/html><\/strong> tag to the document.<\/p>\n

Let’s take a closer look at HTML elements in Part Two.<\/p>\n