<p>HTML/markup languages can write things you put in. Python/programming languages can calculate the things to write.</p>

<p>Ex (numbers 1-10):</p>

<pre><code>&lt;p&gt;1, 2, 3, 4, 5, 6, 7, 8, 9, 10&lt;/p&gt;
</code></pre>

<p>vs.</p>

<pre><code>print(list(range(1,10)))
</code></pre>

<p>Ex (collatz conjecture):</p>

<pre><code>&lt;p&gt;5,16,8,4,2,1&lt;/p&gt;
</code></pre>

<p>vs.</p>

<pre><code>x = 5
print(x)
while x &gt; 1:
    if x%2 == 0:
        x= x/2
    else:
        x = 3x + 1   
    print(x)
</code></pre>

<p>I used Python 3 for my example programming language.</p>

CC BY-SA 3.0
2017-06-17T16:26:09.910Z
2017-06-17T16:26:09.910Z
auden
<p>I also have this problem frequently.  I use the example of Microsoft Word, and I would say something like this:</p>

<p>"Word allows you to give a document the appearance that you'd like.  You can bold, you can center, you can change font sizes.  Word is creating a <em>markup</em> (in this case, it is generating a type of markup called <em>XML)</em>.  "Markups" mark up text, just like it sounds.</p>

<p>But, could you create Word itself <em>in</em> Word?  You can edit fonts, you can center text... but does any of that give you the capability to make a whole program like Word?  Similarly, you can't use Word to make Firefox, Chrome, or the alarm clock on your phone.</p>

<p>Markup languages only format documents, but when you need to actually make a function calculator, or an iPhone app, or a video game, that's when you need code instead."</p>

CC BY-SA 3.0
2017-06-07T10:14:31.173Z
Time like this make me miss WordPerfect. If you selected "reveal code" it opened a small pane at the bottom and showed graphical open/close tags around bold/italic/center/etc. Shaped like a box with a point on one end, or like really old wooden direction arrow street signs. Perfect for showing the "tags" in HTML. Could even save as HTML and match the tags 1:1.
Gypsy Spellweaver
CC BY-SA 3.0
2017-06-07T10:17:46.720Z
If you want to go crazy with this, you can still use Word.  Make a very simple document, save it as docx, and rename the .docx to .zip - inside are folders of xml files, one of which contains your text in an insane markup.
Ben I.
CC BY-SA 3.0
2017-06-24T00:55:08.930Z
Use some other example program than a word processor - I've had a student use OpenOffice to write his shell scripts in my Linux class, after I explained that "shell scripts are just plain text files, so you can edit them in any plain text editor - vi, joe, geany, kwrite, even OpenOffice (as long as you save as plain text)".  It brings a whole new dimension to the vi vs. emacs debate...
ivanivan
CC BY-SA 3.0
2017-09-04T03:25:46.813Z
I wouldn't mention XML. You don't need to look at how Word actually stores its documents to get the point.
Criticize SE actions means ban
CC BY-SA 3.0
2017-05-23T16:13:53.263Z
I find your last paragraph gives the impression that markup could go some of the way towards providing a computational engine - so risking re-enforcing the confusion. Markup/code isn't apples/oranges, its more apples/coal.
Sean Houlihane
CC BY-SA 3.0
2017-05-23T21:22:51.850Z
I made my wording a little more like what I would actually say. Hopefully clearer :)
Ben I.
CC BY-SA 3.0
2017-05-23T15:44:00.830Z
2017-05-24T05:46:28.303Z
2017-05-24T05:46:28.303Z
Ben I.
<p>Markup languages are for giving names to things. How can be different between 'languages', with, for example, <em>HTML</em> and <em>XML</em> using <code>&lt;tags&gt;&lt;/tags&gt;</code>, <em>Markdown</em> using special characters around text, and $\LaTeX$ using dollar signs (<code>$</code>) around text and key words. No matter how it's done, all the markup language is doing is giving some kind of name to the thing, usually text, that it is attached to. Using a markup language is the same as using labels under the paintings in the museum. They mean nothing by themselves. They only have meaning once someone reads them, if they are in a language the reader understands. Markup text only has 'meaning' when read by a program that understands that language, interprets the tags, or other markup, and then following programmed instructions of what to do with the text the markup has named.</p>

