What Is HTML

what is html

We’re going to take a close look now at HTML5 and in order to do that, we have to take a look at a little bit about what HTML is, where it comes from, and the direction it is headed. HTML truly is the language of the web. I know we have spoken about JavaScript being the language of the web, or PHP being the language of the web. In fact, there are many languages of the web, but when it comes right down to it, none of the others really matters if you do not have HTML first. HTML is really the enabler of the World Wide Web. So let’s dig right in and get our hands dirty with some HTML!


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.

WHATWG

WHATWG stands for The Web Hypertext Application Technology Working Group. Say that 5 times fast! 🙂 The purpose of this group is to standardize modern web frameworks like HTML5. The history of this is that the W3C was working on XHTML 2.0 as a means of making HTML a more strict markup language to work with application based websites. XHTML was not popular with the web community, and HTML5 has become the go to technology for modern web applications. HTML5 is really a bit of a loose term in that it refers to a collection of technologies encompassing markup, design, and behavior. Think HTML, CSS, and JavaScript to be more precise. At this stage of the game, we have the WHATWG and W3C versions of HTML5 and they do not one hundred percent agree on what the actual meaning of HTML 5 is. What they do agree on however, is the markup portion of HTML5.


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.

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 UTF-8.

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.

1. Flow

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.

2. Phrasing

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.

3. Heading

The heading content model refers to all of the heading elements like h1 h2 h3 h4 h5 and h6.

4. Sectioning

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 article aside nav and section.

5. Embedded

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.

6. Interactive

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.

7. Metadata

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.

  • acronym
  • bgsound
  • dir
  • frame
  • frameset
  • noframes
  • isindex
  • listing
  • nextid
  • noembed
  • plaintext
  • rb
  • strike
  • xmp
  • basefont
  • big
  • blink
  • center
  • font
  • marquee
  • multicol
  • nobr
  • spacer
  • tt

You may be wondering, why would they remove functionality from the language? Wouldn’t I want to be able to accomplish just as much, and more with this great new HTML5? Well, in reality, you can accomplish all the things these obsolete tags provide by using a combination of supported HTML5 elements and additional CSS and or JavaScript. If you’re trying to use the 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

  • abbr
  • accept
  • align
  • alink
  • archive
  • axis
  • background
  • bgcolor
  • border
  • cellpadding
  • cellspacing
  • char
  • charoff
  • charset
  • classid
  • clear
  • code
  • codebase
  • codetype
  • color
  • compact
  • coords
  • datafld
  • dataformats
  • datapagesize
  • datasrc
  • declare
  • elements
  • event
  • for
  • frame
  • frameborder
  • height
  • hspace
  • language
  • link
  • longdesc
  • lowsrc
  • marginbottom
  • marginheight
  • marginleft
  • marginright
  • margintop
  • marginwidth
  • methods
  • name
  • nohref
  • noshade
  • nowrap
  • profile
  • rev
  • rules
  • scheme
  • scope
  • scrolling
  • shape
  • size
  • standby
  • summary
  • target
  • text
  • type
  • urn
  • usemap
  • valign
  • valuetype
  • version
  • vlink
  • vspace
  • width

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.

Conclusion

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.

Thank you for reading What Is HTMLPlease do share using the buttons below!