{"id":239,"date":"2013-01-29T14:45:00","date_gmt":"2013-01-29T14:45:00","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=239"},"modified":"2013-01-29T14:45:00","modified_gmt":"2013-01-29T14:45:00","slug":"html-anatomy-html5-document","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/html-anatomy-html5-document\/","title":{"rendered":"What Is HTML? The Anatomy of an HTML5 Document"},"content":{"rendered":"

DOCTYPE<\/h2>\n

The very first thing that you typically see in an HTML file is the DOCTYPE declaration. Before HTML5, this could be a very confusing bit of code that looked something like this:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

There\u2019s a lot going on here and every bit of it speaks to either the web browser, the reader or both. The \u201cPUBLIC\u201d part just speaks to the availability, the DTD stands for Document Type Definition<\/em>, which declares the version of HTML being used and the final section is a URL pointing to where the DTD can be found.<\/p>\n

The words \u201cloose,\u201d (or transitional) \u201cstrict\u201d and \u201cframeset\u201d refer to different versions of HTML 4, which allowed for slightly different markup. These were essentially just to help transition developers from older versions of HTML.<\/p>\n

The HTML5 DOCTYPE<\/h3>\n

There are several DOCTYPEs to choose from, which can be monumentally confusing for new developers. Fortunately, HTML5 completely simplifies the situation with a refreshingly simple DOCTYPE:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

See how easy that is by comparison? It really is a beautiful thing.<\/p>\n

What Does the DOCTYPE Do?<\/h3>\n

Now we\u2019ve seen what a DOCTYPE looks like<\/em> but we haven\u2019t really discussed what it does<\/em>. The answer is that the DOCTYPE tells the browser which type of HTML to expect, which in turn affects how the browser renders the page.<\/p>\n

As you explore web development more, you\u2019ll learn that there\u2019s a huge emphasis on \u201cstandards-based development.\u201d The general idea is that if we all follow certain rules and standards, web development will be a more cohesive and consistent practice. This is better for developers, better for browsers and most importantly, better for users.<\/p>\n

DOCTYPEs were originally designed to trigger \u201cstandards mode\u201d in browsers, which meant that the page was rendered using newer web standards. Similarly, older pages without a DOCTYPE triggered \u201cquirks mode\u201d in browsers, which allowed for older practices to be used that wouldn\u2019t function properly in standards mode.<\/p>\n

The new, very simple HTML5 DOCTYPE is supported in all major browsers, and it triggers standards mode in all of them. The DOCTYPE also helps you validate<\/a> your code, which ensures that current standards are being adhered to. Every page that you create should use a DOCTYPE and hopefully be fully standards compliant.<\/p>\n

Root Element<\/h2>\n

After the DOCTYPE, the HTML really begins. This is indicated by the HTML Root Element. If your entire HTML is a tree, this is the root from which everything else sprouts.<\/p>\n

The Root Element is defined by a \u201ctag,\u201d which we learned about in our last article. In this case, it\u2019s the \u201cHTML\u201d tag.<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<!-- Everything Goes Here --><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Notice that the root element includes a language attribute, in our case English. Always be sure to indicate the appropriate language for every page you create.<\/p>\n

Everything else that we will add to this page is situated inside of the Root Element. It is the container for every scrap of information and piece of content, the only exclusion being the DOCTYPE.<\/p>\n

Head Element<\/h2>\n

The next thing you\u2019ll encounter in an HTML document is the \u201chead\u201d section. The head tag is exactly what you\u2019d expect it to be:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<!-- Some Code Goes Here --><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

The stuff that goes into the head section is primarily informational, it tells both you and the browser certain things about the page such as the title, the charset, etc. This is also where you traditionally load in important external resources.<\/p>\n

There are a few important things that go into a head tag. Let\u2019s look at them one by one.<\/p>\n

Meta Tags<\/h3>\n

As you can probably guess, meta tags hold metadata about the page. Metadata takes many forms and can include keywords, authors, descriptions, etc. Here are a few notable inclusions:<\/p>\n

Charset<\/strong>
\nThis is pretty boring stuff, the charset is typically set to UTF-8<\/a> and essentially tells the browser which character encoding to use.<\/p>\n

Your pages should definitely include an indication of which charset to use. Don\u2019t over think it, it\u2019s just one of those things you need to stick in your template. Below is a typical charset declaration in HTML5.<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<<\/code>meta<\/code> charset<\/code>=<\/code>\"utf-8\"<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

This is yet another thing that has gotten easier with HTML5. Check out the version of this snippet required for HTML 4.01:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<<\/code>meta<\/code> http-equiv<\/code>=<\/code>\"content-type\"<\/code> content<\/code>=<\/code>\"text\/html; charset=UTF-8\"<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Some other typical metatags include description and author. Here\u2019s a quick, self-explanatory example of each of these:<\/p>\n

Description<\/strong><\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<<\/code>meta<\/code> name<\/code>=<\/code>\"description\"<\/code> content<\/code>=<\/code>\"Some description about your page\"<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Author<\/strong><\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<<\/code>meta<\/code> name<\/code>=<\/code>\"author\"<\/code> content<\/code>=<\/code>\"Josh Johnson\"<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Title<\/h3>\n

Another thing that goes inside the head portion of your document is the title tag. This is a very simple piece of code that simply states whatever you\u2019d like the title of the page to be. Here\u2019s an example:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

This title is usually shown to the user at the very top center of the browser window, on a tab, etc.<\/p>\n

\"screenshot\"<\/div>\n

Links and Scripts<\/h3>\n

The last thing we\u2019ll discuss regarding the head tag is the inclusion of external resources. In a very simple web page, you\u2019ll typically see these take the form of a stylesheet or script:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n<\/td>\n
\n
\n
<<\/code>link<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code> href<\/code>=<\/code>\"style.css\"<\/code>><\/code><\/div>\n
<<\/code>script<\/code> src<\/code>=<\/code>\"js\/jquery.js\"<\/code>><\/<\/code>script<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Here I\u2019m essentially loading my CSS file as well as jQuery (a JavaScript library) into the page. If these resources are included in the source files but not linked to in the head section, they will not function. Note that the links for these could either point to something in the local folder hierarchy (as above) or something hosted on another web server.<\/p>\n

The link used above for the CSS file uses a link relation<\/em> (rel=\u201dstylesheet\u201d). For more on link relations, check out this article<\/a>.<\/p>\n

Also, as an alternative to linking to external files, you can embed code right into the head element. Here\u2019s an example with CSS, but the same can be done via the \u201cscript\u201d tag and JavaScript (embedded scripts are often placed at the end of the body element instead).<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/td>\n
\n
\n
<<\/code>style<\/code> type<\/code>=<\/code>\"text\/css\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>a { text-decoration: none; }<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>p { color: #333; }<\/code><\/div>\n
<\/<\/code>style<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Body Element<\/h2>\n

The final portion of an HTML page is the most important. Everything inside of the body element defines the content and structure of your page. As far as development time, you\u2019ll likely use a set template for everything above and spend a few minutes customizing it for specific projects. The rest of your HTML time will be spend inside the body element.<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<!-- Page Content Goes Here --><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Putting it All Together<\/h2>\n

Now that we\u2019ve walked through each individual piece of an HTML file, let\u2019s put it all together into one extremely basic HTML5 template.<\/p>\n

\n
\n
\n\n\n\n
\n
01<\/div>\n
02<\/div>\n
03<\/div>\n
04<\/div>\n
05<\/div>\n
06<\/div>\n
07<\/div>\n
08<\/div>\n
09<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
\u00a0\u00a0<\/code><<\/code>meta<\/code> charset<\/code>=<\/code>\"utf-8\"<\/code>><\/code><\/div>\n
\u00a0\u00a0<\/code><\/div>\n
\u00a0\u00a0<\/code><<\/code>meta<\/code> name<\/code>=<\/code>\"description\"<\/code> content<\/code>=<\/code>\"A Very Basic HTML5 Anatomy\"<\/code>><\/code><\/div>\n
\u00a0\u00a0<\/code><\/div>\n
\u00a0\u00a0<\/code><<\/code>link<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code> href<\/code>=<\/code>\"style.css\"<\/code>><\/code><\/div>\n
\u00a0\u00a0<\/code><<\/code>script<\/code> src<\/code>=<\/code>\"js\/jquery.js\"<\/code>><\/<\/code>script<\/code>><\/code><\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<!-- Page Content Goes Here --><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

An Overview<\/h2>\n

A thousand apologies for the mundane nature of this topic, beginners are often turned off by boredom at this point but hang in there, the real fun of HTML is everything between the body tags, which we haven\u2019t even discussed!<\/p>\n

All of these pieces were necessary to accurately paint the picture of what an HTML document actually is. We now see that an HTML document has a DOCTYPE that tells the browser how to render the page and helps ensure the proper standards are being used.<\/p>\n

We also know that there\u2019s a set hierarchy to how HTML pages are structured. Just about everything but the DOCTYPE is thrown into the root element, meaning it is the \u201cparent element\u201d of the head and body elements, which in turn have their own children.<\/p>\n

\"screenshot\"<\/a><\/div>\n

The basic structure of an HTML document is referred to as the DOM, or the Document Object Model. This is almost always metaphorically referred to as a tree and depicted like image above. Our own Jack Rocheleau wrote an in-depth look into the DOM titled Deeper Study Into the WWW\u2019s Document Object Model<\/a>. For the next set in understanding the basic structure of an HTML page, check out that article.<\/p>\n

Conclusion<\/h2>\n

This article represents a very brief overview of how an HTML skeleton is structured and the types of things that are typically included. It is by no means exhaustive, but should serve as a good basic introduction to these topics.<\/p>\n

When you\u2019re just starting out in code, most people will simply give you a template for all of the code above without really explaining what it all does. This can leave a sizable hole in your education so it\u2019s important to read through this information and attempt to understand what you can.<\/p>\n","protected":false},"excerpt":{"rendered":"

DOCTYPE The very first thing that you typically see in an HTML file is the DOCTYPE declaration. Before HTML5, this could be a very confusing bit of code that looked something like this: 1 There\u2019s a lot going on here and every bit of it speaks to either the web browser, the reader or both. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[9,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/239"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}