My Intro to Markup and Typography for the Web

This week we covered an introduction to Typography, HTML, and the basics of CSS. I have had a little bit of previous experience with HTML from a class I took sophomore year. It made the assignments easier to understand because I recognized a lot of the tags we needed to use in the assignments. However, the instructions in the assignments and the linked resources were very helpful in providing me with a clearer understanding of each particular tag and their functions. I also really liked using Codepen because it allowed me to see what I was doing in real time. I remember getting really frustrated with the tools I had to use in the previous class I took, so Codepen definitely made working on these assignments a little bit easier for me.


Diving into the things we learned this past week, what exactly is typography? Typography is the technique of organizing and arranging text on a site in such a way that enables it to be efficiently legible, readable, and appealing when displayed to users. Typography involves selecting appropriate “typefaces, point size, line length, line-spacing, letter-spacing, and adjusting space within letters.”


HTML stands for “Hyper Text Markup Language.” It is a markup language used for building and describing web pages through the use of HTML tags. Each HTML tag describes the content within a particular web page and allows the browser to display the data properly. Tags can exist within tags but they must all be within opening and closing html tags:



In Assignments 4 and 5, we were introduced to the following tags: p, meta, div, header, h1, and section. The meta tag was one of the tags that I had completely forgotten about. From what I learned, metadata is information about data. The meta tag is used to provide metadata about the HTML document. It does not appear on the page, but is useful in order to specify and recognize page descriptions, keywords, author of the HTML document, and much more.


CSS stands for “Cascading Style Sheets.” CSS is a style sheet language used to describe the presentation of a document written in HTML. It describes how the HTML elements are to be displayed and controls the layout of a webpage by allowing you to style the content of these elements. For example, if you wanted to format the color and alignment of a heading in your HTML document, you would do it along the lines of something like this:

h1 {
 text-align: center;