HTML, CSS, and JavaScript

What's the difference?

HTML, CSS, and JavaScript are all languages that do different things, but together, they create interactive, styled webpages.

---

HTML - The Structure

It tells your browser which information goes into which container.

HTML stands for HyperText Markup Language. “Markup language” means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage. (source)

Say you have an article that you want to post to the web. Suppose this article has the following elements: a title, an author, a date, and content. The resulting HTML sans data might be:

<div class="article">
  <h2 class="article-title"></h2>
  <div class="article-metadata">
    <span class="article-metadata-author"></span>
    <span class="article-metadata-date"></span>
  </div>
  <div class="article-content"></div>
</div>

It is clear which elements should contain what information about the article.

HTML files do not usually specify how elements are visually presented; CSS usually does that task.

(to be included: html syntax basics)

---

CSS - The Style

It tells your browser how the content is visually presented.

CSS can control anything about an individual element’s appearance, such as its border, margin, and padding, font, color, and size.

* {
  margin: 0px;
  padding: 0px;
}

.article {
  width: 850px;
  border: solid 1px silver;
}

h2 {
  text-decoration: underline;
  line-height: 1.62;
}

.article-title {
  color: blue;
}

(to be included: css syntax basics)

CSS can be written into a .css file dedicated to storing only CSS code or embedded directly into an HTML <style> element.

Remnants of CSS syntax can be found in values for style attributes in HTML elements:
<p style="color: silver">This is silver text</p>.
Note that only color: silver in the example above is using CSS syntax.

JavaScript can change the styles of HTML elements by using a slightly different syntax:
element.style.color.

The following line of code will change the style of all p elements for a page:
for(let e of Array.from(document.getElementsByTagName("p"))) { e.style.color = "silver"; }.

---

JavaScript - The Manipulator

It tells your browser to do stuff.

JavaScript is a programming language that your web browser can interpret. It can tell your browser how elements on the webpage should behave (such as submitting a form when you click a button, filling in blanks with new information when the page has loaded, or validating input while you type).

const ARTICLE_LIMIT = 10;

function updateArticles(relatedTags) {
  var articleContainers = document.getElementsByClassName("article");
  
  var relatedArticles = findRelatedArticlesFromTags(relatedTags, ARTICLE_LIMIT);
  
  for (var i = 0; i < articlesContainers.length; i++) {
    if (i > ARTICLE_LIMIT || i > relatedArticles.length) { break; }
    updateArticleContainer(articleContainers[i], relatedArticles[i]);
  }
}

function updateArticleContainer(dst, src) {
  dst.getElementsByClassName("article-title")[0].innerText = src.title;
  dst.getElementsByClassName("article-content")[0].innerText = src.content;
  dst.getElementsByClassName("article-metadata-author")[0].innerText = src.author;
  dst.getElementsByClassName("article-metadata-date")[0].innerText = src.date;
}

---

For a more details and examples, this blog post is a good resource to start at.