How to Decode Web Design Language for Marketing Mortals

Hartley Brody
Hartley Brody

Updated:

Published:

marketing html css javascript Talking to your web designer can be a daunting task for many marketers. Many times, you walk away completely clueless about what just happened or you've had to ask so many questions that everyone ends up getting frustrated.

Sometimes you simply try your best to follow along, but then you aren’t completely satisfied with the resulting product. It’s time to put an end to all the madness! Below you’ll learn the three basics building blocks of all websites so you can be well on your way to understanding the technical aspects of your website. Armed with this knowledge, you’ll be able to finally understand and communicate with your website designer so future website projects turn out just like you want them to.

1. HTML: Website Structure

html Right click on the page you’re currently reading, and click “View Source Code” or “View (Page) Source.” You’ll probably see a jumbled mess of < and > signs and strange words that you don’t understand. If you scan carefully, you’ll be able to read the text of this blog post part of the way down, but it’ll be broken up with strange tags. Those tags are HTML.

HTML stands for “Hyper Text Markup Language,” which might sound daunting at first, but essentially it’s just a system for giving meaning to the content on your website. HTML is used to structure the content in a web page.

It defines things like “this section is the sidebar” or “this text is a list” or “this word is a link.” With HTML, all of that jumbled text comes together into a nicely structured, finished web page. But while HTML gives your content structure, it does not specify how that content should actually appear on the web page. That is a tricky thing for a lot of people to wrap their heads around. But by saying “this is a link” or “this is my sidebar,” you’re not actually specifying how those things should look. After all, websites are infinitely customizable – the links on your website might look totally different than the links on another website.

Learn More About HTML: On any modern content management system (CMS), you won’t need to actually write the HTML to build your website – it’s generated automatically. But you’ll usually have the ability to add bits of custom HTML. For example, when you embed a YouTube video in a blog post, you’re working with raw HTML code. So while you may want to avoid jumping into the HTML of your website (leave it to the professionals!), you can still learn by playing around on HTML editors. That site has a great tutorial that’ll walk you through the basics and give you the opportunity to edit code right on their site so you can practice writing real HTML.

2. CSS: Website Appearance

The appearance of your website’s content is set using CSS, or “Cascading Style Sheets.” Using CSS, you can easily change the appearance of your website and makes changes that are site-wide. For example, on the HubSpot CMS , all blog article titles are automatically wrapped in H2 header tags (that’s HTML). If we decided we wanted to make our titles appear in a larger font, we could change the “font-size” property for all H2 tags in our site’s CSS, and the change would be site-wide automatically.

h2 tag resized 600

Sometimes as marketers, we’ll slap together a quick HTML hack (using inline styles) to force a page to look a certain way, but this is frowned upon in the web design community and generally a bad practice for your website. It creates a mess of code that’s hard to update and maintain, which isn’t good for your website in the long term.

Learn More About CSS: If you want to make aesthetic changes to your website, you should try learning some basic CSS. It’s very easy to get started, and it’s much simpler than programming. W3Schools, as mentioned above, can help you get started learning basic CSS .

CSS is usually defined in a separate file from the HTML of a given web page, so you’ll need to get access to your site’s CSS – usually called a “stylesheet” – if you want to make changes. Always remember to keep a backup copy of your site’s original CSS in case you accidentally goof something up and ruin your website! With great power, comes great responsibility.

3. Javascript: Website Behavior

With HTML and CSS, you can build out the structure of your page and define how that structure should look aesthetically. For a lot of websites, this is all you’ll need. But what if you want your site to actually do something, like pop up a message window when a visitor has been on your site for a certain amount of time or to confirm that a visitor actually wants to exit out of the page?

pop up window resized 600

The behavior of a website is generally defined using Javascript. Your website probably has Javascript on it without you even realizing; most web analytics use Javascript to track how long visitors stay on your site, where they’re coming from, and all sorts of other things.

Javascript is a full-on programming language, so it’ll take some time to learn and is probably best left to professional web developers. However, there are tons of great resources if you want to dive in and learn some Javascript.

Learn More About Javascript: If you’re really eager to actually learn Javascript, codecademy  is a great site for total beginners, which teaches you how to write code in Javascript.

In review, HTML is for structure and defines how your site is laid out; CSS is for appearance and defines how that layout will look to a visitor; and Javascript defines the behavior of your website. At advanced levels, these three languages can be very complex and should generally be left to professional web designers. However, a passing understanding will help you sort through the alphabet soup of buzzwords you’re likely to hear if you decide to work with a web designer.

Image credit:  Dmitry Baranovskiy

blog-cta-25-must-haves
Topics: Website Design

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Outline your company's marketing strategy in one simple, coherent plan.

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

START FREE OR GET A DEMO