<p>Programming languages, on the other hand, are instructions to the computer about what to do. Programs are written in text, often in the same text editor used for writing markup text. They are then compiled, or interpreted, to create <em>machine code</em> that the computer will follow. Once created, the program will follow the instructions it was given, even if that's not what the programmer intended.</p>

<p>An example of using markup could be the following image. It has what you need to know to change a flat tire on a car or truck.</p>

<p><a href="https://i.sstatic.net/ovaqT.png" rel="noreferrer"><img src="https://i.sstatic.net/ovaqT.png" alt="enter image description here"></a></p>

<p>Notice that everything is there, but it doesn't help you figure out how to change a flat tire. What's really needed is <em>instructions</em> not names. Compare the following. Not in any <em>programming</em> language. Just a list of instructions. In this case the instructions are <em>executed</em> by a person, not a computer. Still, the instructions enable one to change a tire, while the images that have <em>markup</em> on them don't help any on their own.</p>

<blockquote>
<pre>How to Change Tires
     1. Find a Safe Location
     2. Turn on Your Hazard Lights
     3. Apply the Parking Brake
     4. Apply Wheel Wedges
     5. Remove the Hubcap or Wheel Cover
     6. Loosen the lug nuts
     7. Place the Jack Under the Vehicle
     8. Raise the Vehicle With the Jack
     9. Unscrew the Lug Nuts
    10. Remove the Flat Tire
    11. Mount the Spare Tire on the Lug Bolts
    12. Tighten the Lug Nuts by Hand
    13. Lower the Vehicle and Tighten the Lug Nuts Again
    14. Lower the vehicle completely
    15. Replace the Hubcap
    16. Stow All Equipment
    17. Check The Pressure in the Spare Tire
    18. Take Your Flat Tire to a Technician</pre>
  
  <p><sup>Adapted from <a href="http://www.bridgestonetire.com/tread-and-trend/drivers-ed/how-to-change-a-flat-tire" rel="noreferrer">How to Change a Flat Tire</a> by <a href="http://www.bridgestonetire.com/" rel="noreferrer">Bridgestone Americas Tire Operations, LLC</a>.</sup></p>
</blockquote>

CC BY-SA 3.0
2017-06-15T23:38:44.657Z
2017-06-15T23:38:44.657Z
Gypsy Spellweaver
<p>The AP CS Principles curriculum defines three elements of an algorithm:</p>

<ul>
<li>Sequencing </li>
<li>Selection</li>
<li>Iteration</li>
</ul>

<p>This can be a point of divergence between a markdown language and a programming language. Selection via conditionals and Boolean operators and iteration via loops are constitutive elements of a program, not a document styled with a markup language.</p>

<p>A markdown language may use sequencing -- I'm thinking particularly of <code>&lt;head&gt;</code> and <code>&lt;body&gt;</code> in HTML -- yet one could not implement an algorithm (using the above three elements) in HTML or CSS. There's (maybe) selection in terms of ids and classes with CSS but not in the sense of Booleans. </p>

<p>Also, the idea that an algorithm solves a computational -- viz. mathematical -- problem allows one to stress the notion of computation itself, which is intrinsic to a programming language and which separates it from the styling of a document.</p>

CC BY-SA 3.0
2017-05-23T18:28:40.700Z
2017-05-23T18:28:40.700Z
Peter
<p>The best way to explain that HTML is a markup language is to explain that <em>markup languages</em> are designed not for general-purpose programming, but for processing or presentation of text.</p>

