January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Sectioning

While headings do a grand, perfectly valid, job in defining the start of a new section or sub-section in a document, there are a number of elements that can be exploited to establish a cleaner, clearer semantic structure.

Whereas div elements can be used to contain sections, used primarily as scaffolding on which to hang CSS, they don’t hold a great deal of meaning. Sectioning involves a handful of tags that can be used to define specific parts of a page, such as articles, headers, footers, and navigation.

Articles and Sections

An article element can be used to mark up a standalone section of content. This could be used just once, if you think of a blog post as an article, for example, or a number of times, if you imagine replicating a traditional newspaper page with numerous articles.

A section element represents a more general section and could be used to split up an article, or to represent chapters, for example.


<article>
    <section id="intro">
        <p>[An introduction]</p>
    </section>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>

See the Pen Sectioning Main by Nicholas D’Angelo (@ndangelo) on CodePen.

Assignment

  1. Create a layout similar to the example above. The <article> tag may be used as a wrapper; however, I would use a separate .wrapper style.
  2. Add a new tag called an <aside>. This tag is used to create areas on the left and right of sections. The float: left; or right in CSS will be critical here.
  3. You will have to experiment with the width and height of sections in order to complete the layout. Remember, you are trying to make “boxes and rectangles” to contain content. Use CSS to add a background-color to each section.
  4. Use a new tag <nav>. You may wish to add this above the header or you may want to include it within it. Add a horizontal nav (Hint: list-style-type). Use “#” instead of a URL.
  5. Add a Google font and a rollover state to the nav items.

Assignment: Create a layout using the above template.

While divs could be used to make these separations (or even if you didn’t need these separations for styling), this provides a much richer, more meaningful document.

The HTML5 specifications suggest that you can use h1 elements at the start of each section, which would become a sub-heading of anything preceding that section (so, in the example above, if you had an h1 immediately following the opening article tag, an h1 immediately after an opening section tag would be a sub-heading of that initial h1). This screws backwards compatibility, however, and any user agents (including screen readers) that don’t understand this won’t apply properly structured heading levels. We suggest sticking to the headings levels you would use if you didn’t use sections (so h1, followed by h2, etc, regardless of the sectioning). This doesn’t break anything or detract from the meaning or semantics.

Headers and Footers

header and footer provide further specialized, self-descriptive sections:


<body>
<article>
    <header>
        <h1>Alternatively&hellip;</h1>
        <p>[An introduction]</p>
    </header>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <footer>
        <p>[End notes]</p>
    </footer>
</article>
<footer>
    <p>[Copyright bumf]</p>
</footer>
</body>

The footer is the footer of the section in which it is contained. So, in the above example, the first footer is the footer of the article and the second footer is the footer of the page.

Asides

An aside can be used to represent content that is related to the content surrounding it. Think of pull quotes or snippets of related information in an article:


<section id="main_content">
    <h1>Tixall</h1>
    <p>[All about Tixall]</p>
    <aside>
        <h2>Tixall Obelisk</h2>
        <p>[A short note about Tixall Obelisk]</p>
    </aside>
    <p>[Maybe a bit more about Tixall]</p>
</section>

While we’re at this structure, if you want to include figures, there happens to be two tags for doing just that:


<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

Note that the img element doesn’t need an alt attribute IF the figcaption (that’s “figure caption”, in case you need it spelled out) does that job.

See the Pen figure and caption by Nicholas D’Angelo (@ndangelo) on CodePen.

Navigation

Finally, there’s nav, used to mark up a group of navigation links:


<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>

This could also be used for in-page navigation (<a href="#overthere">... etc.) but it isn’t necessary for every group of links – it is designed for major groupings. A copyright, author, and contact link could sit happily by themselves in a footer element, for example.

If you want to style these new HTML 5 elements (and you probably do, right? It’s much nicer than using <div id="content">..., etc) you will experience a problem in older browsers, most notably Internet Explorer versions 8 and earlier, that don’t understand these tags.

From: https://www.htmldog.com/

Box-Sizing and @Media Screen

See the Pen Adaptive Layout Example: Simplified by Nicholas D’Angelo (@ndangelo) on CodePen.

