HTML5 Semantic tag alternatives

Question

HTML5 has some useful semantic tags for use. They're not actually necessary, but the point of 'Semantic Web' can be helpful for organizing a lot of content.

I just came across a simple  tag which I never saw before. It works as it sounds, the text gets smaller.

What if the !DOCTYPE html was not for HTML5 but other legacy doctypes, what are good alternatives besides simply doing following style/CSS adjustments?

CSS: p {font-size: smaller}

HTML attribute: This text.

Note that "text in small font" is presentational, not semantic meaning. The current semantic meaning of in HTML5 is "small print" as in legal text or sidenotes. — JJJ
– JJJ, Commented Oct 21, 2017 at 7:34

Quentin · Accepted Answer · 2017-10-21 07:32:37Z

2

What if the !DOCTYPE html was not for HTML5 but other legacy doctypes

 was introduced in HTML 3.2, not in HTML 5, so you should still use the  element.

The semantic meaning that  holds in HTML 5 wasn't there in earlier versions of HTML, but there was nothing with equivalent semantics that would be better.

answered Oct 21, 2017 at 7:32

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek 朕會功夫 · Accepted Answer · 2017-10-21 07:25:22Z

1

An alternative would be to use a class name such as .small-text to represent small text.

.small-text {
    font-size: smaller;
}

However, you should also ask yourself whether defining a class for small text is necessary. For example, you might actually want this instead:

.subtitle {
    font-size: smaller;
    /* other styles */
}

and avoid creating too many useless class names.

answered Oct 21, 2017 at 7:25

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Comments

K. Jerry Alleyne · Accepted Answer · 2017-10-21 08:29:39Z

0

Thanks for the answers people...

I believe the  tag is an excellent alternative for the similar results. The difference would be that the tag comes with a preset size.  brings a different value being unchanged until inheriting via css/attr or js.

You won't necessarily have to worry about adding a new class, you can have it inherit a style by relative placement.

ie. <article>Text here to continue for who knows how long.This is small text.</article>

<article><p>Text here to continue for who knows how long.<span>This is small text.</span></p></article>

The advantage is   will already be smaller, but who knows at what default size?...

The  will just be there awaiting definition to it...

CSS: article > span { font-size: ###;} //no class necessary unless you really want varying span sizes in the content paragraph.

answered Oct 21, 2017 at 8:29

K. Jerry Alleyne

458 bronze badges

1 Comment

Arsylum Over a year ago

from my experience I would say that the example you give will many times lead to surprises when you later create another span in that article for different reasons where the smaller text is not desired. ofc it depends on many factors what is the best middle ground between too general and too specific css..

Collectives™ on Stack Overflow

HTML5 Semantic tag alternatives

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related