A <q> element is an inline element designed to contain
a quote from someone or something. User agent styles
will wrap its contents in quote marks automatically. It
has an optional cite attribute that can be a link back to
the original source.
The <blockquote> element performs the same role but for
longer, block-level quotes.Jeremy Keith describes HTML as the <q>unifying language of the World
Wide Web</q>.
<blockquote>
It has an optional `cite` attribute that can be a link back to the original
source.
</blockquote>The Verge wraps
its pull quotes in an
<aside> element to
remove them from
the main flowModern devices come with screens in a range of
sizes, aspect ratios and pixel densities. By
supplying only small or only large images,
users are getting a lower quality experience
either by receiving low-resolution imagery or by
having the page load slower.
The <picture> element enables us to define different
sources for the same image, depending on multiple
factors such as screen width, device orientation or
support for a specific format such as WebP. All that is
required is setting the appropriate media query for each
defined <source> with a srcset attribute.
For example, users navigating using dark mode can be
provided with a darker image by using the prefers-color-
scheme: dark media query.
This then gives us specific control over what image
to show when. The similar srcset attribute on the <img>
element gives the browser more freedom over which
source to choose. Use the <picture> element for deliberate
art direction, such as simplifying a diagram for smaller
screens.<picture>
<source
srcset=”images/2x-landscape.jpg 2x, images/1x-landscape.
jpg 1x”
media=”(min-width: 50rem)”
/>
<source srcset=”images/2x-square.jpg 2x, images/1x-square.
jpg 1x” />
<img src=”images/1x-landscape.jpg” />
</picture>In technical writing, variables are a
common occurrence. In order to avoid
confusion with the rest of the words in a
sentence, the <var> element can be used to
separate and style these separately.
For larger expressions, MathML may be a more suitable
approach. But <var> can be useful when referring to parts of a
larger expression as part of a sentence.Using Pythagoras’ theorem, the squares of sides <var>a</var> and
<var>b</var> give the square of the hypotenuse <var>c</var>.By wrapping a word or phrase in the <dfn>
element, it indicates that this is the term being
defined. When it’s placed inside a <p>, <dl> or
<section> the content surrounding it is treated as
the definition. An id attribute can be used to link
back to it whenever it next appears in the page.<p>
<dfn>Semantic markup</dfn> is HTML that provides
meaning to content as well as presentation.
</p>FEATURES
Hot new HTML tags