What are HTML and CSS? Are they even programming languages?

http://graphicdesignjunction.com/2013/01/html5-css3-tutorials/

What is HTML?

HTML or HyperText Markup Language is a markup language created by Tim Berners-Lee in the year 1991. After 1991, there were various versions of HTML being developed. During this time, besides the change of versions, the publishers have also changed. On May 28th in 2019, Web Hypertext Application Technology Working Group (WHATWG) became the HTML publisher.

The latest release of HTML is the Living Standard version published by WHATWG. According to the official WHATWG website, the HTML’s Living Standard was last updated on November 20th in 2020.

HTML files have the extension of .html and .htm, containing the structure of a web page. HTML files are text-based and designed to be analyzed and rendered by a web browser.

With the use of CSS and JavaScript, it is possible to create appealing and interactive websites.

What is CSS?

Several years after HTML became a thing, the co-worker of HTML’s author has proposed CSS or Cascading Style Sheets. It was proposed by Hakon Wium Lie on October 10 of 1994 to style the content shown in a web browser. After several years of work, Hakon Wium Lie and Bert Bos released CSS1 in 1996.

Though stylesheets like DSSSL and FOSI were existing, CSS was a winner because of its ability to “cascade” the styles. According to MDN’s definition of the word cascade, it “is an algorithm that defines how to combine property values originating from different sources.” Thus said, it can rank style definitions based on the source type.

The latest release of CSS is version 3, published by CSS Working Group (CSSWG). CSS files have only one extension, which is .css. Like HTML files, CSS files are text-based and are designed to be analyzed by a web browser. Instead of displaying content, they are used to change existing content created from HTML files.

Are HTML and CSS considered programming languages?

There are many programming languages, such as C, C++, Java, Python, etc. But does HTML and CSS considered programming languages? The answer is yes and no.

On the one hand, a markup language is a document annotation that is different from the text and not a formal language that contains a set of instructions used to produce various kinds of output. But on the other hand, a markup language is Turing complete, which means that it has certain rules that can be recognized and interpreted by a computer. This means that you can side with either position and be correct!

Why should you learn HTML and CSS?

Besides being able to create websites, HTML and CSS also helpful because:

- They equip you with basics and help you learn more advanced programming languages easier.

- The knowledge of these languages is essential not only for web developers but also for marketing specialists, designers, content creators, etc. Because “these jobs frequently require you to optimize landing pages and web pages” (HyperionDev).

- These languages can help you by enhancing your emails. Besides sending regular emails with boring text, you can use HTML and CSS to send someone an email looking like a website.

Common Editors

Since HTML and CSS are text-based files, you can view these files without any special programs. You can even use Windows’ Notepad or TextEdit if you are a Mac user. And though these programs can open markup and stylesheet files, they lack some of the most important features.

One of the features being code listing, and another feature is syntax highlighting. These two tools are handy when you need to find an issue in your code. Here are some great editors who are equipped with code linting, syntax highlighting, and more:

VS Code

VS Code or Visual Studio Code is a free code editor developed by Microsoft and is available to download for Windows, Linux, and macOS. According to the official VS Code’s GitHub page, the program is built using TypeScript, JavaScript, and CSS. Some default tools available upon installation include debugging, syntax highlighting, intelligent code completion, and more.

In addition to the variety of available tools, users can also change themes, keyboard shortcuts and manage extensions that add additional functionality to the editor. One of the popular extensions for web developers is Live Server, allowing an automatic browser refresh after applying changes to the code. Another popular extension is Prettier that formats the code upon saving.

Brackets

Brackets is a free and open-source code editor developed and maintained by Adobe Systems. It is available to download for Windows, Linux, and macOS. Based on the official Bracket’s GitHub page, the program is built using JavaScript, HTML, and CSS.

Besides code linting and syntax highlighting, Brackets also provides a Live Preview feature out of the box. Live Preview allows the developer to see changes done to the file in the browser without needing to refresh the page.

Since HTML and CSS can run in the browser, there are also some editors available online without the need for any downloads, such as:

CodePen

CodePen is an online code editor founded in 2012 by Alex Vazquez, Tim Sabat, and Chris Coyier. It acts as an online platform that allows users to create and showcase their HTML, CSS, and JavaScript. Besides supporting standard HTML, CSS, and JS, it also supports various preprocessors such as Pug, SCSS, jQuery, etc. It also automatically updates the output as a developer applying changes to his/her code.

What should every HTML file have?

HTML uses tags in its code to help browsers output the content in a certain way. There are two types of tags, an opening tag and a closing tag. The opening tag is presented by a less than sign, followed by the name of the tag, and ending with a greater than sign (For example: “<p>”). The closing tag is similar to an opening tag but has a forward slash after a less than sign (For example: “</p>”).

All of the tags are considered optional and are based on the needs of the website. So, even if you open an empty HTML file in a browser, the browser would not show any error. But there are certain tags required for a browser to know exactly what you are trying to accomplish. These include:

