Practical advice for website owners: terminology

If you’re going to have a website it’s probably a good idea to have some basic knowledge about what makes up a website. Most people have ideas about what their websites should ‘look like’ and what they should ’do’. Not so many have any idea what makes their websites work. This short article provides practical advice for website owners.

The thing is, with a little foreknowledge you’ll prepare better content, you’ll get better research in search, and you’ll communicate more effectively with your designer/developer.

Every website uses three core languages: HTML, CSS, and Javascript. It doesn’t matter if the site is hand-coded, built with a framework, created with a content management system like WordPress, or output via a web interface like Squarespace: at the end of the day the pages will always display using HTML, CSS, and Javascript.

To insure reliable performance across the web, these languages are governed by fundamental and highly evolved standards, affecting  not only the accurate display of what’s intended, but also key technical, usability and performance indicators such as  page loading time, appropriate display on phones, tablets, laptops and larger screens, accessibility, search engine results and AI performance.

Here’s a quick 3-part review of the three languages, along with (very sketchy) examples of what the code looks like, and a short bonus section talking about additional skills and techniques that your designer/developer (me) brings to the party.

HTML

HTML (Hypertext Markup Language) provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.

Here’s an excerpt of the code that produces the title and portions of the text above.

<html>
<h1>What makes a website?</h1>	
<p>If you’re going to have a website ... Most people have ideas ... etc.</p>
<p>... skills and techniques that your designer (me) brings to the party.</p>
<h2>HTML</h2>
<p><strong>HTML</strong> provides the <em>basic structure</em> of sites, which is enhanced and modified by other technologies like CSS and JavaScript.</p>
</html>

Used correctly, HTML structures the semantics, or logical meaning, of the content rather than its appearance. Semantic markup (the code) conveys the hierarchy of your content and how both users and machines will read it. Semantically correct HTML is critical for accessibility and SEO.

Brevity has an excellent article on semantic HTML.

CSS

CSS (Cascading Style Sheets) is used to control presentation, formatting, and layout.

For example, the title and the body text on this page are styled with this CSS:

@charset "UTF-8";
h1, h2, {font-family: sans-serif;}
h1 {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem;}
h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem; }

CSS is designed to enable the separation of presentation and content, including layout, colours and fonts. This separation can improve content accessibility, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

The Wikipedia article on CSS is a good resource if you want to know more.

Javascript

JavaScript is used to control the behavior of different elements.

If there were animation on this page, the code to control it would include lines like these:

element.addClass(animation).css('transition', 'none');

requestAnimationFrame(function () {
 element.addClass(initClass);
      if (isIn) element.show();
    });

    // Start the animation
    requestAnimationFrame(function () {
      element[0].offsetWidth;
      element.css('transition', '').addClass(activeClass);
    });
    element.one(Foundation.transitionend(element), finish);

I find Javascript to be the most challenging of the three languages. Mozilla has a great article. I love the title, “What is JavaScript, really?”

Putting it together

All websites, made by hand coding or via various content management and drag-and-drop systems produce, at minimum, these three kinds of code. It’s your designer’s responsibility to know their way around these core disciplines.

Extras

A good designer/developer will also be able to advise and assist you with ‘extras’ like these:

Design, Writing, Research, Security, Performance, Image and Video Editing, On-call Availability, SEO, Hosting Advice

You’ll find more practical advice for website owners over on my blog page.

Further reference

Thanks to Chris Coyler for spelling this out so clearly in a recent talk.

See also: