The Mysteries of HTML Revealed
As somebody in the design, development and programming fields, I can’t help but notice the misunderstanding average people have when it comes to various markup and programming languages. Of course, for those people who don’t work in these fields, a lack of understanding of them is completely understandable. It’s true that in recent years, people have a clearer understanding of what goes into development than before, usually knowing what a programming language is when they see one, despite not understanding what the language actually says.
However, something I feel that needs to be clarified is the very important distinction of markup languages like HTML and CSS versus programming languages like JavaScript or PHP. While they serve similar purposes and that their logical instructions that the find an output from the computer, their actual purpose and nature are very different, and to have a responsive, cohesive website, you can’t have one without the other. Today, let’s take a look at what HTML and CSS are, what role they play in a complete website experience, and a little bit on how they actually work.
While most programming languages look like some sort of Eldridge, arcane script to the uninitiated, HTML is actually pretty straightforward once you understand things like tags and parameters. Don’t worry, we’ll get into what those exactly are in due time.
What HTML Is
HTML stands for hypertext markup language, and for lack of better terms, it’s the skeleton of the website. HTML defines tables, regions, embedded images, text, etc. which are then interpreted by the browser into a coherent, organized document. Another way to look at it is to think of it as the basic blueprints for the website.
When the browser receives HTML, it converts it into what is essentially a formatted document. None of the HTML code itself produces the effects such as animations, application style interfaces, or anything else interactive or deeply logical. Those functions are relegated to actual programming languages such as JavaScript. As we will see shortly, a new version of HTML called HTML 5 actually merges the two into a singular entity, but let’s not worry about that just now.
Understanding Markup Languages
Essentially, markup languages are formatting guidelines. This is comparable to handwriting a letter, which you then give to someone versed in digital document composition. While you may have space things logically in your letter, you had no way of providing specific font styles, margin sizes, caller information or the like.
The person composing the document, therefore, will have to use their best estimates as to how you want it presented unless you provide a series of footnotes and marks commenting on how you wish things to be formatted.
This is the job of markup languages like HTML.
HTML tells the browser to place things inside tables, to do certain font faces and styles, to include certain images in certain places, etc. Otherwise, without any sort of structure like this, it would just be a massive wall of text and images placed haphazardly.
All About Tags
So, how does HTML work? Well, it can get complex when you’re doing intricate things, but it all boils down to a system called tags. These are a series of enclosures around bodies of text that provide information such as font styles, encapsulation for tables, etc.
Not unlike handling mathematical operations inside nested parentheses, tags are read from the inside outward, for the most part, allowing them to be nested and structured.
Below is an example of a sentence containing regular, bold, and italic styles provided by these tags:
This is plain text, <b>but this is bold</b>, and <i>and this is italic</i>.
As we see, tags begin with enclosing a particular command and greater/less than symbols, and we close them similarly but proceeding the command with a backslash. This is how all tags work in HTML, though they can get a little more advanced. Not all tags directly formatted text, with some providing information to include things in tables, etc. as well as providing things like hyperlinks, image embeds and so forth. Below are a few more examples of how this works:
<a href=”http://mywebsite.com>This is a link</a> – a hyperlink.
<p>This is a paragraph</p> – providing paragraph spacing and indentation.
You may notice that the first one in these examples has more than just a single word or letter in the beginning tag. This happens sometimes in HTML, where some more advanced tags accept parameters, also known as attributes.
Intended Simplicity
HTML, once you know what a multitude of the tags do, and what attributes provide, can be used to provide a relatively decent looking if less than responsive web design. It’s intended to be simple, and rather limited. This is to make it easily compliance with every type of browser, and every platform. This also makes it easy to apply more sophisticated programming through JavaScript, and have it work uniformly.
Of course, you can achieve quite a bit more with CSS to accompany your HTML, just as far as aesthetics go.
CSS: Adding Style
CSS stands for cascading style sheet and is a companion markup language that contains style information for your website. This can include fonts, backgrounds, colors, and a whole host of other style data.
While pretty much all of this data can be coded directly into HTML, the advantages of using CSS are multitude. For one, this allows you to provide a block of code with a name, which contains a specific stylistic theme. When various aspects of the webpage all use this particular theme, they can all be pointed directly to this named block, ergo it’s not repeated ad infinitum in the HTML every time it’s needed.
This also makes it easy to cycle through styles, make stylistic changes without having to rewrite HTML, or even go the full nine yards and allow users to specify their own theme of choice when they visit your site. CSS is a little more obtuse than HTML, as far as human readability goes. However, it’s still pretty straightforward.
HTML 5
So, you may remember that I mentioned earlier that generally, HTML and more interactive languages like JavaScript are separate entities. This is the case, but the newest version of HTML, HTML 5, merges them together.
This allows for both the skeletal markup and the personality of the page to be done in a single, integrated document, basically developing a browser app as a result. The downside to this is, to get the most out of HTML 5, you do indeed need to have some programming understanding on top of being able to work with the HTML markup script. It’s not hard to learn, at least for simple, essential things, but for those that are interested in contending with the logic behind a serious programming language, this may be a bit of an endurance test to get around.
HTML and CSS are the fundamental skeletal and aesthetic structure of any webpage, no matter who built it, or how it was built. They are very easy, very human-readable languages, and you can become more or less fluent in them after a day of reading. If you like to learn more about HTML, CSS, and HTML5, fill out the contact form below.