CC BY-SA 3.0
2017-05-23T15:31:38.400Z
2017-06-07T20:37:32.853Z
2017-06-07T20:37:32.853Z
Manav Dubey
<p>Other answers have already talked about the expressive power of a programming language over a markup language. I want to add the following as to help the kids understand the limitations of a markup language.</p>

<p>They all know Google Docs or Word or some other word processor, I tell them that these are basically the same as HTML. If you have bold in a document, somewhere internally, there's a marker to start and stop the bold. When you type C-b it inserts that invisible marker and then C-b again turns it off. </p>

<p>I also show them this by loading a simple web page and then showing its source (and sometimes editing it in the developer tools). </p>

<p>Most kids know that a word document is not a program and showing the analogy this way helps make the connection.</p>

CC BY-SA 3.0
2017-06-15T23:52:12.513Z
2017-06-15T23:52:12.513Z
Mike Zamansky
<p>I <a href="http://milesberry.net/2014/05/there-is-more-to-the-new-computing-curriculum-than-just-coding/" rel="nofollow noreferrer">describe programming</a> as a two-step process, of algorithm + coding. I.e. deciding how to solve a problem, and then implementing that approach in a particular language on a particular system. </p>

<p>Can you have one without the other? Yes. </p>

<p>There are occasions, particularly in the realm of unplugged approaches to computational thinking, when we'll think about algorithm-like solutions without any intention of automating them (e.g. the jam / PBJ / chocolate sandwich thing, or an effective way to play a board or card game).</p>

<p>There are other occasions when we'll write in a code that a computer understands without their being any actual algorithm to implement - markdown, HTML, XML, json etc, etc.</p>

<p>I think HTML is a great way to get students thinking of a formally specified language, and seeing some immediate effect from their coding, without the additional cognitive load of implementing an algorithmic solution.</p>

CC BY-SA 3.0
2017-06-08T11:17:54.333Z
2017-06-08T11:17:54.333Z
Miles
<p>I can offer the difference between html and php and/or javascript in sense of web. One is executed to present information, other is executed to make some calculation, logical conclusions. And the result from programming language can be present or not present at all to the enduser</p>

CC BY-SA 3.0
2017-05-23T16:15:33.313Z
2017-05-23T16:15:33.313Z
Romeo Ninov
<p>When I try and teach web development to absolute beginners, I seem to always get a question about the roles of HTML/CSS/JS and about how the browser renders the HTML. It seems to me that the confusion lies in an explanation of what a markup language is as compared to a regular language (e.g. python, C, java, ruby). What is the best way to give an overview of what HTML is while being sure that my students understand HTML as a markup language?</p>

<p>Would it be useful to include some of the history of HTML? Preface it by teaching markdown? Or some other way?</p>

