Markup & Markdown
Time 60 mins

Difficulty Beginner
Prerequisites The Internet
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None


Markup Languages


This work is shared under the following license: Creative Commons BY-SA-NC


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
Getting Started
  • The internet is FULL of webpages.
  • Just below the surface of each webpage we visit is HTML.
  • There are millions and millions of webpages on the internet.
  • This means there's billions and billions of lines of HTML!
  • Each webpage may look different, but they share the same fundamental markup language.
  • In this unit, we'll explore what a markup language is, and how it's different than a programming language.
5 mins
What is Markup?
Digging In
  • To mark something up means to take existing text and add marks to it, like highlights and notes.
  • The name comes from publishing editors who use a pen to make marks all over a manuscript.
  • Editors would highlight words and add notes, eg: fix this typo, rewrite this sentence, etc.

  • A markup language for a computer is similar.
  • It starts with plain text, and then adds special markup called tags to indicate what the text should look like.
  • Each tag in a markup language has a special meaning.
5 mins
Markup vs. Programming
Digging In

  • A markup language is different than a programming language.
  • Programming languages use variables, loops, and logic to follow a procedure or create an algorithm.
  • Markup languages don't have any procedures or logic.
  • Instead, markup is a set of tags applied to plain text to indicate how it should be displayed.
    • No variables
    • No loops
    • No functions
    • No algorithms
  • Check out the Difference Between Programming, Scripting, and Markup Languages
5 mins
Opening Tag, Closing Tag
  • Markup is made up of tags.
  • This is a tag: <p>
  • And another tag: <div>
  • Each tag uses <> and has a name like p or div.

  • Almost every piece of markup uses an opening tag and a closing tag.
  • Content goes in between the tags, and the whole thing together is called an element.
  • <p>This is an example paragraph element</p>
  • Opening tags and closing tags work as a pair.
  • Here's another example of tags in HTML:
<h1>My Cat</h1>

<p>My cat is <strong>very</strong> grumpy.</p>
  • Each tag has a different meaning.
  • In the example above, there are <p> paragraphs, <strong> bold tags, and <h1> heading tags.
  • Tags are used to add markup to plain text, which your web browser uses to transform into a website.

10 mins
Nested Tags
  • Tags can be nested inside each other.
  • To get an idea of how to nest tags, check out this video from Don't Fear the Internet.

  • In this video, we can see how markup tags can be nested. Like a hamburger.

More Tags
  • Along with p, here are some more common formatting tags:
<p> </p> Paragraph
<strong> </strong> Bold
<em> </em> Emphasis
<i> </i> Italic
<u> </u> Underline
<s> </s> Strikethrough
<h1> </h1>

Heading 1

<h2> </h2>

Heading 2

<h3> </h3>

Heading 3

<h4> </h4>

Heading 4

<br> Line Break. Unlike other tags, this one doesn't need a closing tag.
30 mins
Simple Markup
  • Lets write some markup!
  • First, we need some text. Lorem Ipsum is generic placeholder text that designers use.
    • But, regular lorem ipsum is full of latin and kinda boring.
    • Visit Meet the Ipsums and generate some more interesting text :)
  • Then, visit CodePen and paste your text in the HTML area.
    • CodePen is an online editor for HTML, CSS and Javascript.
    • You'll need to create an account to save your work.
  • Once you have some text in CodePen, you're ready to add some markup!
  • When you're done adding markup to your text, save your work and submit a URL to your CodePen as your evidence of learning in this unit.
There are no records to display.
Powered by Gibbon v25.0.00dev | © Ross Parker 2010-2023
Created under the GNU GPL at ICHK | Credits | Translators