Assignment (We will see how far we get in class)

Take the previous create your own composition using divs, and apply box-sizing and @media_screen. Make sure to include at least six divs that have a background-color. Make sure all divs are nested in a wrapper. The minimum width of your composition should be 400px. The wrapper should expand to contain all your divs. Add at least one image.

Include the following code between your header tags to ensure mobile compliance.

   <meta name="viewport" content="initial-scale=1, maximum-scale=1">


Use an external CSS file.

Bonus: use the following CSS to scale your images.

img {
  width: 100%;
  height: auto;
}

Text: Time, Mark, and “Presentational”

HTML5 adds and amends a handful of tags relating to text. Many of the minor amendments, such as differing attributes in existing tags, have already been covered, but this page looks at two new tags — time and mark — as well as the re-definition of presentational tags.

Time

time is used to make dates and times super-semantically rich.

The text sandwiched in the middle of the opening and closing tag can be any format of date of time – the whole precise lot, or just one part, such as a day. It is made more helpful, however, by the datetime attribute, the value of which should be a machine-readable date and/or time.


<p>Written by Doctor Who on <time datetime="2052-11-21">Thursday 21st November 2052</time>.</p>

Valid datetime values can take the format of a year-month-day date (as above), as a “fuzzy” date, such as “2052-11”, of a time, such as “09:30” (always using a 24-hour clock), or a combination, such as “2052-11-21 09:30”. This can also accommodate time zones and durations.

If the element’s textual content is already machine-readable, you don’t need the datetime attribute, but it is required if it isn’t.

Mark

Text can be highlighted, as if with a marker pen, using mark:


<blockquote>
    <p>He wants to play with his <mark>Legos</mark></p>
</blockquote>

<p>The person being quoted is clearly American because, for some odd reason, they pluralise "Lego".</p>

Yes, this is a form of emphasis, literally speaking, but it won’t always be considered emphasis in the original meaning (for example, the person being quoted above isn’t emphasizing “Legos”, the commenter is), hence its inclusion.

Conditional Comments

Conditional comments, which discuss HTML comments that Internet Explorer (up to version 9) interprets differently from other modern browsers, can be formalized as follows:

“The provided comments serve the purpose of selectively delivering specific portions of HTML content exclusively to Internet Explorer versions up to 9. These comments exploit a characteristic of Internet Explorer and are intended to provide a distinct set of instructions to these particular browsers. In contrast, compliant and contemporary web browsers will recognize these comments merely as unobtrusive annotations and proceed without any specific interpretation.”

They have become a commonly used method of latching extra CSS to a document to plaster over holes in these browsers’ display capabilities. So, for example, you might add something like this inside your head element:


<link href="everything.css" rel="stylesheet">
<!--[if IE]><link href="stupidie.css" rel="stylesheet"><![endif]-->

Everything between <!--[if IE]> and <![endif]--> will be picked up by Internet Explorer. So this will bolt on a CSS file as normal, and then, only if the browser is Internet Explorer (in practice, this will be Internet Explorer version 9 and below), it will also apply an extra CSS file patch.

You can also target specific versions of Internet Explorer:

  • <!--[if IE 6>…
  • <!--[if IE 7>…
  • <!--[if IE 8>…
  • <!--[if IE 9>…

You can also target all versions that are greater or less than a certain number:

  • eg. <!--[if IE gt 6]>… for IE versions greater than 6
  • eg. <!--[if IE gte 8]>… for IE versions greater than or equal to than 8
  • eg. <!--[if IE lt 7]>… for IE versions less than 7
  • eg. <!--[if IE lte 7]>… for IE versions less than or equal to 7

There are more options than this which are largely totally unnecessary. Take a look at Microsoft’s own take on it if you feel compelled to find out more.

Conditional comments really are horrible. Necessary, often, at the moment, but horrible. Like all hacks, it is best to avoid them wherever possible. They’re not really there for whacking completely different stylesheets in different browsers, for example. It’s more for small fallbacks so that you can use the scrumptious likes of CSS 3 without compromise. And don’t assume you have to accommodate every stone-age version of IE, either – try and figure out what is sensible for you to support. Are your web site visitors likely to be using IE6? Probably not.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29