Websites are built using lines upon lines of code. It can be as simple or complex as the developer chooses to make it, but the code, at the end of the day, is really only a bunch of text. But, when you look at a website as an end user, you don’t see all that code. What you see is a collection of carefully-arranged text, images, video, interactive fields, and more. Do you ever stop to wonder how a website goes from dull pages with nothing but these ongoing lines of code to the finished product that appears live on the web? The framework upon which the web is HTML (HyperText Markup Language) and CSS (cascading style sheets).
These are both basic markup languages which inform browsers how to display websites. In essence, HTML provides the basic structure for a site and CSS is used to enhance the style of the HTML elements. For example, CSS would be used to change things like font types, colors or spacing in a section of text. You can think of CSS as being the icing on the cake.
How Browsers Read Code
HTML uses different tags, known as elements, to instruct browsers how to display information. These are, for the most part, fairly self-explanatory and easy to decipher when reading through raw code. For example, if you wanted to break a block of text into paragraphs, you could do so using the “p” elements to designate beginnings and endings to the your paragraph(s). You can also use “table” elements to display information in a table. To ensure that browsers fully understand what is being requested of them, it’s important to open and close HTML elements properly. To apply CSS, you simply designate a particular area (either through in-line CSS or scripts) and indicate the style elements that you’d wish to implement.
Each web browser is built slightly differently, but they all read HTML and CSS pretty much the same way. It all starts by identifying elements, such as headings, paragraphs and images, and then following HTML prompts that indicate how these will be paid out on a page. Then the CSS elements are applied to this equation to make sure that these webpage components are all appearing the way the developer intended. The end product is what you see as an end user. Pretty cool, right?
WYSIWYG Editors
Today, there are many WYSIWYG (What You See Is What You Get) editors out there, that will allow anyone to create their own webpages without any coding whatsoever. These editors use drag and drop technology to make inserting and styling elements easier than ever before. The problem with this is that the changes made by the end user all manipulate the code that is automatically being generated on the back end of these sites. And that code can get ugly fast! There’s nothing wrong with using WYSIWYG editors to simplify and expedite the development process, but we highly recommend reviewing the HTML and CSS behind the finished created by one of these editors.
Code: the Framework for Sharing Information Online
HTML, CSS and other coding & markup languages (such as Java, Ruby javascript, and PHP) provide the base framework for how information is shared online. They not only align and stylize the information we want to display into a certain pattern or form, but some of these languages actually allow developers to share information dynamically by displaying unique messages according to different variables. The web is getting smarter!
But it all starts with HTML. HTML was the programming language the internet was built on and even though the capabilities have grown to unimaginable heights in today’s world, it is still the backbone that powers the information shared across the web.
