16
$\begingroup$

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?

Improve this question
$\endgroup$
4
  • 5
    $\begingroup$ After introducing HTML, add an assignment at the end of the lab session to make a web page that lists the prime numbers under 100, without hard-coding them? :-) $\endgroup$
    – user24
    May 23, 2017 at 18:34
  • $\begingroup$ Does the markup language have an if-then statement or conditional loops? $\endgroup$
    – ivanivan
    Jun 24, 2017 at 0:52
  • $\begingroup$ 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. $\endgroup$
    – user253751
    Sep 4, 2017 at 3:27
  • $\begingroup$ See: Turing completeness $\endgroup$
    – Guy Coder
    Sep 17, 2017 at 14:29

8 Answers 8

Reset to default
11
$\begingroup$

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."

Improve this answer
$\endgroup$
6
  • 1
    $\begingroup$ 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. $\endgroup$
    – Sean Houlihane
    May 23, 2017 at 16:13
  • 1
    $\begingroup$ I made my wording a little more like what I would actually say. Hopefully clearer :) $\endgroup$
    – Ben I. ♦
    May 23, 2017 at 21:22
  • 1
    $\begingroup$ 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. $\endgroup$
    – Gypsy Spellweaver
    Jun 7, 2017 at 10:14
  • 3
    $\begingroup$ 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. $\endgroup$
    – Ben I. ♦
    Jun 7, 2017 at 10:17
  • $\begingroup$ 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... $\endgroup$
    – ivanivan
    Jun 24, 2017 at 0:55
5
$\begingroup$

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

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.

Improve this answer
$\endgroup$
4
$\begingroup$

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.

Improve this answer
$\endgroup$
3
$\begingroup$

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.

Improve this answer
$\endgroup$
2
$\begingroup$

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

Improve this answer
$\endgroup$
2
$\begingroup$

I describe programming 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.

Improve this answer
$\endgroup$
2
$\begingroup$

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.

Improve this answer
$\endgroup$
0
$\begingroup$

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.

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.