Markup Language?
Markup languages use tags to define elements within a digital document. Tags are in and out marks that “wrap” a text element, e.g., a title, header, single word, paragraph, etc. Below is a very simplistic example of text marked up using HTML (Hypertext Markup Language):
<h1>Their Eyes are Watching God</h1>
<p><em>Their Eyes are Watching God</em> was written by Zora Neale Hurston in 1937.</p>
The <h1> tags mark the title as a header. The <p> tags mark the sentence as a paragraph or a general body of text. The <em> tags mark the title as italicized. Having added these tags, the HTML document when opened in a web browser will look like the following:
Their Eyes are Watching God
Their Eyes are Watching God was written by Zora Neale Hurston in 1937.
There are other markup languages, including XML, which is used for encoding texts and employs a number of different standards and schemas. For example, Textual Encoding Initiative (TEI) is an XML standard used for encoding literary texts, historical documents, and the like. Scholars apply it to markup texts with all kinds of meaning, including metadata about a text’s creator, publisher, and publication date. The more meaningful, scholarly, and just plain interesting aspects of TEI involve marking up texts with tags that illustrate aspects like differences between editions of a text and communicate things like features of a text’s physicality, e.g., tags that mark handwritten marginalia. Dr. Shepherd, professor of English here at LMU, is a contributor to a TEI project that is working on creating critical editions of Piers Plowman, a medieval poem. The project allows visitors to explore three distinct versions of the poem found in multiple manuscripts (read more). To learn more about TEI, take a look at a page from Piers Plowman and then look at the “behind the scenes” mark up and XML document for that page.
Markup languages are “machine-readable” as well as “human-readable,” which is to say that machines—computers, web browsers, etc. — can read and interpret them while we humans too can scan them with our eyes and understand them. This is different from programming languages, which are machine-readable, and only readable to those humans who code.
What are programming languages?
Programming languages are standardized and formal languages that instruct computers (a laptop, a video game console, a smartphone, etc.) to produce an output. Examples of programming languages include SQL, PHP, and Python. Despite looking so foreign, programming languages function like languages as we understand them—English, Spanish, Chinese—and, just like such languages, use a combination of syntax (structure) and semantics (meaning).
Take a tour of Python syntax and semantics if you are interested in learning more about how a programming language works.
What is coding?
Coding, also known as programming, is the act of writing in a programming language. Because programming languages are languages, the act of coding can be creative and nuanced and can involve interpretation and problem-solving. It is important to keep in mind that the term “coding” is used in a lot of different contexts. For example, social scientists code data, which involves the categorization of data before its analysis, has nothing to do with programming languages.
What is HTML?
HTML (Hypertext Markup Language) is a standard markup language used for creating webpage content, e.g., adding text and images to a web page. An HTML document has the following basic structure and tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of page goes here.</title>
</head>
<body>
The content of the document goes here.
</body>
<footer>
Sometimes there is a footer.
</footer>
</html>
Notice the head, body, and footer structure? The head is where things like code, CSS, and metadata go. Imagine these things as being like thoughts. They affect the whole page, e.g., the functionality of the page, but people visiting the page do not see them. The body is what is seen, and it is where the content goes, e.g., text, images, videos, and audio clips. The footer is where basic foundational information goes, e.g., the name and contact information of the site’s creator, links to specific information in the website, and copyright information. The LMU website has a very extensive footer. (It’s everything in the gray box at the bottom of the page.)
An important aspect of HTML is its use of hierarchy. In the case of header tags, e.g., <h1>, you will notice they are numbered. The differences in the numbers indicate where the header falls in a hierarchy. (Headers also work like this in Microsoft Word and other word processing applications.)
<h1>Largest Header</h1>
<h2> Second Largest Header</h2>
<h3>Third Largest Header</h3>
<p>general text</p>
Why does this matter? The use of hierarchies helps structure and organize web pages so that they are more easily readable and navigable. Hierarchies also help search engines like Google crawl (navigate/explore) and index (record/catalog) a website’s content. Thus, how you structure and organize a website as a whole, and on individual pages, impacts the readability to users and discoverability by search engines.
Visit w3schools if you are interested in learning more about HTML.
What is CSS?
CSS (Cascading Style Sheets) is used to add styles to HTML documents. Essentially, CSS tells HTML how it should look. Here is a little bit of simple CSS:
body {
background-color: #000000;
}
h1 {
color: #ffffff;
font-family: Arial;
text-align: center;
}
h2 {
color: #ffffff;
font-family: Arial;
text-align: left;
}
p {
font-family: Arial;
font-size: 18px;
}
Each CSS element, e.g., “body” and “h1,” align with HTML tags, e.g., <body> and <h1>. This particular CSS is telling the HTML doc that the page (body) background is black; the top (or biggest) header is white, centered and in Arial font; that the second biggest header is also white and Arial font and is positioned on the left side of the page; and that the paragraph or general text is Arial font and has been set to a particular font size of 18 pixels (“px”). CSS can be placed in a separate file and be linked to from an HTML doc; it can be placed within the header of an HTML doc, and it can be placed within an HTML tag. Why you would put it in one place or the other depends on what you are trying to achieve. If you want a style to apply across your whole website, you definitely want to create a separate CSS doc that can be linked to all of the HTML pages. This way, when you make a change to the CSS, it will affect the entire site globally, and you won’t have to make changes to each individual page. There are times, however, when you might want to make a simple change to a single HTML tag, and it might just be easier or more logical to add CSS to that tag.
What is JavaScript?
JavaScript is a scripting language that is often considered to be a programming language subset. It is used in website creation (web development) to add behaviors and interactivity to web pages. There are different JavaScript libraries, e.g., jQuery, which make JavaScript easier to use. These libraries, which use a slightly different syntax, allow developers to write in a shortened JavaScript code. Why should I bother explaining libraries? Because you might hear “jQuery” or “Bootstrap” and not realize it is JavaScript. JavaScript uses “functions” to provide specific operations. Here is a simple function that creates a small window that pops up and says, “Hello, world!”:
function sayHi() {
alert( “Hello, world!” );
}
The following video provides a quick overview of JavaScript and how it works with HTML and CSS: