Headers and Footers Are Self-Explanatory and Nav Creates A Navigation or Menu Bar. You Can

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Here are a few of the new semantic elements in HTML5:
 article
 aside
 figcaption
 figure
 footer
 header
 hgroup
 mark
 nav
 section
 time
Because of the semantic richness, you can probably guess what most of these elements do.
But just in case, here’s a visualisation:
Headers and footers are self-explanatory and nav creates a navigation or menu bar. You can
use sections andarticles to group your content. Finally, the aside element can be used for secondary
content, for example, as a sidebar of related links.
Basic Structure
Before we begin marking up the page we should get the overall structure straight:
In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar
and footer. First, take a look at the markup and I'll explain afterwards:
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>

</nav>
<section id="intro">

</section>
<section>

</section>
<aside>

</aside>
<footer>

</footer>
</body>
</html>
??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
HTML hidden Attribute

A hidden paragraph:
<p hidden>This paragraph should be hidden.</p>
The hidden attribute is a boolean attribute.
When present, it specifies that an element is not yet, or is no longer, relevant.
Browsers should not display elements that have the hidden attribute specified.
The hidden attribute can also be used to keep a user from seeing an element
until some other condition has been met (like selecting a checkbox, etc.). Then,
a JavaScript could remove the hidden attribute, and make the element visible.
The Power of em Units in

CSS
With every complex feature in CSS, you’ll always have that turning point when you see how
truly powerful the feature is. And, believe it or not, my personal turning point with ems came
long after I wrote a pun-filled introduction to the subject.
Although I understood ems fairly well by that point, I really started to see how powerful they are
when I readSimurai’s post on Medium called Sizing (Web) components.
So I’m going ride his coattails in this post. Here you’ll find a quick introduction to em units,
followed by a live demonstration of the technique he describes.
What are ems?

In CSS, an em unit is equal to the computed font-size for the element to which the em is
applied. When em units are declared on child elements that don’t have a font-size defined,
they will inherit their font-size from their parent, or from another ancestor element, possibly
going all the way back to the root element on the document.
Look at the following CSS:
1 .example {
2 font-size: 20px;
3 }
In this case, 1em on this element, or on its child elements (assuming no other font-
size definitions), would be equal to 20px. So if we added a line:
1 .example {
2 font-size: 20px;
3 border-radius: .5em;
4 }
This border-radius value of .5em computes to 10px (i.e. 20*.5). Similarly:
1 .example {
2 font-size: 20px;
3 border-radius: .5em;
4 padding: 2em;
}
5
The padding value of 2em is equal to 40px (20*2). As mentioned, this type of calculation would
apply to any child elements as well — unless any of those child elements had an explicitly
defined font-size value, in which case the em value would be calculated based on that. If no
font size is defined anywhere in the CSS, the em unit will be equal to the browser’s default font
size for the document, which is usually 16px.
I think that should make it clear how ems work. Now let’s look at how this technique can be used
to make easily resizable web components, as discussed by Simurai in the original Medium
article. I’ll take his idea a step further by providing a demo to see this in action.
Component-Level Sizing
The concept of “components” is pretty popular right now. It works well with modular CSS
techniques as well as with the idea of encapsulated sections of code in general. And I’m guessing
the following technique will be even more interesting when the Web Components spec becomes
widely supported.
The technique basically works like this: The font-size property is used, as Simurai refers to it,
as a “trojan horse”, creating the base unit for the various elements inside our component, or
module. Since em units, as described above, are calculated based on the root-defined font-
size on the parent element, this makes the entire component easily resizable by simply changing
the font-size on the parent element.

Headers and Footers Are Self-Explanatory and Nav Creates A Navigation or Menu Bar. You Can

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Headers and Footers Are Self-Explanatory and Nav Creates A Navigation or Menu Bar. You Can

Încărcat de

Drepturi de autor:

Formate disponibile

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

Here are a few of the new semantic elements in HTML5:

But just in case, here’s a visualisation:

HTML hidden Attribute

<p hidden>This paragraph should be hidden.</p>

The hidden attribute is a boolean attribute.

When present, it specifies that an element is not yet, or is no longer, relevant.

The Power of em Units in

What are ems?

Look at the following CSS:

S-ar putea să vă placă și