CC BY-SA 3.0
2017-06-24T00:52:29.930Z
Does the markup language have an if-then statement or conditional loops?
ivanivan
CC BY-SA 3.0
2017-09-04T03:27:19.083Z
HTML *is* a language, but it's not a programming language, nor is it a regular language. But "regular language" means something different to what you probably meant. C, Java and Scheme aren't regular languages either.
Criticize SE actions means ban
CC BY-SA 3.0
2017-09-17T14:29:14.633Z
See: [Turing completeness](https://en.wikipedia.org/wiki/Turing_completeness)
Guy Coder
<lesson-ideas><web-development><markup-languages><introductory-lesson>
How can I convey the idea of a programming language vs. a markup language?
# How can I convey the idea of a programming language vs. a markup language?

(Asked by: username_0 on 2017-05-23)

When I try and teach web development to absolute beginners, I seem to always get a question about the roles of HTML/CSS/JS and about how the browser renders the HTML. It seems to me that the confusion lies in an explanation of what a markup language is as compared to a regular language (e.g. python, C, java, ruby). What is the best way to give an overview of what HTML is while being sure that my students understand HTML as a markup language?

Would it be useful to include some of the history of HTML? Preface it by teaching markdown? Or some other way?

**Tags:** lesson-ideas, web-development, markup-languages, introductory-lesson

> **Comments:**
> **username_1**: Does the markup language have an if-then statement or conditional loops?  
> **username_2**: HTML *is* a language, but it's not a programming language, nor is it a regular language. But "regular language" means something different to what you probably meant. C, Java and Scheme aren't regular languages either.  
> **username_3**: See: [Turing completeness](https://en.wikipedia.org/wiki/Turing_completeness)  

---

## 8 answers

### Answer by username_5 on 2017-05-23. Score: 11

I also have this problem frequently. I use the example of Microsoft Word, and I would say something like this:

"Word allows you to give a document the appearance that you'd like. You can bold, you can center, you can change font sizes. Word is creating a *markup* (in this case, it is generating a type of markup called *XML)*. "Markups" mark up text, just like it sounds.

But, could you create Word itself *in* Word? You can edit fonts, you can center text... but does any of that give you the capability to make a whole program like Word? Similarly, you can't use Word to make Firefox, Chrome, or the alarm clock on your phone.

Markup languages only format documents, but when you need to actually make a function calculator, or an iPhone app, or a video game, that's when you need code instead."

> **Comments:**
> **username_7**: I find your last paragraph gives the impression that markup could go some of the way towards providing a computational engine - so risking re-enforcing the confusion. Markup/code isn't apples/oranges, its more apples/coal.  
> **username_5**: I made my wording a little more like what I would actually say. Hopefully clearer :)  
> **username_6**: Time like this make me miss WordPerfect. If you selected "reveal code" it opened a small pane at the bottom and showed graphical open/close tags around bold/italic/center/etc. Shaped like a box with a point on one end, or like really old wooden direction arrow street signs. Perfect for showing the "tags" in HTML. Could even save as HTML and match the tags 1:1.  
> **username_5**: If you want to go crazy with this, you can still use Word.  Make a very simple document, save it as docx, and rename the .docx to .zip - inside are folders of xml files, one of which contains your text in an insane markup.  
> **username_1**: Use some other example program than a word processor - I've had a student use OpenOffice to write his shell scripts in my Linux class, after I explained that "shell scripts are just plain text files, so you can edit them in any plain text editor - vi, joe, geany, kwrite, even OpenOffice (as long as you save as plain text)".  It brings a whole new dimension to the vi vs. emacs debate...  
> **username_2**: I wouldn't mention XML. You don't need to look at how Word actually stores its documents to get the point.  

---

### Answer by username_6 on 2017-06-15. Score: 5

Markup languages are for giving names to things. How can be different between 'languages', with, for example, HTML and XML using , Markdown using special characters around text, and $\LaTeX$ using dollar signs ($) around text and key words. No matter how it's done, all the markup language is doing is giving some kind of name to the thing, usually text, that it is attached to. Using a markup language is the same as using labels under the paintings in the museum. They mean nothing by themselves. They only have meaning once someone reads them, if they are in a language the reader understands. Markup text only has 'meaning' when read by a program that understands that language, interprets the tags, or other markup, and then following programmed instructions of what to do with the text the markup has named.
Programming languages, on the other hand, are instructions to the computer about what to do. Programs are written in text, often in the same text editor used for writing markup text. They are then compiled, or interpreted, to create machine code that the computer will follow. Once created, the program will follow the instructions it was given, even if that's not what the programmer intended.
An example of using markup could be the following image. It has what you need to know to change a flat tire on a car or truck.

Notice that everything is there, but it doesn't help you figure out how to change a flat tire. What's really needed is instructions not names. Compare the following. Not in any programming language. Just a list of instructions. In this case the instructions are executed by a person, not a computer. Still, the instructions enable one to change a tire, while the images that have markup on them don't help any on their own.

How to Change Tires
     1. Find a Safe Location
     2. Turn on Your Hazard Lights
     3. Apply the Parking Brake
     4. Apply Wheel Wedges
     5. Remove the Hubcap or Wheel Cover
     6. Loosen the lug nuts
     7. Place the Jack Under the Vehicle
     8. Raise the Vehicle With the Jack
     9. Unscrew the Lug Nuts
    10. Remove the Flat Tire
    11. Mount the Spare Tire on the Lug Bolts
    12. Tighten the Lug Nuts by Hand
    13. Lower the Vehicle and Tighten the Lug Nuts Again
    14. Lower the vehicle completely
    15. Replace the Hubcap
    16. Stow All Equipment
    17. Check The Pressure in the Spare Tire
    18. Take Your Flat Tire to a Technician
Adapted from How to Change a Flat Tire by Bridgestone Americas Tire Operations, LLC.


---

### Answer by username_8 on 2017-05-23. Score: 4

The AP CS Principles curriculum defines three elements of an algorithm:

* Sequencing
* Selection
* Iteration

This can be a point of divergence between a markdown language and a programming language. Selection via conditionals and Boolean operators and iteration via loops are constitutive elements of a program, not a document styled with a markup language.

A markdown language may use sequencing -- I'm thinking particularly of  and  in HTML -- yet one could not implement an algorithm (using the above three elements) in HTML or CSS. There's (maybe) selection in terms of ids and classes with CSS but not in the sense of Booleans.

Also, the idea that an algorithm solves a computational -- viz. mathematical -- problem allows one to stress the notion of computation itself, which is intrinsic to a programming language and which separates it from the styling of a document.


---

### Answer by username_9 on 2017-05-23. Score: 3

The best way to explain that HTML is a markup language is to explain that *markup languages* are designed not for general-purpose programming, but for processing or presentation of text.


---

### Answer by username_10 on 2017-06-15. Score: 2

Other answers have already talked about the expressive power of a programming language over a markup language. I want to add the following as to help the kids understand the limitations of a markup language.

They all know Google Docs or Word or some other word processor, I tell them that these are basically the same as HTML. If you have bold in a document, somewhere internally, there's a marker to start and stop the bold. When you type C-b it inserts that invisible marker and then C-b again turns it off.

I also show them this by loading a simple web page and then showing its source (and sometimes editing it in the developer tools).

Most kids know that a word document is not a program and showing the analogy this way helps make the connection.


---

### Answer by username_11 on 2017-06-08. Score: 2

I [describe programming](http://milesberry.net/2014/05/there-is-more-to-the-new-computing-curriculum-than-just-coding/) as a two-step process, of algorithm + coding. I.e. deciding how to solve a problem, and then implementing that approach in a particular language on a particular system.

Can you have one without the other? Yes.

There are occasions, particularly in the realm of unplugged approaches to computational thinking, when we'll think about algorithm-like solutions without any intention of automating them (e.g. the jam / PBJ / chocolate sandwich thing, or an effective way to play a board or card game).

There are other occasions when we'll write in a code that a computer understands without their being any actual algorithm to implement - markdown, HTML, XML, json etc, etc.

I think HTML is a great way to get students thinking of a formally specified language, and seeing some immediate effect from their coding, without the additional cognitive load of implementing an algorithmic solution.


---

### Answer by username_12 on 2017-05-23. Score: 2

I can offer the difference between html and php and/or javascript in sense of web. One is executed to present information, other is executed to make some calculation, logical conclusions. And the result from programming language can be present or not present at all to the enduser


---

### Answer by username_4 on 2017-06-17. Score: 0

HTML/markup languages can write things you put in. Python/programming languages can calculate the things to write.
Ex (numbers 1-10):
1, 2, 3, 4, 5, 6, 7, 8, 9, 10

vs.
print(list(range(1,10)))

Ex (collatz conjecture):
5,16,8,4,2,1

vs.
x = 5
print(x)
while x > 1:
    if x%2 == 0:
        x= x/2
    else:
        x = 3x + 1   
    print(x)

I used Python 3 for my example programming language.


---

