What in the HTML? 🔧 A Beginners Guide to Markup and HTML
Did we just make our first webpage?
A Brief History
Markup systems and HTML were conceptualised by OG computer scientists, Timothy John Berners-Lee, and Robert Caillilau in the late 80's and early 90's. TJBL (or TimBL to his friends), along with Callilau, invented the Worldwide Wide Web. Fun fact: TimBL was knighted in 2004 by Queen E. More fun history here.
What is HTML?
HTML is an old-school internet behemoth 🦕 and the basis for almost every webpage online. HyperText Markup Language (HTML) is a descriptive markup language (sometimes referred to as logical markup or conceptual markup) that HTML documents are written in. The latest version is HTML5. Cue Marky Mark's 90's Good Vibrations.
Hypertext systems help us create multidimensional documents that allow for non-linear and non-sequential reading. These hypertext systems contain uni and bi-directional links to connect you to content within a document and to other documents entirely. I've already sent you to the Good Vibrations music video and back. 📼 And that's just the beginning of our HTML adventure. 🚶🏻♀️
But what in the what is Marky Markup? ✨
Markup is a type of text encoding that is used for labelling the structure of documents rather than codifying how a document should be processed. Essentially, it is a system for annotating documents in such a way that the annotated notes are distinguishable from text content.
The idea and terminology evolved from the "marking up" of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. In digital media this "blue pencil instruction text" was replaced by tags...Markup instructs the software that displays the text to carry out appropriate actions, but is omitted from the version of the text that users see. - Quoted from [J2EE](j2eeonline.com/xml-programming/module2/proc..)
And there are generally three categories of markup (Coombs et al., 1987):
Presentational Markup
Procedural Markup
Descriptive Markup
As described by Julia Flanders quoted directly from her UCLA lecture on Descriptive Markup, markup can be described as:
a way of formalizing and externalizing the structures in a text
a way of adding further information to the text that interests us
a meta-text that comments on, interprets, or extends the meaning a text
Well-known descriptive markup systems include HTML, LaTeX, and XML. We'll be focusing on HTML. 🌐
The objective in this kind of semantic markup is to decouple the structure of a document from the processing, styling and rendering of it. If you're a newbie like me you would likely have just learned very crudely that the structure of a webpage, written in HTML, is separate or decoupled from how the content of that webpage is styled in CSS (Cascading Style Sheets). This is the magic of Markup at work. 🧙🏿♂️
An Example of Descriptive Markup in HTML 🖊️
Let's look at HTML's <cite> tag, which is used to label a citation.
Hold up, lady! What in the what is a tag? 🚩
Attributes (more on this later) and tags work together to form the basis of HTML. An HTML tag is a container for HTML elements (content or components in an HTML document). Tags "mark up" the beginning and end of HTML elements through the use of angle brackets. Despite a few exceptions, tags need to be opened <> and closed </>.
An example: The Header tag <h1>
Header tags are used to note headings, of varying sizes, in a document. Header* tags can be used from <h1> (biggest) through to <h6> (smallest).
<h1>Mark Robert Michael Wahlberg</h1>
renders as:
Mark Robert Michael Wahlberg
Donald Edmond Wahlberg Jr.
Donald Edmond Wahlberg Jr.
*header size does not indicate that Marky is in anyway a bigger deal than Donnie. Donnie was incredible in The Sixth Sense. #GameNight 🎲
What are HTML Attributes? 🕹️
Tags are a kind of container but attributes specify additional information inside tags. Attributes basically specify additional values that enable us to configure and change our HTML elements. Here is a Monster List of HTML attributes for you to browse through. 🦊
An example: The Image Source attribute <img src> 📸
The image tag <img> allows you to insert images into a webpage. But the purpose of the src attribute here is to specify a URL from an external file.
<img src="https://i.scdn.co/image/ab67616d0000b27357cbec5e7b8768b363965541"
alt="Music for the People album cover.">
In this epic album cover, the image source src and the alt text alt are attributes of the <img> tag. And this line of HTML will display the album cover below:
Back to our <cite> Tag Example
The <cite> tag is used to define the title of a creative work (e.g. a song, a poem, a book, a painting, a performance, a movie or a sculpture, etc.) and the text within the <cite> tag is usually rendered in italic.
<p><cite>Good Vibrations</cite> by Marky Mark and the Funky Bunch. Released in July 1991 as the lead single from their debut album <cite>Music for the People.</cite></p>
will render as:
Good Vibrations by Marky Mark and the Funky Bunch. Released in July 1991 as the lead single from their debut album Music for the People.
- Rather than describing this groundbreaking creative work visually, you can see here that this descriptive markup describes this content conceptually noting that both Good Vibrations and Music for the People are citations. 💪🏽
Now we are getting way too conceptual about 90's rap and I've taken this Marky Mark thing too far already. Let's head on down to Pawnee! 🌽
Side Note: Markup-ception 💭
In recent years, people have created lightweight markup languages to allow writers and coders to create formatted text via their web browsers. This HTML guide is written in Markdown on Hashnode. Other random examples are BBCode, WikiText, and Textile.
If you want to learn to write Markdown, here is a simple Markdown tutorial by Garen Torikian. This got me started. 🕸️ You can even get Grammarly to work in VS Code thanks to the genius of Rahul Kadyan's open-source extension.
Breaking down the Basic Layout of an HTML Page
Now that we have some understanding of markup, HTML, tags, and attributes, let's explore how an HTML document is structured.
BEHOLD! The Outline of an HTML Document 🧱
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading. Remember Mark vs. Donnie</h1>
<p>This is a paragraph.</p>
</body>
</html>
A. The DOCTYPE Declaration ❗
<!DOCTYPE html> is not a tag but a declaration to your web browser about what kind of document type it should expect. In this case HTML5. Note that DOCTYPE is not case sensitive. You could write it like <!DoCTYpe html> if you wanted to fly your freak flag.
B. The Language Attribute 🎤
<html lang="en"> is a language attribute inside an HTML tag that simply tells your browser and search engine what language your page's content or a specific HTML element is in. In this case English. lang is a global attribute where the default value is unknown so its important to set it. This is not just for the browser but for general accessibility.
C. The Head Tag <head>...</head> 🤯
The <head> tag contains machine-readable information or metadata, and can hold other head elements such as <meta>, <title>, <style>, and <link> to name a few. Previously mandatory but can be omitted now in HTML5.
D. The Title <title>...</title> 📕
The <title> element only contains text and defines the HTML document's title. This title appears in a browser's title bar or a page's tab.
E. The Body <body>...</body> 🏃🏽♀️
The <body> tag simply defines the document body and contains the main content in an HTML document. The <body> contains all the things: headings, paragraphs, images, lists, tables, hyperlinks, etc.
Some Essential HTML Tags and Attributes 🌟
#ParksandRec Themed 🌳
We've already seen how header tags <h1>, citation tags <cite>, and image tags <img> are used. Let's check out some of the other top HTML tags and attributes:
1. Paragraph <p> 📝
The paragraph tag simply denotes HTML elements and content that form their own paragraph. To make text easier to read, browsers insert blank spaces between paragraphs.
<p>The Parks and Recreation Department of Pawnee oversees parks and recreational public works.</p>
<p>Pawnee's twin town is Eagleton, Indiana, a smaller but wealthier adjacent community.</p>
simply renders as text with separate paragraphs:
The Parks and Recreation Department of Pawnee oversees parks and recreational public works.
Pawnee's twin town is Eagleton, Indiana, a smaller but wealthier adjacent community.
Too easy? Well move along then.
`, ``, and ``💃
Making an impression is easy with HTML. You can apply more than one tag too! Use:
Italic <i> or Emphasis <em>
Bold <b> or Strong <strong>
Strikeout <strike>
<p><em>Get on</em> your feet!</p>
<p><b>Get up</b> and <i><strong>make it happen!</strong></i></p>
<p><em>Get on your feet!</em></p>
<p><strong>Get up</strong> and <strike>make it happen!</strike> slip across the ice!</p>
renders as:
Get on your feet!
Get up and make it happen!
Get on your feet!
Get up and make it happen! slip across the ice!
___ ### 3. Unordered Lists `
` 🧇 Don't mind in which order you eat your breakfast? The `
` tag doesn't mind either. `
` is simply a list item in bulleted list. ```
Waffles
Coffee
Cream
Eggs
Bacon
```
renders as:
Waffles
Coffee
Cream
Eggs
Bacon
___ ### 4. Ordered Lists `
` 🥓 Need your list to be ordered so you can note your top 3 breakfast foods? Well, `
` is as opinionated as you are!
<ol> <li>Bacon</li> <li>Bacon</li> <li>Bacon</li> </ol>renders as:
Bacon
Bacon
Bacon
___
5. Links: Anchor Tag <a> and the href= Attribute 🖱️
The Anchor Tag <a> creates a link to a target URL (stipulated by the user) which is used to link from one page to another. The Hypertext REFerence Attribute href= is an attribute of the Anchor Tag <a>, and determines the link address that links to a webpage or a section in the same HTML document.
The syntax is as follows: <a href="url">link text</a>. Here you can see it contains the URL or the target link as well as the anchor text which is the clickable link text that appears on the webpage.
# Link Syntax
<a href="url">link text</a>
# Example
<a href="https://www.youtube.com/watch?v=eey-wOyTOJs">The Best Parks and Rec Cold Opens</a>
Normally, a linked page will open in the browser window you're currently using. But I'm not sending you away just yet! To change this, we need to specify another target for our link.
The Target Attribute target="_value"🎯
The target= attribute specifies where to open your link and can have one of the values below:
`_blank` which opens the document in a new window.
`_parent` which opens the link in [the parent frame](stackoverflow.com/questions/18470097/differ..).
**`_self`** which opens the document in the window you are currently using. This is the **default value** if you don't set the value with the `target=` attribute.
`_top` which opens the link in the full body of a browser window
Now let's add the target= attribute with the "_blank" value.
# Link Syntax
<a href="url" target="_value">link text</a>
# Example
<a href="https://www.youtube.com/watch?v=eey-wOyTOJs" target="_blank">The Best Parks and Rec Cold Opens</a>
Now this fancy-shmancy code renders as the link below:
The Best Parks and Rec Cold Opens
___ ### 6. Blockquotes 🗣️
Blockquotes are quotes in blocks 😹. There's not much more to it.
<p>Here is a quote from "Li'l Sebastian's Memorial": </p>
<blockquote cite="https://parksandrecreation.fandom.com/wiki/Li%27l_Sebastian#Li.27l_Sebastian_Memorial">
"He was an animal, a legend, a friend.
He was our beacon of light. He was Pawnee's horse.
Li'l Sebastian, we miss you.
But we know you are in heaven, looking down on us,
doing your two favorite things: eating carrots and urinating freely.
So gallop on, Li'l Sebastian, in that big horsey ring in the sky."
</blockquote>
renders as:
Here is a quote from "Li'l Sebastian's Memorial":
"He was an animal, a legend, a friend. He was our beacon of light. He was Pawnee's horse. Li'l Sebastian, we miss you. But we know you are in heaven, looking down on us, doing your two favorite things: eating carrots and urinating freely. So gallop on, Li'l Sebastian, in that big horsey ring in the sky."
Bye bye, Li'l Sebastian 🦄
Putting it Altogether 🗺️
You're about to see a big chunk of code but there's nothing to worry about. We know exactly what all this code means. We've got this!
```
Parks and Rec HTML Extravaganza
Welcome to Pawnee
The Parks and Recreation Department of Pawnee oversees parks and recreational public works.
Pawnee's twin town is Eagleton, Indiana, a smaller but wealthier adjacent community.
Making an Impression
Get on your feet!
Get up and make it happen!
Get on your feet!
Get up and make it happen! slip across the ice!
The Importance of Breakfast Foods
What to order?
Waffles
Coffee
Cream
Eggs
Bacon
Breakfast Foods (in order of importance)
Bacon
Bacon
Bacon
Cold Opens Greatest Hits
The Best Parks and Rec Cold Opens
Bye, Bye Li'l Sebastian
Here is a quote from "Li'l Sebastian's Memorial":
"He was an animal, a legend, a friend. He was our beacon of light. He was Pawnee's horse. Li'l Sebastian, we miss you. But we know you are in heaven, looking down on us, doing your two favorite things: eating carrots and urinating freely. So gallop on, Li'l Sebastian, in that big horsey ring in the sky."
Follow me on Hashnode if you enjoyed this crazy ride! ```
Copy this code into your notepad, play around with the content, and save your .txt document as a .html file. Now all you have to do is open your HTML document in your web-browser and BOOM! 💥 You've created your first webpage. Boomshakalaka! 🚀🚀🚀
Well done! We've learnt the structure of an HTML document, a ton of new tags, and attributes! Yay us! You are sensational for getting this far! You should Treat Yo' Self!
___
Actual footage of you enjoying your Knighthood for completing this HTML crash course ⬇️
Now that you're and HTML whizz you can move on to <div>, <span>, <nav>, and then ALL THE THINGS! A great place to go from here is to add a little more meaning to your HTML and learn about Semantic HTML.
Thank You 💪
Thank you so so much for getting this far. I really appreciate you taking the time. Let me know if you have any corrections or comments, I'd love to know what you think 🧠 Next up, I'll be going through CSS 🎨
Follow me on Hashnode if you enjoyed this crazy ride! 🎢
📚 REFERENCES #LearnInPublic 📚
History
Robert Caillilau in da house. Wiki wiki.
Markup Basics
Coombs, Renear, and DeRose, Markup systems and the future of scholarly text processing (1987)
Understanding Semantic vs Presentational Markup
Descriptive vs Procedural Markup
Markdown Tutorial by Garen Torikian
Grammarly for Markdown in VS Code by Rahul Kadyan
HTML Basics
Semantic HTML from CodeAcademy