Hypertext Markup Language
HTML is an acronym for Hypertext Markup Language. The Hypertext portion of HTML is what refers to the ability of this technology to create links to other websites, webpages, or resources. It is the part of the web that well, give us a web! It is due to the ability to be able to create an anchor tag that the world wide web exists as it does today. It is a very simply yet amazingly powerful concept, and the biggest businesses in the world make use of this technology everyday to move ideas forward. An entire industry exists around this concept, and search engines like Google and Bing tirelessly study the relationships between links to provide results to users that complete searches on their websites. The Markup of HTML is the other concept within HTML, and it is via the markup that we have formatted text, images, and various other resources embedded within web pages.
Key HTML Concepts
- Originally based on SGML The precursor to HTML is a markup language called SGML, or Standard Generalized Markup Language.
- Hyperlinks are what power the modern Web Often we take links for granted these days, but they are the vital component of the web.
- Several Versions of HTML in use Quicks Mode, HTML 2.0, HTML 3.2, HTML 4.01, HTML5. All of the modern browsers support all of these versions. Of course we are aiming to stay current and complete our websites in either HTML5 or HTML 4.01.
HTML5 Document Structure
A complete HTML Document has many important parts. We’re going to look at some example HTML but before we do, we need to consider what type of application you will use to edit your HTML. There are several great free options available. I like Adobe Brackets, however you are free to use whatever you like. It is also possible to simply use a super basic text editor like Notepad but you’ll miss out on some nice auto format features that really help to make the markup much more readable. Here is a basic HTML5 document structure.
<!doctype html> <!-- HTML5 Document Structure --> <html lang='en'> <head> <meta charset="UTF-8" /> <title> Example HTML Document </title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <h1> This is some text inside of an H1 tag which is good for section titles. </h1> <p> This text is part of a paragraph. This is good for many sentences grouped together by related ideas. </p> </body> </html>
This is about as simple as it gets, but it allows us to look at some of the key ideas with regard to the markup in use. Let’s review them now.
- Doctype The doctype declaration is to tell the browser what version of HTML to expect to parse within the document. I love this new doctype declaration in HTML5 because it is so simple unlike the clunky, attribute filled doctypes of the older versions of HTML. <!doctype html> informs the browser that we are dealing with a Standards Based Document.
- Comments We can see a comment included by the code <!– HTML5 Document Structure –> Comments help developers to keep track of large complicated themes that may be compiled out of many different files.
- Dom Tree Starting at <html lang=’en’> and ending with </html> is the Document Object Model Tree. At the root of tree is the html tag itself. This is an example of a container in HTML since it has both an opening and closing tag. Note that only opening tags will have attributes, closing tags will never have attributes.
- Parent Child Relationships The concept of a container brings up the idea of Parent and Children elements. Tags that are contained within another are children of their parent. In this document the meta, title, and link tags are children of the head element.
- Sibling Relationships When we think of Siblings, we think of equals. For example, you and your brother or sister are siblings, and equal so to speak in the family tree. In this HTML document, the head and body tags could be considered Siblings.
Tags and Containers
Tags are the basis of HTML and there are a few ways to write and interpret them. Specifically, there are tags that create containers and those that do not. First up we’ll look at the idea of a container tag. In our example HTML above, we have a title tag with both an opening <title> and closing </title>. Between the tags is some text. The entire structure is referred to as an element on that page, and since the opening and closing tags surround the text it is also considered a container.
Meta tags on the other hand are en example of a non containing tag. A opening meta does not need the equivalent closing meta. This is referred to as a standalone tag. Often times you will see the format of auto ending the tag via a forward slash like so <meta charset="UTF-8" /> This example has an attribute of
charset and a value of
It may seem a bit mundane, but tags really are the basis of all that we do in web development. It pays to understand them at a low level, in order to make higher level problems easier to debug and troubleshoot later on.
Content Models in HTML5
In prior versions of HTML there were two main content models or categories of elements. There were block elements that defined areas of a document, and inline elements that would flow with text. HTML5 takes this concept a step further and supports Seven different types of Content Models. Content models are what define what types of content are expected in certain types of contexts. A given element should only have content that matches the requirements of it’s Content Model. The seven content models overlap, meaning some elements may belong to more than just one content model.
Most elements in the body of the webpage will be of the Content Model Type Flow. This would include text, paragraphs, headings, lists, hyperlinks, images, audio, video, and most other things things in HTML. Flow pretty much encompasses everything except metadata.
The phrasing content model includes the text of the document and any elements that markup that text. This would include thinks like images, links, forms, bold, and italics.
The heading content model refers to all of the heading elements like
The sectioning content model refers to the new section elements in HTML5. You may have seen these out on the web in the forms of
The embedded content model is responsible for importing another resource into the document like audio or video. Images, Canvas, Math objects, and so on would be considered part of the embedded content model.
Interactive content model elements are specifically meant for users to take action on. A menu navigation, form input, or hyperlink would all be part of the interactive content model group where user input is required.
Content that sets up the presentation or behavior of the rest of the document. This is basically information about information. Meta data is very useful not only for your own webpage, but also if you are integrating other services from third party plugins or websites. For example, Facebook provides a large collection of meta tags to insert on your webpage to integrate with various aspects of it’s developer api.
These seven content categories are a great overview of the type of data you will be working with in HTML5. Having a firm grasp of their meaning and use will enable you to write conforming documents that are portable and maintainable across a range of devices for the foreseeable future.
Obsolete HTML5 Elements
In HTML5, many html elements have been declared obsolete. The meaning of this may be a touch misleading. Since the internet is so incredibly big, there are many pages out there that still use many or all of the elements deemed obsolete. These pages will still work, but being obsolete, their creators should no longer use these elements when they build new online websites. It is a best practice to cease using any of the following elements moving forward.
blink tag these days, you need to reevaluate your approach! 🙂
In addition to the obsolete elements, there is a large collection of obsolete attributes as well. Let’s review them here
Again, this just means that there are better ways to accomplish the same things. If you’ve been developing web pages for a good period of time, you may be laughing as you look at this collection of elements and attributes that have been deemed obsolete. Some of the early WYSIWYG or What You See Is What You Get tools made abundant use of almost all of these elements and attributes 🙂 As they say, hindsight is 20 / 20.
I chose to really dig into HTML and HTML5 in this new series here at VegiBit because there does seem to be a fair amount of confusion as to what HTML5 actually is. And you know what, for good reason. The collection of standards and standards bodies governing the future of the web, not to mention the influence billion dollar corporations have on how things are being shaped, is enough to drive anyone mad. I once heard a saying about HTML5: “Everyone is using it, nobody knows what it is!” Quite fitting in fact. This first jump into the basics of HTML5 will get us going in the right direction to have a better understanding of the tools we use everyday.