Document Type Definition

A Document Type Definition or DTD is a tag that “defines the structure and the legal element and attributes of an XML document” (w3schools). In other words, since there are various versions of HTML, DTD is used to tell the browser which version to use. To use the latest version of HTML, <!DOCTYPE html> should be appended to the top of the file. The DTD is one of the tags which only has an opening tag.

HTML Tag

After telling a browser the HTML version being used, HTML's opening and closing tags are coming afterward. The HTML tag is used to wrap all of the content and information about a website.

Head Tag

Inside of HTML's tag, first goes the head tag. Head tag is used to store all of the information about the website, such as keywords, authors, descriptions, etc. Search engines are using that information to let the user find your website.

Title Tag

One of the information head tags holds the title of a website. The content being placed inside of a title tag will be shown in the browser’s title bar and as the name of a tab. Search engines also use it to find your website after uploading it on the server.

Body Tag

After the head tag goes to the body tag, the body tag is used to hold all of the content that appears in a browser window. All of the text, buttons, images you see when you open a website are stored in the body tag.

HTML Content

There are a variety of tags available that display the content in the browser window. Besides, it is not required to be placed in a particular order, nor limitations on how many times each tag could be used. There is only one requirement: to place the tags that display content inside a body tag. Some of the basic HTML tags include:

Headings

HTML provides six types of headings, each having a slight difference in a default font size. In addition to changing the font size of the text wrapped by heading tags, it also makes the content bold by default.

All heading tag names begin with the letter “h” and proceed with the number, 1 being the largest heading and 6 being the smallest. For example, an opening tag <h1> and a closing tag </h1> would output the largest (or the main) heading. Heading tags can contain either plain text or other tags, such as an anchor tag described later.

Paragraphs

Besides headings, HTML also has a paragraph tag which is used to wrap large chunks of text. Compared to six different heading tags, only one paragraph tag is named “p.”

Anchors

In contrast to the previous tags described, anchor tags also add a click functionality to the content. When an anchor tag is clicked, it can direct a user to another page. Anchor tags are named with the letter “a” and require at least one additional piece of information.

The information anchor tags link to the page a user will be redirected to after clicking the tag’s content. To provide this information, the developer must enter a space in the opening tag, followed by src=””, with a link being placed between “”. For example, <a src=”https://google.com”></a> would direct a user to “https://google.com” after clicking an anchor.

Images

As the DTD tag only has an opening tag, an image tag also does not have a closing tag.

The name of an image tag is “img” It also requires additional information like an anchor tag. After the name in the opening tag, the developer must insert a space, with src=’’’ followed having a link to the image in between “”. <img src=”https://www.w3schools.com/tags/img_girl.jpg”> would output this image.

Link CSS to HTML

Default HTML styles provided by the browser are fine but aren’t enough for nowadays. Besides exclusively providing some content to a user, it is also required to be appealing, and that’s where CSS comes in. There are three ways to include CSS code on your website, which are:

Inline Method

The inline method is one of the simplest ways of styling HTML elements. To apply the style, it is required to enter a space before greater than the sign of the tag, followed by style=”” with the CSS properties and their definitions placed between “”.

Embedded Method

Even though an inline method could be the simplest way of adding styles, it might get too cluttered. Plus, it is not an ideal choice when you try to add the same styles to all tags with the same name. To use the embedded method, it is required to place the styles inside a tag named “style.” The tag should be located inside <head></head>.

To apply styles using an embedded method, it should first declare the tag being modified. To do so, the name of the tag should be placed, followed by curly braces. Curly braces should contain CSS properties and their definitions as in the inline method. An example is shown below:

External Method

The final method is using an external file. It is commonly used since it separates HTML’s code from CSS’s code. To use this method, there should be several things done.

First, there should be another file with a .css extension that contains the styles like in the embedded method. Second, the CSS file should be linked using <link rel=”stylesheet” href=””> tag, with CSS file’s path inside “” after “href=”.

Basic CSS

As mentioned earlier, to modify the element's style, the CSS property and definition should be used. Properties and their definition need to be inserted either between “” using an inline method or between curly braces for the other two.

One of the common CSS properties is “color,” which is used to change the color of the text. The possible definitions include, but are not limited to red, blue, green, etc.

To write the pairs, first should go the property name, in this case, “color”. The property name needs to be followed by colon (:) and the definition of the property, such as “blue”. The pair should end with a semicolon (;). The outcome should be “color: blue;”.

Besides a color property, the background-color also takes in the name of the color. Other CSS properties like height, width, padding, margin take in a numerical value followed by the type of measurement. The most common measurement type used is pixels, labeled as “px”.

Further Learning

There are many other HTML tags and CSS properties with their possible definitions. Most of them could be found on websites like w3schools or MDN.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Visualwebz

Visualwebz

118 Followers

A Seattle web design and online marketing agency that delivers high-end websites. A passion for web development and SEO.