Tags I Needed to Use For This Assignment

No relevant GitHub link is necessary for this article.

Outline

  1. Span and Div
  2. Dialog
  3. Fieldset and Legend
  4. Progress
  5. SVG
  6. hello-world

Span and Div

I didn't have a need for them anywhere. I might need them once we start styling, but nothing pure-HTML needed them. They don't mean anything. Nonetheless, here is a div containing a span.

This text is inside a span, inside of a div! Wow!

So, what did that do? Div is a block element, so it stepped below the paragraph preceding it. It then says nothing about what it contains and steps into the span, which does nothing (as an inline element) and steps down to the text contained.

Dialog

Not particularly useful until JavaScript is allowed, so I pulled it out to this article instead. You can close this one.

Hello. I am a dialog. You can close me. I'm probabily covering some text, but I can't start closed and open without Javascript.

This also uses the button tag without any Javascript, which is cool!

Fieldset and Legend

These could have been useful in my contact form, but there's not enough groups for them to be useful, and the HTML validator complained. Thus, I moved them over here. The labels work well enough.

Choose your favorite Diagram

Progress

Nowhere I have in my site needs any kind of progress bar. Here's one that's set to an indeterminate percent. It bounces in Firefox.

SVG

Venn diagram of three sets Three overlapping colored circles.

Basic SVG tag with all the attributes to make it validate. It's the Venn Diagram of 3 sets.

hello-world

This is a custom tag, defined in the first section. If you're reading this, you should see this in your console:

Hello, World!

(no, that one wasn't written from JS, don't dock me. I just wanted to use blockquote.)

grey-bg

This one makes its background grey. I have a few places custom elements would be useful, but all of them would replace another required tag such as <article>, so I didn't use them.

Nice. This has a grey background. The custom CSS element works fine.

Extra Credit Stuff

MathML is interesting, although I'll likely be mostly using it in the LaTeX mode as I'm familiar with the language. Here's the equation:

E = m c 2

We could use it if we target modern browsers - it is marked baseline available, not even recently baseline available. I'm guessing this question is an older one. However, the likely reason would be (as of 2 years ago or earlier) that the implementation was not yet widely implemented across all modern browsers, and would cause the site to break for some users if used. Even as of last year, it would have only been recently available, so today it likely still has a few holdouts on older browser versions who may not have the feature. This is the only reason for base MathML I see any issues with.