Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-17T16:26:09.910Z
Answers.LastActivityDate: 2017-06-17T16:26:09.910Z
Answers.UserDisplayName: auden
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-07T10:14:31.173Z
Answers.Text: 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.
Answers.UserDisplayName: Gypsy Spellweaver
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-07T10:17:46.720Z
Answers.Text: 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.
Answers.UserDisplayName: Ben I.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-24T00:55:08.930Z
Answers.Text: 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...
Answers.UserDisplayName: ivanivan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-04T03:25:46.813Z
Answers.Text: I wouldn't mention XML. You don't need to look at how Word actually stores its documents to get the point.
Answers.UserDisplayName: Criticize SE actions means ban
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-23T16:13:53.263Z
Answers.Text: 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.
Answers.UserDisplayName: Sean Houlihane
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-23T21:22:51.850Z
Answers.Text: I made my wording a little more like what I would actually say. Hopefully clearer :)
Answers.UserDisplayName: Ben I.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-23T15:44:00.830Z
Answers.LastActivityDate: 2017-05-24T05:46:28.303Z
Answers.LastEditDate: 2017-05-24T05:46:28.303Z
Answers.UserDisplayName: Ben I.
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-15T23:38:44.657Z
Answers.LastActivityDate: 2017-06-15T23:38:44.657Z
Answers.UserDisplayName: Gypsy Spellweaver
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-23T18:28:40.700Z
Answers.LastActivityDate: 2017-05-23T18:28:40.700Z
Answers.UserDisplayName: Peter
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-23T15:31:38.400Z
Answers.LastActivityDate: 2017-06-07T20:37:32.853Z
Answers.LastEditDate: 2017-06-07T20:37:32.853Z
Answers.UserDisplayName: Manav Dubey
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-15T23:52:12.513Z
Answers.LastActivityDate: 2017-06-15T23:52:12.513Z
Answers.UserDisplayName: Mike Zamansky
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-08T11:17:54.333Z
Answers.LastActivityDate: 2017-06-08T11:17:54.333Z
Answers.UserDisplayName: Miles
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-23T16:15:33.313Z
Answers.LastActivityDate: 2017-05-23T16:15:33.313Z
Answers.UserDisplayName: Romeo Ninov
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-24T00:52:29.930Z
Comments.Text: Does the markup language have an if-then statement or conditional loops?
Comments.UserDisplayName: ivanivan
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-04T03:27:19.083Z
Comments.Text: 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.
Comments.UserDisplayName: Criticize SE actions means ban
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-17T14:29:14.633Z
Comments.Text: See: [Turing completeness](https://en.wikipedia.org/wiki/Turing_completeness)
Comments.UserDisplayName: Guy Coder
Tags: <lesson-ideas><web-development><markup-languages><introductory-lesson>
Title: How can I convey the idea of a programming language vs. a markup language?
ThreadText: # 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 `<tags></tags>`, *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.
  
  [![enter image description here](https://i.sstatic.net/ovaqT.png)](https://i.sstatic.net/ovaqT.png)
  
  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](http://www.bridgestonetire.com/tread-and-trend/drivers-ed/how-to-change-a-flat-tire) by [Bridgestone Americas Tire Operations, LLC](http://www.bridgestonetire.com/).
  
  
  ---
  
  ### 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 `<head>` and `<body>` 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):
  
  ```
  <p>1, 2, 3, 4, 5, 6, 7, 8, 9, 10</p>
  
  ```
  
  vs.
  
  ```
  print(list(range(1,10)))
  
  ```
  
  Ex (collatz conjecture):
  
  ```
  <p>5,16,8,4,2,1</p>
  
  ```
  
  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.
  
  
  ---
  
  