Today's Google Doodle of Moog Synthesizer

Question

I was inspecting today's Google Doodle of Moog Synth, dedicated to Robert Moog,

when I came across the following piece of html code:

 <w id=moogk0></w>
 <s id=moogk1></s>
 <w id=moogk2></w>
 <s id=moogk3></s>

(You can view the source & do a Ctrl+F for , you will get it in the first search result).

I googled about s & w tags but found nothing useful except that the s tag is sometimes used to strikeout text but is now deprecated.

Obviously google will not be using deprecated tags but I guess there's a lot more behind this than plain html code. Can anybody explain me the use of this tags? & how does the browser recognise them? & if the browser does not recognise them, whats their use?

Answer 1

The browser doesn't recognise them.

But HTML was designed to ignore what it doesn't recognise, so these are simply not understood by the browser and get ignored. As elements without content, they will not get rendered at all either, though they will be part of the DOM.

However, these can be styled directly as elements in CSS and picked up by Javascript (getElementsByTagName and getElementById etc...).

In short, these elements provide a target for CSS and Javascript without any other impact on display.

Answer 2

Unknown elements are treated as block elements (like div) and can be styled accordingly and be used in scripts.

Answer 3

The tags you are talking about are user created XML tags.

If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes.

With XML, data can be stored in separate XML files. This way you can concentrate on using HTML/CSS for display and layout, and be sure that changes in the underlying data will not require any changes to the HTML.

With a few lines of JavaScript code, you can read an external XML file and update the data content of your web page.