controls the presentation of a web page

Lesson 2: Content, Structure, Presentation, and Behavior

Earlier in this course you learned to control the presentation of your web content using Cascading Style Sheets (CSS). In this lesson, you will learn how to control web page presentation using your web authoring software. Some web authoring software provides direct support for CSS, while other products handle presentation in other ways. which may or may not be compliant with web standards. Which category does your web authoring software fall into? How could its support for CSS be improved?

Learner Outcome

At the completion of this exercise, you will be able to:

• control and manipulate the style of HTML elements on a web page using web authoring software.

Examples of Style Techniques in Common Web Authoring Tools

CSS is integrated tightly into Dreamweaver, so there are many ways to define and edit styles and assign them to various elements on the page. Here are a few tips:

• From the main menu, select Format > CSS Styles, then you can either select "New..." to create a new style sheet, or "Attach Style Sheet..." to load an existing one.
• From the main menu, select Modify > CSS Styles. A window appears that shows all styles that apply to the page, or to the selected content. Double-clicking any CSS selector within this window brings up a CSS Rule Definition window like the one shown below. This window can be used to define styles simply by selecting options. You don't have to remember the names of all those CSS properties!
• To assign a class to an element, just right click on any element on your web page, then select "CSS Styles" from the menu that pops up. If a style sheet has been associated with the web page, you will see a list of CSS classes and can select the one you want to apply to that element.

Like Dreamweaver, KompoZer includes a dialog box from which you can create CSS style definitions by selecting values for various properties. As of version 0.8b3, this feature is accessed from the main menu by selecting Tools > CSS Editor.

After you've defined CSS classes, these appear in a dropdown list on the toolbar, so they can easily be assigned to any element just by selecting the element, then choosing the desired class from the toolbar.

Below is a screen shot of the CSS Editor in KompoZer:

Other Web Authoring Software

• If a web authoring tool supports CSS, it is typically easy to find in the menus or toolbars. If you can't find any options related to CSS in your software, or you can't figure out how to use them, try searching the software's Help system for "CSS", and explore the matching help pages to learn about techniques.
• If a web authoring tool has little or no documentation concerning CSS, it probably has little or no support for CSS, and is instead relying on outdated non-standard techniques for controlling the presentation of web content. Web authoring tools that don't support CSS should be avoided.
• Make a copy of your portfolio, including all files, especially the CSS file. Then, using your web authoring software, open the home page of the new copy using your web authoring software. Important! Be sure you open the copy, not the original.
• Now play with your web authoring tool's CSS features. Try to find and modify as many CSS properties as possible to change the appearance of your web page. Try to make your web page look better, but if you already had the perfect design, just try to make it look different .
• When you're satisfied with the look of your new page, save all related files (most web authoring software has an option in the File menu for this).

Share your newly stylized portfolio home page with your instructor. Be prepared to explain to the instructor which styles you changed and how, in order to attain the current look and feel of your web page. When you're finished, proceed to the next lesson .

Learn HTML Code, Tags & CSS

Intimidated By CSS? The Definitive Guide To Make Your Fear Disappear

CSS is the language that defines the presentation of a web page. It is used to add color, background images, and textures, and to arrange elements on the page. However, CSS does a lot more than just paint a pretty picture. It is also used to enhance the usability of a website. The image below shows the front page of YouTube. On the left, is a regular rendering of the page, and on the right you can see how it looks without CSS.

Not only is the image on the right less interesting, but it is also a lot harder to use.

In this short guide, we’ll introduce CSS, demonstrate CSS syntax, explain how CSS works, show you how to add CSS markup to an HTML document, and point you toward great resources from around the web where you can learn more about CSS.

• 1.1 How is CSS Different From HTML?
• 2.1 An Example of CSS Syntax
• 3.1 When to Use Classes
• 3.2 When to Use IDs
• 3.3 When Not to Use Hooks
• 3.4 Best Practices for Preparing Your Markup for Styling
• 4.1 Inline Styles
• 4.2 Internal Stylesheets
• 4.3 External Stylesheets
• 4.4 When to Use Each Method
• 5.1 Cascading Inheritance
• 5.2 Specificity
• 6.1 The Box Model
• 6.2 Creating Layouts
• 6.3 Web Fonts & Typography
• 6.4 Create a Consistent Cross-Browser Experience
• 7 Related Elements
• 8 Tutorials and Resources

What is CSS?

CSS stands for Cascading Style Sheets and it is the language used to style the visual presentation of web pages. CSS is the language that tells web browsers how to render the different parts of a web page.

Every item or element on a web page is part of a document written in a markup language. In most cases, HTML is the markup language, but there are other languages in use such as XML. Throughout this guide we will use HTML to demonstrate CSS in action, just keep in mind that the same principles and techniques apply if you’re working with XML or a different markup language.

How is CSS Different From HTML?

The first thing to understand when approaching the topic of CSS is when to use a styling language like CSS and when to use a markup language such as HTML.

• All critical website content should be added to the website using a markup language such as HTML.
• Presentation of the website content should be defined by a styling language such as CSS.

Blog posts, page headings, video, audio, and pictures that are not part of the web page presentation should all be added to the web page with HTML. Background images and colors, borders, font size, typography, and the position of items on a web page should all be defined by CSS.

It’s important to make this distinction because failing to use the right language can make it difficult to make changes to the website in the future and create accessibility and usability issues for website visitors using a text-only browser or screen reader.

CSS syntax includes selectors, properties, values, declarations, declaration blocks, rulesets, at-rules, and statements.

• A selector is a code snippet used to identify the web page element or elements that are to be affected by the styles.
• A property is the aspect of the element that is to be affected. For example, color, padding, margin, and background are some of the most commonly used CSS properties.
• A value is used to define a property . For example, the property color might be given the value of red like this: color: red; .
• The combination of a property and a value is called a declaration .
• In many cases, multiple declarations are applied to a single selector . A declaration block is the term used to refer to all of the declarations applied to a single selector .
• A single selector and the declaration block that follows it in combination are referred to as a ruleset .
• At-rules are similar to rulesets but begin with the @ sign rather than with a selector . The most common at-rule is the @media rule which is often used to create a block of CSS rules that are applied based on the size of the device viewing the web page.
• Both rulesets and at-rules are CSS statements .

An Example of CSS Syntax

Let’s use a block of CSS to clarify what each of these items is.

In this example, h1 is the selector. The selector is followed by a declaration block that includes three declarations. Each declaration is separated from the next by a semicolon. The tabs and line breaks are optional but used by most developers to make the CSS code more human-readable.

By using h1 as the selector, we are saying that every level 1 heading on the web page should follow the declarations contained in this ruleset.

The ruleset contains three declarations:

• font-size: 3em;
• text-decoration: underline;

color , font-size , and text-decoration are all properties. There are literally hundreds of CSS properties you can use, but only a few dozen are commonly used .

We applied the values red , 3em , and underline to the properties we used. Each CSS property is defined to accept values formatted in a specific way.

For the color property we can either use a color keyword or a color formula in Hex, RGB, or HSL format. In this case, we used the color keyword red . There are a few dozen color keywords available in CSS3, but millions of colors can be accessed with the other color models.

We applied the value of 3em to the property font-size . There are a wide range of size units we could have used including pixels, percentages, and more.

Finally, we added the value underline to the property text-decoration . We could have also used overline or line-through as values for text-decoration . In addition, CSS3 allows for the use of the line-styles solid, double, dotted, dashed, and wavy was well the specification of text-decoration colors. We could have applied all three values at once by using a declaration like this:

That rule would cause the h1 in our initial example to be underlined with a blue double line. The text itself would remain red as defined in our color property.

Preparing HTML Markup for Styling

CSS should be used to add content to a web page. That task is best handled by markup languages such as HTML and XML. Instead, CSS is used to pick items that already exist on a web page and to define how each item should appear.

In order to make it as easy as possible to select items on a web page, identifiers should be added to elements on the webpage. These identifiers, often called hooks in the context of CSS, make it easier to identify the items that should be affected by the CSS rules.

Classes and IDs are used as hooks for CSS styles. While the way CSS renders is not affected by the use of classes and hooks, they give developers the ability to pinpoint HTML elements that they wish to style.

Classes and IDs aren’t interchangeable. It’s important to know when to use each.

When to Use Classes

Use classes when there are multiple elements on a single web page that need to be styled. For example, let’s say that you want links in the page header and footer to be styled in a consistent manner, but not the same way as the links in the body of the page. To pinpoint those links you could add a class to each of those links or the container holding the links. Then, you could specify the styles using the class and be sure that they would only be applied to the links with that class attribute.

When to Use IDs

Use IDs for elements that only appear once on a web page. For example, if you’re using an HTML unordered list for your site navigation, you could use an ID such as nav to create a unique hook for that list.

Here’s an example of the HTML and CSS code for a simple navigation bar for a basic e-commerce site.

That code would produce a horizontal navigation menu with a light gray background beginning from the left-hand side of the page. Each navigation item will have 10 pixels of spacing on all sides and the background of each item will become darker when you allow your mouse to hover over it.

Any additional lists on the same web page would not be affected by that code.

#example-nav { background: lightgray; overflow: auto; } #example-nav li { float: left; padding: 10px; } #example-nav li:hover { background: gray; }

When Not to Use Hooks

You don’t have to add a class or ID to an HTML element in order to style it with CSS. If you know you want to style every instance of a specific element on a web page you can use the element tag itself.

For example, let’s say that you want to create consistent heading styles. Rather than adding a class or ID to each heading it would be much easier to simply style all heading elements by using the heading tag.

That code would render like this.

.code_sample ul { list-style-type: upper-roman; margin-left: 50px; } .code_sample p { color: darkblue }

Some paragraph text here. Two short sentences.

• A quick list
• Just two items

Additional paragraph text here. This time let’s go for three sentences. Like this.

• Another list
• Still just two items

In this case, even though we only wrote the style rules for ul and p elements once each, multiple items were affected. Using element selectors is a great way to create an attractive, readable, and consistent website experience by creating consistent styling of headings, lists, and paragraph text on every page of the website.

Best Practices for Preparing Your Markup for Styling

Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write markup that makes it easy to poinpoint specific elements?

• Apply classes liberally and consistently. Use classes for items that should be aligned in one direction or the other, and for any elements that appear repeatedly on a single web page.
• Apply IDs to items that appear only once on a web page. For example, use an ID on the div that contains your web page content, on the ul that that contains the navigation menu, and on the div that contains your web page header.

Ways of Linking CSS Rules to an HTML Document

There are three ways of adding CSS rules to a web page:

• Inline styles
• Internal stylesheets
• External stylesheets

In the vast majority of cases, external stylesheets should be used. However, there are instances where inline styles or internal stylesheets may be used.

Inline Styles

Inline styles are applied to specific HTML elements. The HTML attribute style is used to define rules that only apply to that specific element. Here’s a look at the syntax for writing inline styles.

That code would cause just that heading to render with red underlined text and 10 pixels of padding on all sides. There are very few instances where inline styles should be used. In nearly all cases they should be avoided and the styles added to a stylesheet.

Internal Stylesheets

The earlier examples in this tutorial make use of internal stylesheets. An internal stylesheet is a block of CSS added to an HTML document head element. The style element is used between the opening and closing head tags, and all CSS declarations are added between the style tags.

We can duplicate the inline styles from the code above in an internal stylesheet using this syntax.

That code would produce the same results as the inline styles. However, the benefit to using internal stylesheets rather than inline styles is that all h1 elements on the page will be affected by the styles.

External Stylesheets

External stylesheets are documents containing nothing other than CSS statements. The rules defined in the document are linked to one or more HTML documents by using the link tag within the head element of the HTML document.

To use an external stylesheet, first create the CSS document.

Now that we have an external stylesheet with some styles, we can link it to an HTML document using the link element.

When this HTML document is loaded the link tag will cause the styles in the file styles.css to be loaded into the web page. As a result, all level 1 heading elements will appear with red text, underlined, and with 10 pixels of padding applied to every side.

When to Use Each Method

In nearly all cases external stylesheets are the proper way to style web pages. The primary benefit to using external stylesheets is that they can be linked to any number of HTML documents. As a result, a single external stylesheet can be used to define the presentation of an entire website.

Internal stylesheets may be used when designing a simple one-page website. If the website will never grow beyond that single initial page using an internal stylesheet is acceptable.

Inline styles are acceptable to use in two instances:

• When writing CSS rules that will only be applied to a single element on a single web page.
• When applied by a WYSIWYG editor such as the tinyMCE editor integrated into a content management system such as WordPress.

In all other cases, inline styles should be avoided in favor of external stylesheets.

How CSS Works

When writing CSS, there are many times that rules are written that conflict with each other. For example, when styling headers, all of the following rules may apply to an h1 element.

• An element-level rule creating consistent h1 rendering across all pages of the website.
• A class-level rule defining the rendering of h1 elements occurring in specific locations – such as the titles of blog posts.
• An id-level element defining the rendering of an h1 element used in just one place on a one or more web pages – such as the website name.

How can a developer write rules that are general enough to cover every h1 yet specific enough to define styles that should only appear on specific instances of a given element?

CSS styles follow two rules that you need to understand to write effective CSS. Understanding these rules will help you write CSS that is broad when you need it to be, yet highly-specific when you need it to be.

The two rules that govern how CSS behaves are inheritance and specificity.

Cascading Inheritance

Why are CSS styles called cascading ? When multiple rules are written that conflict with each other, the last rule written will be implemented. In this way, styles cascade downward and the last rule written is applied.

Let’s look at an example. Let’s write two CSS rules in an internal stylesheet that directly contradict each other.

The browser will cascade through the styles and apply the last style encountered, overruling all previous styles. As a result, the heading is blue.

.code_sample_p {color: red;} .code_sample_p {color: blue;}

What color will the text of this paragraph be?

This same cascading effect comes into play when using external stylesheets. It’s common for multiple external stylsheets to be used. When this happens, the style sheets are loaded in the order they appear in the HTML document head element. Where conflicts between stylesheet rules occur, the CSS rules contained in each stylesheet will overrule those contained in previously loaded stylesheets. Take the following code for example:

The rules in styles_2.css will be applied if there are conflicts between the styles contained in these two stylesheets.

Inheritance of styles is another example of the cascading behavior of CSS styles.

When you define a style for a parent element the child elements receive the same styling. For example, if we apply color styling to an unordered list, the child list items will display the same styles.

Here’s how that code would render.

Not every property passes from a parent to its child elements . Browsers deem certain properties as non-inherited properties. Margins are one example of a property that isn’t passed down from a parent to a child element.

Specificity

The second rule that determines which rules are applied to each HTML element is the rule of specificity .

CSS rules with more specific selectors will overrule CSS rules with less specific selectors regardless of which occurs first. As we discussed, the three most common selectors are element tags, classes, and ids.

• The least specific type of selector is the element level selector.
• When a class is used as a selector it will overrule CSS rules written with the element tag as the selector.
• When an ID is used as a selector it will overrule the CSS rules written with element or class selectors.

Another factor that influences specificity is the location where the CSS styles are written. Styles written inline with the style attribute overrule styles written in an internal or external stylesheet.

Another way to increase the specificity of a selector is to use a series of elements, classes, and IDs to pinpoint the element you want to address. For example, if you want to pinpoint unordered list items on a list with the class “example-list” contained with a div with the id “example-div” you could use the following selector to create a selector with a high level of specificity.

While this is one way to create a very specific selector, it is recommended to limit the use of these sorts of selectors since they do take more time to process than simpler selectors.

Once you understand how inheritance and specificity work you will be able to pinpoint elements on a web page with a high degree of accuracy.

What Can CSS Do?

A better question might be: “What can’t CSS do?”

CSS can be used to turn an HTML document into a professional, polished design. Here are a few of the things you can accomplish wish CSS:

• Create a flexible grid for designing fully responsive websites that render beautifully on any device.
• Style everything from typography, to tables, to forms, and more.
• Position elements on a web page relative to one another using properties such as float , position , overflow , flex , and box-sizing .
• Add background images to any element.
• Create shapes, interactions, and animations.

These concepts and techniques go beyond the scope of this introductory guide, but the following resources will help you tackle these more advanced topics.

The Box Model

If you plan to use CSS to build web page layouts, one of the first topics to master is the box model. The box model is a way of visualizing and understanding how each item on a web page is a combination of content, padding, border, and margin.

Understanding how these four pieces fit together is a fundamental concept that must be mastered prior to moving on to other CSS layout topics.

Two great places to learn about the box model include:

• An explanation of the box model from the World Wide Web Consortium.
• An introduction to the CSS box model from the Mozilla Developer Network.

Creating Layouts

There are a number of techniques and strategies used to create layouts with CSS, and understanding the box model is a prerequisite to every strategy. With the box model mastered you’ll be ready to learn how to manipulate boxes of content on a web page.

The Mozilla Developer Network offers a good introduction to CSS layouts . This short read covers the basic concepts behind CSS layouts, and quickly introduces properties such as text-align , float , and position .

A much more extensive an in-depth guide to CSS layouts is available from the W3C: The CSS layout model . This document is a resource for professional developers, so if you’re new to CSS take your time as you review it. This isn’t a quick read. However, everything you need to know about creating CSS layouts is contained in this document.

Grid layouts have been the go-to strategy for designing responsive layouts for several years. CSS grids have been created from scratch for years and there are many different grid-generating websites and development frameworks on the market. However, within a few years, support for grid layouts will be part of the CSS3 specification. You can learn a lot about grids by reading up on the topic at the W3C website . For a lighter and shorter introduction to grid layouts, take a look at this article from Mozilla .

Within a few years, CSS3 Flexible Box, or flexbox, is expected to become the dominant model for designing website layouts. The flexbox specification is not yet entirely complete and finalized, and support for flexbox is not consistent between browsers. However, every budding CSS developer needs to be familiar with flexbox and prepared to implement it in near future. The Mozilla Developer Network is one of the best places to get up to speed on flexbox.

Web Fonts & Typography

There’s a lot that can be done to add personality and improve the readability of the content on a website. Learn more about selecting fonts and typography for the web in our guide to Fonts & Web Typography .

Create a Consistent Cross-Browser Experience

Every browser interprets the HTML specification a little differently. As a result, when identical code is rendered in two different browsers, there are often minor differences in the way the code is rendered.

Take this short bit of code for instance.

If we render that code in two different browsers we will see subtle differences. Here’s how Mozilla Firebox and Microsoft Edge render that code.

Can you see the subtle differences? Firefox, on the left, adds just a little more margin around each heading element. In addition, the bullet points are a little smaller when rendered in Edge. While these differences are not consequential there are instances where these minor variations between browsers can create problems.

CSS can be used to smooth out these cross-browser compatibility issues. One popular way to do this is to implement a boilerplate CSS document called normalize.css . This freely-available CSS file can be linked to any HTML document to help minimize cross-browser rendering differences.

The easiest way to include normalize.css in your design work is to link to the copy hosted by Google . To do so, just drop this line of code into the head element of an HTML document.

Related Elements

Tutorials and Resources

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

Present web pages to secondary attached displays

Chrome 66 allows web pages to use a secondary attached display through the Presentation API and to control its contents through the Presentation Receiver API .

Until now, web developers could build experiences where a user would see local content in Chrome that is different from the content they’d see on a remote display while still being able to control that experience locally. Examples include managing a playback queue on youtube.com while videos play on the TV, or seeing a slide reel with speaker notes on a laptop while the fullscreen presentation is shown in a Hangout session.

There are scenarios though where users may simply want to present content onto a second, attached display. For example, imagine a user in a conference room outfitted with a projector to which they are connected via an HDMI cable. Rather than mirroring the presentation onto a remote endpoint, the user really wants to present the slides full-screen on the projector , leaving the laptop screen available for speaker notes and slide control. While the site author could support this in a very rudimentary way (e.g. popping up a new window, which the user has to then manually drag to the secondary display and maximize to fullscreen), it is cumbersome and provides an inconsistent experience between local and remote presentation.

Present a page

Let me walk you through how to use the Presentation API to present a web page on your secondary attached display. The end result is available at https://googlechrome.github.io/samples/presentation-api/ .

First, we’ll create a new PresentationRequest object that will contain the URL we want to present on the secondary attached display.

Showing a presentation display prompt requires a user gesture such as a click on a button. So let’s call presentationRequest.start() on a button click and wait for the promise to resolve once the user has selected a presentation display (.e.g. a secondary attached display in our use case).

The list presented to the user may also include remote endpoints such as Chromecast devices if you’re connected to a network advertising them. Note that mirrored displays are not in the list. See http://crbug.com/840466 .

When promise resolves, the web page at the PresentationRequest object URL is presented to the chosen display. Et voilà!

We can now go further and monitor "close" and "terminate" events as shown below. Note that it is possible to reconnect to a "closed" presentationConnection with presentationRequest.reconnect(presentationId) where presentationId is the ID of the previous presentationRequest object.

Communicate with the page

Now you're thinking, that’s nice but how do I pass messages between my controller page (the one we’ve just created) and the receiver page (the one we’ve passed to the PresentationRequest object)?

First, let’s retrieve existing connections on the receiver page with navigator.presentation.receiver.connectionList and listen to incoming connections as shown below.

A connection receiving a message fires a "message" event you can listen for. The message can be a string, a Blob, an ArrayBuffer, or an ArrayBufferView. Sending it is as simple as calling connection.send(message) from the controller page or the receiver page.

Play with the sample at https://googlechrome.github.io/samples/presentation-api/ to get a sense of how it works. I’m sure you’ll enjoy this as much as I do.

Samples and demos

Check out the official Chrome sample we've used for this article.

I recommend the interactive Photowall demo as well. This web app allows multiple controllers to collaboratively present a photo slideshow on a presentation display. Code is available at https://github.com/GoogleChromeLabs/presentation-api-samples .

One more thing

Chrome has a "Cast" browser menu users can invoke at any time while visiting a website. If you want to control the default presentation for this menu, then assign navigator.presentation.defaultRequest to a custom presentationRequest object created earlier.

To inspect the receiver page and debug it, go to the internal chrome://inspect page, select “Other”, and click the “inspect” link next to the currently presented URL.

You may also want to check out the internal chrome://media-router-internals page for diving into the internal discovery/availability processes.

What's next

As of Chrome 66, ChromeOS, Linux, and Windows platforms are supported. Mac support will come later .

• Chrome Feature Status: https://www.chromestatus.com/features#presentation%20api
• Implementation Bugs: https://crbug.com/?q=component:Blink>PresentationAPI
• Presentation API Spec: https://w3c.github.io/presentation-api/
• Spec Issues: https://github.com/w3c/presentation-api/issues

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2018-04-05 UTC.

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Document structure

HTML documents include a document type declaration and the <html> root element. Nested in the <html> element are the document head and document body. While the head of the document isn't visible to the sighted visitor, it is vital to make your site function. It contains all the meta information, including information for search engines and social media results, icons for the browser tab and mobile home screen shortcut, and the behavior and presentation of your content. In this section, you'll discover the components that, while not visible, are present on almost every web page.

To create the MachineLearningWorkshop.com (MLW) site, start by including the components that should be considered essential for every web page: the type of document, the content's human language, the character set, and, of course, the title or name of the site or application.

Add to every HTML document

There are several features that should be considered essential for any and every web page. Browsers will still render content if these elements are missing, but include them. Always.

<!DOCTYPE html>

The first thing in any HTML document is the preamble. For HTML, all you need is <!DOCTYPE html> . This may look like an HTML element, but it isn't. It's a special kind of node called "doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a different rendering mode known as quirks mode . Including the doctype helps prevent quirks mode.

<html>

The <html> element is the root element for an HTML document. It is the parent of the <head> and <body> , containing everything in the HTML document other than the doctype. If omitted it will be implied, but it is important to include it, as this is the element on which the language of the content of the document is declared.

Content language

The lang language attribute added to the <html> tag defines the main language of the document. The value of the lang attribute is a two- or three-letter ISO language code followed by the region. The region is optional, but recommended, as a language can vary greatly between regions. For example, French is very different in Canada ( fr-CA ) versus Burkina Faso ( fr-BF ). This language declaration enables screen readers, search engines, and translation services to know the document language.

The lang attribute is not limited to the <html> tag. If there is text within the page that is in a language different from the main document language, the lang attribute should be used to identify exceptions to the main language within the document. Just like when it is included in the head, the lang attribute in the body has no visual effect. It only adds semantics, enabling assistive technologies and automated services to know the language of the impacted content.

In addition to setting the language for the document and exceptions to that base language, the attribute can be used in CSS selectors. <span lang="fr-fr">Ceci n'est pas une pipe.</span> can be targeted with the attribute and language selectors [lang|="fr"] and :lang(fr) .

<head>

Nested between the opening and closing <html> tags, we find the two children: <head> and <body> :

The <head> , or document metadata header, contains all the metadata for a site or application. The body contains the visible content. The rest of this section focuses on the components found nested inside the opening and closing <head></head>

Required components inside the <head>

The document metadata, including the document title, character set, viewport settings, description, base URL, stylesheet links, and icons, are found in the <head> element. While you may not need all these features, always include character set, title, and viewport settings.

Character encoding

The very first element in the <head> should be the charset character encoding declaration. It comes before the title to ensure the browser can render the characters in that title and all the characters in the rest of the document.

The default encoding in most browsers is windows-1252 , depending on the locale. However, you should use UTF-8 , as it enables the one- to four-byte encoding of all characters, even ones you didn't even know existed. Also, it's the encoding type required by HTML5.

To set the character encoding to UTF-8, include:

By declaring UTF-8 (case-insensitive), you can even include emojis in your title (but please don't).

The character encoding is inherited into everything in the document, even <style> and <script> . This little declaration means you can include emojis in class names and the selectorAPI (again, please don't). If you do use emojis , make sure to use them in a way that enhances usability without harming accessibility.

Document title

Your home page and all additional pages should each have a unique title. The contents for the document title, the text between the opening and closing <title> tags, are displayed in the browser tab, the list of open windows, the history, search results, and, unless redefined with <meta> tags , in social media cards.

Viewport metadata

The other meta tag that should be considered essential is the viewport meta tag, which helps site responsiveness, enabling content to render well by default, no matter the viewport width. While the viewport meta tag has been around since June 2007, when the first iPhone came out, it's only recently been documented in a specification . As it enables controlling a viewport's size and scale, and prevents the site's content from being sized down to fit a 960px site onto a 320px screen, it is definitely recommended.

The preceding code means "make the site responsive, starting by making the width of the content the width of the screen". In addition to width , you can set zoom and scalability, but they both default to accessible values. If you want to be explicit, include:

Viewport is part of the Lighthouse accessibility audit ; your site will pass if it is scalable and has no maximum size set.

So far, the outline for our HTML file is:

Other <head> content

There's a lot more that goes into the <head> . All the metadata, in fact. Most of the elements you'll find in the <head> are covered here, while saving a plethora of the <meta> options for the next chapter.

You've seen the meta character set and the document title, but there is a lot more metadata outside of <meta> tags that should be included.

The <head> is where you include styles for your HTML. There is a learning path dedicated to CSS if you want to learn about styles, but you do need to know how to include them in your HTML documents.

There are three ways to include CSS: <link> , <style> , and the style attribute.

The main two ways to include styles in your HTML file are by including an external resource using a <link> element with the rel attribute set to stylesheet , or including CSS directly in the head of your document within opening and closing <style> tags.

The <link> tag is the preferred method of including stylesheets. Linking a single or a few external style sheets is good for both developer experience and site performance: you get to maintain CSS in one spot instead of it being sprinkled everywhere, and browsers can cache the external file, meaning it doesn't have to be downloaded again with every page navigation.

The syntax is <link rel="stylesheet" href="styles.css"> , where styles.css is the URL of your stylesheet. You'll often see type="text/css" . Not necessary! If you are including styles written in something other than CSS, the type is needed, but since there isn't any other type, this attribute isn't needed. The rel attribute defines the relationship: in this case stylesheet . If you omit this, your CSS will not be linked.

You'll discover a few other rel values shortly, but let's first discuss other ways of including CSS.

If you want your external style sheet styles to be within a cascade layer but you don't have access to edit the CSS file to put the layer information in it, you'll want to include the CSS with @import inside a <style> :

When using @import to import style sheets into your document, optionally into cascade layers, the @import statements must be the first statements in your <style> or linked stylesheet, outside of the character set declaration.

While cascade layers are still fairly new and you might not spot the @import in a head <style> , you will often see custom properties declared in a head style block:

Styles, either via <link> or <style> , or both, should go in the head. They will work if included in the document's body, but you want your styles in the head for performance reasons. That may seem counterintuitive, as you may think you want your content to load first, but you actually want the browser to know how to render the content when it is loaded. Adding styles first prevents the unnecessary repainting that occurs if an element is styled after it is first rendered.

Then there's the one way of including styles you'll never use in the <head> of your document: inline styles. You'll probably never use inline styles in the head because the user agents' style sheets hide the head by default. But if you want to make a CSS editor without JavaScript, for example, so you can test your page's custom elements, you can make the head visible with display: block , and then hide everything in the head, and then with an inline style attribute, make a content-editable style block visible.

While you can add inline styles on the <style> , it's way more fun to style your <style> in your style . I digress.

Other uses of the <link> element

The link element is used to create relationships between the HTML document and external resources. Some of these resources may be downloaded, others are informational. The type of relationship is defined by the value of the rel attribute. There are currently 25 available values for the rel attribute that can be used with <link> , <a> and <area> , or <form> , with a few that can be used with all. It's preferable to include those related to meta information in the head and those related to performance in the <body> .

You'll include three other types in your header now: icon , alternate , and canonical . (You'll include a fourth type, rel="manifest" , in the next module ).

Use the <link> tag, with the rel="icon" attribute/value pair to identify the favicon to be used for your document. A favicon is a very small icon that appears on the browser tab, generally to the left of the document title. When you have an unwieldy number of tabs open, the tabs will shrink and the title may disappear altogether, but the icon always remains visible. Most favicons are company or application logos.

If you don't declare a favicon, the browser will look for a file named favicon.ico in the top-level directory (the website's root folder). With <link> , you can use a different file name and location:

The preceding code says "use the mlwicon.png as the icon for scenarios where a 16px, 32px, or 48px makes sense." The sizes attribute accepts the value of any for scalable icons or a space-separated list of square widthXheight values; where the width and height values are 16, 32, 48, or greater in that geometric sequence, the pixel unit is omitted, and the X is case-insensitive.

There are two special non-standard kind of icons for Safari browser: apple-touch-icon for iOS devices and mask-icon for pinned tabs on macOS. apple-touch-icon is applied only when the user adds a site to home screen: you can specify multiple icons with different sizes for different devices. mask-icon will only be used if the user pins the tab in desktop Safari: the icon itself should be a monochrome SVG, and the color attribute fills the icon with needed color.

While you can use <link> to define a completely different image on each page or even each page load, don't. For consistency and a good user experience, use a single image! Twitter uses the blue bird: when you see the blue bird in your browser tab, you know that tab is open to a Twitter page without clicking on the tab. Google uses different favicons for each of its different applications: there's a mail icon, a calendar icon, for example. But all the Google icons use the same color scheme. Again, you know exactly what the content of an open tab is simply from the icon.

Alternate versions of the site

We use the alternate value of the rel attribute to identify translations, or alternate representations, of the site.

Let's pretend we have versions of the site translated into French and Brazilian Portuguese:

When using alternate for a translation, the hreflang attribute must be set.

The alternate value is for more than just translations. For example, the type attribute can define the alternate URI for an RSS feed when the type attribute is set to application/rss+xml or application/atom+xml . Let's link to a pretend PDF version of the site.

If the rel value is alternate stylesheet , it defines an alternate stylesheet and the title attribute must be set giving that alternate style a name.

If you create several translations or versions of Machine Learning Workshop, search engines may get confused as to which version is the authoritative source. For this, use rel="canonical" to identify the preferred URL for the site or application.

Include the canonical URL on all of your translated pages, and on the home page, indicating our preferred URL:

The rel="canonical" canonical link is most often used for cross-posting with publications and blogging platforms to credit the original source; when a site syndicates content, it should include the canonical link to the original source.

The <script> tag is used to include, well, scripts. The default type is JavaScript. If you include any other scripting language, include the type attribute with the mime type, or type="module" if it's a JavaScript module . Only JavaScript and JavaScript modules get parsed and executed.

The <script> tags can be used to encapsulate your code or to download an external file. In MLW, there is no external script file because contrary to popular belief, you don't need JavaScript for a functional website, and, well, this is an HTML learning path, not a JavaScript one.

You will be including a tiny bit of JavaScript to create an Easter egg later on:

This snippet creates an event handler for an element with the id of switch . With JavaScript, you don't want to reference an element before it exists. It doesn't exist yet, so we won't include it yet. When we do add the light switch element, we'll add the <script> at the bottom of the <body> rather than in the <head> . Why? Two reasons. We want to ensure elements exist before the script referencing them is encountered as we're not basing this script on a DOMContentLoaded event . And, mainly, JavaScript is not only render-blocking , but the browser stops downloading all assets when scripts are downloaded and doesn't resume downloading other assets until the JavaScript has finished execution. For this reason, you will often find JavaScript requests at the end of the document rather than in the head.

There are two attributes that can reduce the blocking nature of JavaScript download and execution: defer and async . With defer , HTML rendering is not blocked during the download, and the JavaScript only executes after the document has otherwise finished rendering. With async , rendering isn't blocked during the download either, but once the script has finished downloading, the rendering is paused while the JavaScript is executed.

To include MLW's JavaScript in an external file, you could write:

Adding the defer attribute defers the execution of the script until after everything is rendered, preventing the script from harming performance. The async and defer attributes are only valid on external scripts.

There is another element that is only found in the <head>. Not used very often, the <base> element allows setting a default link URL and target. The href attribute defines the base URL for all relative links.

The target attribute, valid on <base> as well as on links and forms, sets where those links should open. The default of _self opens linked files in the same context as the current document. Other options include _blank , which opens every link in a new window, the _parent of the current content, which may be the same as self if the opener is not an iframe, or _top , which is in the same browser tab, but popped out of any context to take up the entire tab.

Most developers add the target attribute to the few, if any, links they want to open in a new window on the links or form themselves, rather than using <base> .

If our website found itself nested within an iframe on a site like Yummly, including the <base> element would mean when a user clicks on any links within our document, the link will load popped out of the iframe, taking up the whole browser window.

One of the drawbacks of this element is that anchor links are resolved with <base> . The <base> effectively converts the link <a href="#ref"> to <a target="_top" href="https://machinelearningworkshop.com#ref"> , triggering an HTTP request to the base URL with the fragment attached.

A few other things to note about <base> : there can be only one <base> element in a document, and it should come before any relative URLs are used, including possible script or stylesheet references.

The code now looks like this:

HTML comments

Note that the script is wrapped between some angle brackets, dashes, and a bang. This is how you comment out HTML. We'll leave the script commented out until we have the actual content on the page. Anything between <!-- and --> will not be visible or parsed. HTML comments can be put anywhere on the page, including the head or body, with the exception of scripts or style blocks, where you should use JavaScript and CSS comments, respectively.

You have covered the basics of what goes in the <head> , but you want to learn more than the basics. In the next sections, we will learn about meta tags, and how to control what gets displayed when your website is linked to on social media.

Check your understanding

Test your knowledge of document-structure.

How do you identify the language of the document?

Select elements that can be included in the <head> .

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-09-27 UTC.

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

Controlling How Your Website Appears on Google

While Google has complete jurisdiction over how the  search engine results page (SERP) appears, you can change how your website appears in Search. In this post we’ll review some ways of controlling how your website appears on Google and how to facilitate the search engine’s comprehension and presentation of your content.

How to Optimize Page Titles and Meta Descriptions

Let’s start with the basics, page titles and meta descriptions. Yes, Google has a habit of rewriting these to better match a query, as this Moz study  reveals. Still, it’s important to put forth your best effort — Cyrus Sheppard has a few ways to beat Google title rewrites , if you’re struggling with this.

Every page needs a title enclosed in a title tag. It needs to describe the contents of the page in a concise manner so it doesn’t get truncated in search results. Titles greatly influence whether a Searcher clicks on the result, so make them as appealing as possible.

Avoid keyword stuffing in your titles as it can look spammy and is one reason Google may decide to rewrite it.

Boilerplate titles are something else you need to be careful with. Just like keyword stuffing, it encourages Google to rewrite the title. Some boilerplating is inevitable as in this case.

But you’ll notice that it’s not excessive, and the titles remain concise and descriptive.

Best practices for writing titles:  

• Fifty-five to 65 characters  
• Keyword or phrase first  
• Emphasize the page subject or benefit

The description meta tag informs Searchers what they can expect to see if they click on the result. Like page titles, these should be unique to each page, concise, and clearly describe what’s on the page. Take the opportunity to create a description encouraging Searchers to click on your link in the results. Approach it like you would a paid Google Ad and make every word count.

Best practices for writing meta descriptions:  

• ‌150 to 160 characters on desktop, 100 on mobile  
• Keywords at the beginning  
• Present a problem and provide a solution

We use RankMath, an SEO  WordPress plugin, for the MarketMuse blog. It’s nice because you can see how the title and meta description will appear. Plus, it measures the length in both characters and pixels, giving you a better idea of length.

‌Using Structured Data for SEO

Structured data, also known as Schema markup, provides information about a page in a standardized format. This markup helps search engines quickly classify the content of a page. For example, a page using the recipe schema will have cooking duration, cooking method, yield, and more. Recipe is just one of many schemas — here’s the full list .

Between JSON-LD, Microdata, and RDFa, JSON-LD is Google’s preferred format, and users report that it’s easiest to use.  Search engine optimization with structured data markup is easy with WordPress SEO plugins like RankMath and Yoast SEO because they write the code to create structured data automatically for you.

Why go through all the bother of implementing structured data?

Using structured data enables Google to create rich snippets that can show:

• ‌A picture.
• A star rating.
• Info like preparation time and calorie count.
• In a carousel.

Those rich snippets stand out from the ordinary search results that Google displays. Certainly they’re more visually appealing and thus likely to get the click.

Look at the difference between the pages that use structured data and the one that doesn’t.

There are certain guidelines that you need to follow when implementing structured data. A structured data tool  tells you if Google can generate a rich snippet using the data you’ve provided. That’s important because violating those guidelines may affect your ranking or your eligibility for rich results. In the worst case scenario, you could receive a manual action against your page. Keep in mind that structured data isn’t a ranking factor, and using it doesn’t guarantee that you’ll rank.

Optimizing for Featured Snippets

Featured snippets appear at the very top of some search results, with the description shown first followed by the page URL and title.

There are four common types of featured snippets:

• ‌Paragraph snippet.
• List snippet.
• Table snippet.
• Video/image snippet.

Clicking on a featured snippet opens up that page and scrolls down the page, taking the Searcher to the section on the page where that information resides. Because they appear at the very top of the page, some SEOs feel that you should optimize for the featured snippet .

But that’s not always the best approach. If the snippet contains all the information to a specific question , they won’t be motivated to click on the result and you may end up losing traffic.

So, you need to evaluate this on a term-by-term basis. For pages that you don’t want to get a featured snippet, set the max-snippet tag to a low value. Pages with a shorter setting are less likely to appear as a featured snippet.

Adjusting the setting doesn’t guarantee that Google will stop showing featured snippets for the page. The only way to achieve this is by using the nosnippet tag, but that also blocks regular snippets.

Although you can prevent a page from appearing as a feature snippet, you can’t mark a page as one. Only Google’s systems can decide whether a page makes a good featured snippet.

Having said that, there are some ways you can optimize for featured snippets. Since Google doesn’t offer a featured image for every search term, it’s hard to be proactive in optimizing. Instead, the typical approach is to find content that already ranks well on the first page of the SERP and where there exists a featured snippet.

Take a look at the featured snippet and see how to adapt your content. For example, if the snippet contains a list, check if your post has one. If not, then create one, placing it toward the beginning of the page. If the snippet is a definition, make sure to include a definition near the beginning of your post.

How to Add Site Links In Google Search

Sometime Google displays links below a listing in the organic result . Often you’ll see this occurring with branded search terms.

Sitelinks exist to help Searchers quickly navigate to the most useful information on your site and are automatically determined by Google. They take up a lot of real estate in the SERP and are one reason SEOs try to obtain them.

Although you can’t control their display, there are a few best practices to follow:

• Use informative, relevant, and concise text in titles, headings, and internal link anchor text
• Avoid repetitive text
• Create a logical and well-defined site structure with clear navigation

Favicon In Google Search

A favicon in Google Search is a graphic image or icon that Google can display next to your listing. Favicons also display in a browser tab. Google’s mobile search results now include a site’s favicon next to your site’s URL. You’ll notice that they are rather small in mobile search. Still, having a favicon helps with branding, so as usual it’s important to pay attention to the details.

Here are some favicon guidelines  to ensure they display well in a mobile search result:

• ‌‌Make sure the favicon is square.
• It’s a multiple of 48×48 pixels.
• It’s in a valid icon format — PNG, GIF, or ICO.

Showing Publication Date In Google Search

There are two opposing opinions on showing the post date. Those in favor believe that displaying the date helps Searchers determine how recent the information is, leading to greater click-throughs. Opponents believe that evergreen content doesn’t need frequent updating and thus showing the date could be detrimental. Given the choice, Searchers prefer more recent content.

You can provide the publication and last update date and Google will show that information if it’s considered useful to Searchers. But Google doesn’t just use this to estimate the publication or update dates. Their systems examine multiple factors “ because all factors can be prone to issues .” I think that’s Googlespeak for “manipulated.”

The guidelines  are simple:

• Feature the date prominently on the page making sure visitors can see it
• Use structured data to specify the dates. WordPress plugins like RankMath and Yoast SEO takes care of this automatically. Otherwise, use the Article, BlogPosting, or VideoObject subtype along with the datePublished and dateModified fields.

How Does Google Use Image Metadata?

Google uses metadata for Google image search and reverse image search. Google can’t see images, but it can read words. Metadata provides additional information that can help the search engine properly index images and ultimately rank them in search results.

We go into greater detail in Image SEO: How to Optimize Images for Search

Google Images reveals IPTC metadata in search results when available. This metadata provides proper attribution using defined fields such as creator, credit line, and copyright notice. Here’s how IPTC photo metadata  looks.

The first rule in image SEO is to reduce the image file size. Some image compression software provides the opportunity to remove metadata at the same time. Note that in some jurisdictions this may be illegal as you’re removing image copyright and licensing information. For that reason I recommend keeping this metadata. It takes up little space and the real gains come from compressing the image data itself.

You may have heard of the term Exif data in relation to image metadata. It refers to image data like the camera used, date, copyright, and caption. IPTC metadata is the data contained in the image. WordPress and Mac prefer IPTC photo metadata but will fall back to Exif photo metadata .‌

The Takeaway

While Google is the ultimate arbiter of how information gets displayed in its SERP, there’s a certain amount of control that you can exercise. So take advantage of that opportunity!

Stephen Jeske

Stephen leads the content strategy blog for MarketMuse, an AI-powered Content Intelligence and Strategy Platform. You can connect with him on social or his personal blog .

HTML Page Elements – Explained for Beginners

HTML, which stands for Hypertext Markup Language , is the standard markup language used for creating web pages and structuring their content on the World Wide Web.

HTML serves as the backbone of web development and acts as a fundamental building block for creating web-based documents. Let's take a quick look at how it works.

What Does HTML Do?

The main role of HTML is to define the structure and layout of a web page by using a set of tags or elements. These tags represent different types of content such as headings, paragraphs, images, links, forms, and tables.

HTML tags are enclosed in angle brackets (<>) and are composed of an opening tag, content, and a closing tag (which is identified by its forward slash - "/").

This article comes from my Complete LPI Web Development Essentials Study Guide course . If you'd like, you can follow the video version here:

By using HTML, web developers can define the semantic structure of a webpage, specifying elements like headings, paragraphs, lists, and sections. Here's a typical example of an HTML page with <head> , <body> , <header> , and <footer> sections clearly identified:

Additionally, HTML allows for the inclusion of multimedia content like images and videos. It also lets you integrate other web technologies such as CSS (Cascading Style Sheets) for styling, and JavaScript for interactivity.

Here's an example code snippet showing an image and a video being incorporated into a web page.

HTML documents are interpreted by web browsers, which render the structured content and present it to users. It enables browsers to understand the hierarchy, relationships, and presentation of elements on a webpage. It ensures that everything displays as intended and that there's appropriate interactivity.

In this guide, we're going to explore the core HTML elements, including document structure, external links, embedded media, and simple forms. And we're going to do all that by actually creating stuff. No more boring slides.

Understanding HTML Page Structure

Ok. The basic structure of an HTML document, sometimes described as the HTML skeleton, provides a foundation for creating web pages. It consists of several essential elements that establish the structure and define the content of the page.

When I right-click on a page, I can select the View Page Source option and I'll find myself looking at the HTML source code.

Well begin at the top. The Document Type Declaration (<!DOCTYPE>) is placed at the very beginning of an HTML document to specify the HTML version being used. It ensures that the browser interprets the page correctly.

The HTML tag is the root element of an HTML document. It encloses the entire content of the page and serves as a container for all other HTML elements.

If you scroll all the way to the bottom of a page, you'll see a closing tag like this: </html> .

What's in the section of your HTML code?

The head tag contains metadata and other non-visible information about the web page. It can include elements such as the page title, character encoding, linked stylesheets, and JavaScript files. The content within the head tag is not directly visible to users who load the page.

The characterset tag in this case uses UTF-8 . What's that all about? HTML character encoding refers to the method used to represent and display characters, symbols, and special characters within an HTML document.

Here's how all that might look:

Since HTML is a text-based markup language, it needs a standardized way to represent characters beyond the basic alphanumeric set of uppercase A-Z, lowercase a-z, and the numbers 0-9.

When using UTF-8 encoding, characters outside the ASCII range are represented using multiple bytes. For example, a basic Latin character like "A" is represented by a single byte (0x41), while certain non-Latin characters may require two or more bytes.

The <head> section can also contain style information that could just as easily have been placed in an accompanying CSS file. Here's how that might look:

The body tag represents the visible content of the web page. It contains all the elements that will be displayed on the screen, such as text, images, headings, paragraphs, and links. The content within the body tag is what users see when they visit the page.

Heading tags, like h1, h2, and so on, are used to define the headings or titles of sections within the body of the page. The h1 tag represents the main heading, followed by h2 for subheadings, h3 for sub-subheadings, and so on.

Paragraph tags, <p> , define blocks of text or content within the body of the page. They create separate paragraphs and are commonly used for structuring textual content.

Understanding Semantic Tags

Finally, HTML5 introduced a set of semantic tags that provide more meaningful and descriptive structure to the content. These tags include header, nav, section, article, aside, and footer.

Even though they don't always have any direct impact on the way a page will display in your browser, semantic tags help with organization and make it easier for us to understand the purpose of different sections of the page.

A tag that begins with an exclamation mark is actually used for comments that won't be visible to your users and that have no impact on the way browsers read the page. Here's an example:

The goal of comment tags is to help us remember the purpose and function of various code sections. It's all about documenting your code.

In fact, "readability" is an important feature of all well-written HTML code. Each of the elements we've seen here – whether controlling metadata, styles, scripts, navigation, or plain text – can, when presented intelligently, contribute to the value of both the page seen by your users and of the code itself.

This article comes from my Complete LPI Web Development Essentials Study Guide course . And there's much more technology goodness available at bootstrap-it.com

Read more posts .

If this article was helpful, share it .

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Developing With Web Standards – Recommendations and best practices

Roger Johansson, 456 Berea Street

Warning! Old content ahead. The latest update was 2008-11-01.

• Introduction
• Web Standards
• Structure and presentation
• Accessibility

4. Structure and presentation

When discussing web standards, something that is mentioned a lot is the importance of separating structure from presentation. Understanding the difference between structure and presentation can be difficult at first, especially if you’re used to not thinking about the semantic structure of a document. However, it’s very important to understand this, since controlling the presentation of a document with CSS becomes much easier if structure and presentation are separated.

Structure consists of the mandatory parts of an HTML document plus the semantic and structured markup of its contents.

Presentation is the style you give the content. In most cases presentation is about the way a document looks, but it can also affect how a document sounds – not everybody uses a graphical web browser.

Separate structure from presentation as much as possible. Ideally you should end up with an HTML document which contains the structure and content, and a separate CSS file which contains everything that controls presentation.

Tables for layout

In order to separate structure from presentation you need to use CSS instead of tables to control the presentation of a document. When you’re used to using tables for layout, this can feel uncomfortable and strange, but it isn’t as difficult as it may seem at first. There’s plenty of help available on the Web, and the advantages are so many that it definitely is worth taking the time to learn the different way of thinking that is required.

Semantic HTML

Another important part of separating structure from presentation is using semantic markup to structure the document’s content. When an HTML element exists that has a structural meaning suitable for the part of the content that is being marked up, there is no reason to use anything else. In other words, do not use CSS to make an HTML element look like another HTML element, for instance by using a span element instead of an h1 element to mark up a heading.

By using semantic HTML, you will make the different parts of a document meaningful to any web browser, be it the very latest graphical web browsers on a modern PC, an old web browser that doesn’t handle CSS, a text-based browser in a Unix shell, or assistive technology used by people with disabilities.

To mark up headings, use h1 - h6 elements. h1 is the highest level and h6 the lowest.

Use the p element to mark up paragraphs. Do not use br elements to create space between paragraphs. Margins between paragraphs are better handled by CSS.

A list of things should be marked up as a list. There are three different kinds of lists in HTML: unordered lists, ordered lists, and definition lists.

Unordered lists, also known as bulleted lists, start with <ul> and end with </ul> . Each list item is contained in an li element.

Ordered lists start with <ol> and end with </ol> .

Definition lists are a little different. They are used to mark up a list of terms and descriptions. Definition lists start with <dl> and end with </dl> . The terms that are being described are contained in dt elements, and descriptions are contained in dd elements. Each group of terms and definitions can consist of one or more dt elements followed by one or more dd elements.

CSS makes it possible to use lists even when you don’t want their content to be presented as a traditional list. A navigation bar, which is a list of links, is a good example of this. The advantage of using a list for a menu is that the menu will make sense even in browsers that don’t support CSS.

The q element should be used for shorter, inline quotations. Web browsers are supposed to automatically render quotation marks before and after the content of the q element. Unfortunately, Internet Explorer doesn’t, and in some cases the q element can even cause accessibility problems. Because of this, some recommend that you avoid using q , and insert the quotation marks manually. Containing inline quotes in span -elements with a suitable class allows the use of CSS for styling quotes, but has no semantic value. Read Mark Pilgrim’s The Q tag for a detailed look at the problems with the q element.

For longer quotations that form one or more paragraphs, the blockquote element should be used. CSS can then be used to style the quotation. Note that text is not allowed directly inside a blockquote element – it must be contained in a block level element, usually a p element.

The cite attribute can be used with both q and blockquote elements to supply a URL for the source of the quotation. Note that if you use span elements instead of q elements for inline quotations, you cannot use the cite attribute.

The W3C says that The presentation of phrase elements depends on the user agent. .

The W3C says that “The presentation of phrase elements depends on the user agent.” .

The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.

The em element is used for emphasis and the strong element for strong emphasis. Most web browsers display emphasized text in italics, and strongly emphasized text in bold. However, this is not a requirement. Avoid using emphasis when all you really want is the visual effect of bold or italic text.

Emphasized text is normally displayed in italics, while strongly emphasized text is usually displayed in bold.

HTML tables should not be used for layout. For marking up tabular data, however, tables are what should be used. To make data tables as accessible as possible it is important to know about and use the various components that can make up a table. A few examples are table headings (the th element), summaries (the summary attribute), and captions (the caption element).

For a more detailed description of tables and their use, see Bring on the tables , Tables in HTML documents and HTML Techniques for Web Content Accessibility Guidelines 1.0 .

Further reading

The slides used at a presentation that was held at Seybold 2003.

An excellent resource for learning the reasoning used to figure out how to mark up something in a semantic way.

Print version (all chapters combined)

Comments, questions or suggestions? Please let me know .

© Copyright Roger Johansson

Clear Layout and Design

in Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone

Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.

Video on Clear Layout and Design

Enable Audio Description

This video information is available as a Text Transcript with Description of Visuals below.

What is “Clear Layout and Design”?

The different parts of a web page must be easy to locate and identify. This includes navigation menus, links, and text sections. These should be at predictable locations and consistently identified. Also form labels and instructions have to be clearly associated with their controls.

Who depends on this feature?

• People with low vision who are using screen magnification and only see a portion of the screen at a time.
• People with cognitive and learning disabilities who need clarity and consistency to orient themselves on a website.

What are the additional benefits?

• Content is more usable for people who are new to the particular website or application.
• Content is more usable for people who are not confident using computers and the web.
• Content is more usable for mobile device users who are seeing it on smaller screens, especially if they are in a hurry or distracted.
• Content and functionality is easier to locate and identify by most users.

What needs to happen for this to work?

Design clear structure, both visually and through the markup. For example, make it easy to distinguish sections such as navigation, group related controls in a form, and provide headers to identify groups of information. Provide consistent presentation and behavior of web pages across a website.

• Users can easily navigate, find content, and determine where they are
• Content appears and operates in predictable ways
• Provide clear and consistent navigation options
• Ensure that interactive elements are easy to identify
• Ensure that form elements include clearly associated labels
• Forms, labels, and errors
• Preety, classroom student with attention deficit hyperactivity disorder (ADHD) and dyslexia
• Yun, retiree with low vision, hand tremor, and mild short-term memory loss
• Luis, supermarket assistant with Down syndrome
• Success Criteria relating to “layout”
• Page Structure - Web Accessibility Tutorials (draft)

Text Transcript with Description of Visuals

Teach Computer Science

HTML Structure and Presentation

Ks3 computer science.

11-14 Years Old

48 modules covering EVERY Computer Science topic needed for KS3 level.

GCSE Computer Science

14-16 Years Old

45 modules covering EVERY Computer Science topic needed for GCSE level.

A-Level Computer Science

16-18 Years Old

66 modules covering EVERY Computer Science topic needed for A-Level.

GCSE Creating web pages using HTML and CSS (14-16 years)

• An editable PowerPoint lesson presentation
• Editable revision handouts
• A glossary which covers the key terminologies of the module
• Topic mindmaps for visualising the key concepts
• Printable flashcards to help students engage active recall and confidence-based repetition
• A quiz with accompanying answer key to test knowledge and understanding of the module

A-Level Designing Web pages using HTML and CSS (16-18 years)

Html structure.

HTML (Hypertext Markup Language) is the recognised markup language utilised in forming web pages.  It defines the composition of web pages by using markup.  HTML elements are the primary units of HTML pages and are denoted by tags.  HTML tags label parts of content like headings, paragraphs, and tables.  Browsers do not show the HTML tags, but they are used in the background in order to deliver the content of the page.

HTML tags are element names enclosed by angle brackets.  HTML tags usually come in pairs.  The first tag in a pair is the start tag, and the second tag is the end tag.  The end tag is written like the start tag, but with a forward slash inserted before the tag name.  The start tag is sometimes also called the opening tag, and the end tags are the closing tag.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.  The HTML document itself begins with <html> and ends with </html>.  The visible part of the HTML document is between <body> and </body>.

HTML tags are not case sensitive.

HTML Attributes

All HTML elements can have attributes, which provide additional information about the element, and are always specified in the start tag.  They usually come in name/value pairs.

CSS (Cascading Style Sheets) defines how HTML elements are to be presented on any given screen, paper or other media.  It saves the developer a lot of work since it can control the layout of multiple web pages simultaneously.

Ways to add CSS to HTML Elements

• Inline – used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
• Internal – used to describe a style for one HTML page. It is indicated in the <head> section of an HTML page, within a <style> element.
• External – used to define the style for multiple HTML pages by using an external CSS file. You can change the look of an entire website by changing one file.  This is the most common way to add CSS to HTML elements.

HTML Structure vs. HTML Presentation

The composition of a webpage could be regarded as a mixture of the following four elements:

• Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. It does not require any additional presentational markups or styles in order to fully relay its message.
• Structure is the name given to the practice of using HTML in content to transmit substance, and also to define how blocks of information are structured in relation to one another. Examples include: “This is a list,” (i, d, k), “This is heading and subheading,” (<h1>, <h2>, …, <h6>), “This section is related to,” (<a>), etc.
• Presentation of Style refers to anything related to how the content and structure is presented. Examples include size, color, margins, borders, layout, location, etc.
• Behaviour or Interactivity is the implementation of client-side script to generate a two-way flow of information between the webpage and its users. JavaScript is an example of this.

Most of the time it is difficult to clearly distinguish content from the structure.  For example, the <img> tag, as a structural element, is used to produce graphical content.  In practice, the composition of a webpage can simply be viewed as a mixture of three elements: Structure, Presentation and Behavior.

The following terms are often used in correspondence with one another: separation of content and presentation, separation of meaning and presentation, and separation of structure and presentation.  Nonetheless, all of these terms basically make reference to the separation of the content (which is made meaningful by structure and presentation), or simply acknowledge the separation of the structure (HTML) and the presentation (CSS) of any given webpage.

The main goal of HTML 4.01 is the separation of structure and presentation,  as specified in section 2.4.1 of HTML 4.01.

Further Readings:

• HTML element

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Document and website structure

• Overview: Introduction to HTML

In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.

Basic sections of a document

Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.

Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility , as screen readers can read the two features better if they are separate.

A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.

A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

A "typical website" could be structured something like this:

Note: The image above illustrates the main sections of a document, which you can define with HTML. However, the appearance of the page shown here - including the layout, colors, and fonts - is achieved by applying CSS to the HTML.

In this module we're not teaching CSS, but once you have an understanding of the basics of HTML, try diving into our CSS first steps module to start learning how to style your site.

HTML for structuring content

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job .

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2015 there were 940 million people with some degree of vision loss , while the total population was around 7.5 billion ).

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screen readers can recognize those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job .

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

• header: <header> .
• navigation bar: <nav> .
• main content: <main> , with various content subsections represented by <article> , <section> , and <div> elements.
• sidebar: <aside> ; often placed inside <main> .
• footer: <footer> .

Active learning: exploring the code for our example

Our example seen above is represented by the following code (you can also find the example in our GitHub repository ). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

HTML layout elements in more detail

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference . For now, these are the main definitions that you should try to understand:

• <main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body> . Ideally this shouldn't be nested within other elements.
• <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
• <section> is similar to <article> , but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It's considered best practice to begin each section with a heading ; also note that you can break <article> s up into different <section> s, or <section> s up into different <article> s, depending on the context.
• <aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
• <header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings ).
• <nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.
• <footer> represents a group of end content for a page.

Each of the aforementioned elements can be clicked on to read the corresponding article in the "HTML element reference" section, providing more detail about each one.

Non-semantic wrappers

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript . For cases like these, HTML provides the <div> and <span> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

<span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

This isn't really an <aside> , as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a <section> , as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screen reader users in finding it.

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

Line breaks and horizontal rules

Two elements that you'll use occasionally and will want to know about are <br> and <hr> .

<br>: the line break element

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace ); with <br> elements in the code, the markup renders like this:

<hr>: the thematic break element

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

Would render like this:

Planning a simple website

Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture . In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

Active learning: create your own sitemap

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

Note: Save your work somewhere; you might need it later on.

At this point, you should have a better idea about how to structure a web page/site. In the next article of this module, we'll learn how to debug HTML .

CSS Tutorial

Css advanced, css responsive, css examples, css references, css introduction.

CSS is the language we use to style a Web page.

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

CSS Demo - One HTML Page - Multiple Styles!

Here we will show one HTML page displayed with four different stylesheets. Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles:

Advertisement

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Example

Css solved a big problem.

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

If you don't know what HTML is, we suggest that you read our HTML Tutorial .

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

Video: CSS Introduction

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Embed a Powerpoint in a Web Page

Is there any way to embed a PowerPoint slide show in an HTML page using just the standard tags etc? I tried using a iframe, but that just results in the PowerPoint being downloaded.

I am looking for a way to show the slide show using only standard stuff. I realize I could use google docs or flash or something, but I'd rather have a simple implementation.

Does the web just not know how to process a PowerPoint presentation?

• possible duplicate of Embed Powerpoint into HTML –  Marko Commented Aug 18, 2011 at 0:29
• 2 I said I do not want to use google docs. –  Snowy Coder Girl Commented Aug 18, 2011 at 0:30
• 1 It lists other possible solutions, look at the answers below the accepted one. –  Marko Commented Aug 18, 2011 at 0:31
• I saw ones about Flash and other applications, but I'll look deeper some more. –  Snowy Coder Girl Commented Aug 18, 2011 at 0:37
• Google docs is the simple implementation. –  djlumley Commented Aug 18, 2011 at 2:11

11 Answers 11

Plain and simple...this is the best method to embed any Microsoft or Adobe file into a HTML website.

• 2 I wonder why the hell your answer doesn't get more upvotes. It's the closest one to the original intention of the asker. –  EugZol Commented Oct 18, 2017 at 16:34
• 6 This answer won't work for presentations on an internal website. –  NetMage Commented Aug 2, 2019 at 19:53
• 3 <iframe width="100%" height="630" src=" docs.google.com/viewer?url=your_file&embedded=true " ></iframe> –  Alexis Cabrera Mondeja Commented Apr 6, 2020 at 1:53
• 1 JS var url = encodeURIComponent(originalURl); HTML: <iframe src=' view.officeapps.live.com/op/embed.aspx?src=$ {url}' width='100%' height='600px' frameborder='0'> –  Anil Commented May 7, 2020 at 15:12
• 3 As of 2022, I can't get the above answer to work. I've updated the url to a real deck in the github sharepoint that I uploaded. I assume the view.officeapps.live.com/op/embed... isn't there any more. –  Lance Kind Commented Feb 24, 2022 at 16:50

Just to update this question - as there is a new way to embed Powerpoints in a web page. If you have an account on OneDrive , do the following using Powerpoint Online (accessing Powerpoint via the browser) to embed a Powerpoint:

• 2 this was unexpectedly easy! –  Gregg Bursey Commented May 11, 2017 at 21:37
• Hey, please give me solution for without putting ppt on the drive and take from the server then how do they do it? –  user7918630 Commented Sep 7, 2017 at 10:22
• 1 requires viewers to have a microsoft account. not a good solution for a public website. –  sspence65 Commented Dec 22, 2020 at 10:44

Web browsers don't understand power point, but there are solutions besides Flash.

You could export it to HTML or a PDF. Or you could also upload to site like slideshare and make use of their players which are built for this problem.

• 1 +1, thanks for the help. I have decided to use YouTube (see answer). Thanks again. ^_^ –  Snowy Coder Girl Commented Aug 18, 2011 at 2:07
• Hey, please give me solution for without putting ppt on the drive and take from the server then how do they do it? –  user7918630 Commented Sep 7, 2017 at 10:23

I have decided to take a hack route and upload the powerpoint onto YouTube and then just include the youtube video in the iframe.

I know, it's cheap, but it's also easy.

I eventually checked my page as XHTML Strict, which does not support the <iframe> tag. So I used the object tag instead.

I tried answer posted by Shane, which looks exactly right and how MS used to have PPT viewing online earlier but it didn't worked for me. After doing some research I found out that the link has changed a bit.

So use: https://view.officeapps.live.com/op/ view.aspx instead of https://view.officeapps.live.com/op/ embed.aspx

Note: Link to PPT need to be publicly accessible.

• 2 I like more google docs viewer works with docs, pptx, pdf, etc. <iframe width="100%" height="630" src=" docs.google.com/viewer?url=your_file&embedded=true " ></iframe> –  Alexis Cabrera Mondeja Commented Apr 6, 2020 at 2:05
• Animations and effects present in a PPT won't work with google docs viewers. –  SumitK Commented Apr 7, 2020 at 6:29
• But you can use "Open With" and use Google presentations App. –  Alexis Cabrera Mondeja Commented Apr 8, 2020 at 14:07
• I'm not sure if that can be done directly via a link like we can with MS. Also I believe to use Google Slides user need to be signed in with an Google account. –  SumitK Commented Apr 9, 2020 at 15:21

Use Microsoft skydrive, upload your power point to this site and use this code

http://skydrive.live.com/redir.aspx?cid=20f065afc1acdb2e&page=view&resid=20F065AFC1ACDB2E!723&parid=20F065AFC1ACDB2E!719 is the URL of the powerpoint file.

You have to replace SD20F065AFC1ACDB2E!723 for your own string of the corresponding URL

• <iframe src=" r.office.microsoft.com/r/… " width="402" height="327" frameborder="0" scrolling="no"></iframe> –  Carlos Soto Johnson Commented Jul 8, 2012 at 4:13
• Look the code of this site, crc.tc/powerpointDemo.html and replace SD20F065AFC1ACDB2E!723 with your own power point skidrive URL identifier –  Carlos Soto Johnson Commented Jul 8, 2012 at 4:21

Upload a PowerPoint document on your Google Drive and then 'Share' it with everyone (make it public): Sharing your pptx doc

Then, go to File > Publish to the web > hit the publish button.

Go to Embed and copy the embed code and paste it to your web page

Copy embed code

Works Best for me.

Goto MS View Office Documents Online Page

Enter link to PPT file Note: This link should be publicly Accessible

Click on Create URL.

Link to view office documents online will be generated.

Paste this link to any webpage or as iframe src attribute.

You are all set!! :)

I was able to do this by saving the PPT as an mp4 (Save As > MPEG-4 Video (*.mp4)) and then using the video tag.

If you are using Google slides you could easily publish it on the web and also embed the slide in an iframe.

Go to google slides -> file-> sharing -> embed and copy the code

and then in your HTML file use the below code to show slides in fullscreen mode.

why not use prezi, I just use it in my work, very easy and useful.

Not the answer you're looking for? Browse other questions tagged html powerpoint or ask your own question .

• The Overflow Blog
• Scaling systems to manage all the metadata ABOUT the data
• Navigating cities of code with Norris Numbers
• Featured on Meta
• We've made changes to our Terms of Service & Privacy Policy - July 2024
• Bringing clarity to status tag usage on meta sites
• Tag hover experiment wrap-up and next steps

Hot Network Questions

• Ripple counter from as few transistors as possible
• Why are these simple equations so slow to `Solve`?
• Why didn't Walter White choose to work at Gray Matter instead of becoming a drug lord in Breaking Bad?
• Would several years of appointment as a lecturer hurt you when you decide to go for a tenure-track position later on?
• What was I thinking when I drew this diagram?
• Claims of "badness" without a moral framework?
• What is this fruit from Cambodia? (orange skin, 3cm, orange juicy flesh, very stick white substance)
• Why is Excel not counting time with COUNTIF?
• How can I cross an overpass in "Street View" without being dropped to the roadway below?
• Someone wants to pay me to be his texting buddy. How am I being scammed?
• Would a manned Mars landing be possible with Apollo-era technology?
• Do comets ever run out of water?
• Examples of flat projective morphisms with non-divisorial branch locus
• When would it be legal to ask back (parts of) the salary?
• How can we objectively measure the similarity between two scatter plots whose coordinates are known?
• Will I have to disclose traffic tickets to immigration (general)
• I need to better understand this clause in an independent contract agreement for Waiverability:
• In zsh, annotate each line in a file to which both stdout and stderr have been redirected with the line's source (stdout or stderr)
• Why are the perfect fifth and fourth called "perfect" in 12-ET when they differ by approximately 2 cents from just intonation?
• Every time I see her, she said you've not been doing me again
• Transit from intl to domestic in Zurich on Swiss
• How can one design earplugs so that they provide protection from loud noises, such as explosions or gunfire, while still allowing user to hear voices?
• Will The Cluster World hold onto an atmosphere for a useful length of time without further intervention?
• Am I allowed to link code licensed under GPL to proprietary libraries?

More From Forbes

15 presentation tips for captivating your audience and commanding the room.

• Share to Facebook
• Share to Twitter
• Share to Linkedin

Person speaking in front of audience

Public speaking can be a daunting task, especially when addressing a large audience. Whether you're giving a presentation in the boardroom or delivering a keynote speech at a conference, holding your audience's attention and maintaining command of the room is paramount. The ability to captivate your audience and leave a lasting impression not only enhances your message's impact but also builds your reputation as a confident and effective speaker.

Here, Forbes Coaches Council members share invaluable tips and strategies to help you conquer your fear of public speaking and ensure that your next presentation or speech is a resounding success.

1. Be Confident

Be grounded and confident to be yourself and then tell great stories. Use your voice and the stage to bring the stories alive. Your audience will connect to the emotion of the story but make sure that it is relevant for your audience and related to the topic. - Cath Daley , Cath Daley Ltd

2. Find A Way To Actively Engage The Audience

Be prepared with ways to get your audience engaged and keep their focus. Whether that's relating to your audience, telling a joke or asking questions, actively driving engagement will make for a more effective presentation or speech. - Luke Feldmeier , Online Leadership Training - Career and Leadership Accelerator for Engineers

3. Create An Emotional Connection

Creating an emotional connection with the audience and involving them in your session fosters active participation, and ensures your audience stays engaged throughout. This also serves to enhance your presence and to create memories that stay with them long after your presentation ends. - Kristin Andree , Andree Group

4. Put Your Unique Take Front And Center

Do you have something unexpected to say about your topic? Something that goes against the mainstream opinion in your industry or is maybe even slightly provocative? If so, putting your unique take front and center in the title and the beginning of your talk and explaining or resolving it later keeps your audience engaged and interested. - Micha Goebig , Go Big Coaching & Communications, LLC

5. Remember That The Audience Doesn't Know Your Planned Speech

No one wants to see you fail as a speaker. Remember that the focus shouldn't be on whether or not you can recall verbatim every word of your planned speech. The focus should be on how to connect to your audience with a few key points using a combination of storytelling and facts. - Sheri Nasim , Center for Executive Excellence

6. Adapt Your Language To The Audience

Talk about something they are interested in or include elements that will keep them interested. Start by asking why your topic matters to each and every one of them. Use language adapted to the audience. Keep the key messages to two or three maximum. Show them what you think and why you care about the topic. - Isabelle Claus Teixeira , Business and Human Development Consulting Pte Ltd

7. Try To Incorporate An Element Of Surprise

Engagement is the key to keeping the audience's attention. Invite participation, tell stories, walk around, have visuals, include humor, raise your voice and ask questions. Think of a comedian who points at someone in the audience: "Hey, you with the red shirt?" Everyone pays attention. What element of surprise can you present? - Susan Jordan, MBA, MSODL, PCC , Sphereshift Coaching and Consulting

8. Know Your Audience

Doing research ahead of time to ensure you're providing the subject matter in a personalized manner will keep their attention. The topic will dictate the necessary vibe. Based on that, providing opportunities for the group to engage, such as shouting out a word, raising a hand, etc., will also help maintain their interest. - Lindsay Miller , Reverie Organizational Development Specialists

9. Use The Problem-Agitation-Solution Approach

Don't just give a presentation — share a story. It must be a story-audience fit though. Use the P.A.S. — problem-agitation-solution — approach. Start with introducing a problem, follow by agitating the problem via telling a relevant anecdote and conclude by offering a solution by giving an audience a clear, direct way to avoid the pain and learn the lesson. - Alla Adam , Alla Adam Coaching

10. Tell The Audience What They Need To Hear

Instead of trying to figure out what to say, figure out what the audience wants and needs to hear. This shift in perspective allows you to tailor your speech in a way that keeps audiences actively engaged because it's good content that they want to hear. - Robin Pou , The Confident Leader

11. Go All In

To command your audience's attention you have to get into the spirit of what you're teaching and go all in without second-guessing yourself. People want to be led, but they'll be unwilling to follow someone who isn't confident in what they are communicating. - Arash Vossoughi , Voss Coaching Co.

12. Use A Compelling Opening

Start your speech/presentation with a compelling opening that grabs the audience's attention. This could be a surprising fact, a relevant story or a thought-provoking question. This initial engagement can help you establish a strong connection with the audience and set the stage for a captivating presentation. - Moza-Bella Tram , Moza-Bella LLC

Forbes Coaches Council is an invitation-only community for leading business and career coaches. Do I qualify?

13. Be Authentic

Connect deeply with your essence and purpose. Radiate authenticity. When you're centered in genuine passion and truth others feel it, creating an unspoken bond. It's not about performing; it's about being present and real and offering value from the heart. That's magnetic. - Anna Yusim, MD , Yusim Psychiatry, Consulting & Executive Coaching

14. Let Your Audience Talk

There is nothing worse than stealing everyone's craving for autonomy and speaking the whole time. The person who does the talking does the learning. So, give some autonomy to the audience. Let them talk. Even if it's thinking time and talking to themselves, or to their neighbor or table group. This gains trust and they will lean into what you have to say even more. - Alex Draper , DX Learning Solutions

15. Leverage Non-Verbal Cues

My top tip is to engage your audience through storytelling. A compelling narrative captures attention, evokes emotion and makes complex ideas more relatable. Additionally, use body language and eye contact effectively. These non-verbal cues can significantly enhance your connection with the audience. - Peter Boolkah , The Transition Guy

• Editorial Standards
• Reprints & Permissions

• Skip to main content
• Skip to search
• Skip to footer

Products and Services

Cisco security certifications

Secure and protect the on-premise and cloud network infrastructures that organizations rely on.

Protect and defend the network

Understand real-world security issues and address them quickly and effectively. Launch your certification journey and your career.

• Why get certified?

of security budgets will increase over the next two years - 56% of them significantly

of organizations need cloud security and security operations roles

of organizations need network security roles

Get certified in Security

Let Cisco certifications help you position yourself for a successful career in securing the networks and resources of any organization. It’s the top-ranked tech skill for 2024.

CCNP Security

Earning your CCNP Security certification proves you can step into any security environment and protect the networks and data that clients rely on.

CCIE Security

Achieving the CCIE Security certification proves your skills with complex security solutions.

Cisco Certified specialist certifications

Showcase your expertise in key security topics with eight specialist certifications. You’ll earn one specialist certification for every exam you pass.

Train for your certification with Cisco U.

Cisco U. provides personalized learning to help you meet your career goals. Create a free account to access tutorials, videos, podcasts and more - and when you’re ready to take your learning to the next level, you can upgrade to unlock even more courses.

Be job-ready for roles in the security field

Be job-ready for key security roles in one of the fastest-growing fields in IT with real-world, hands-on training and certification from Cisco.

Potential roles

Security analyst.

Curtail security breaches by identifying the causes and sources of threats.

Network security engineer

Keep a company’s security systems up and running.

Network security architect

Anticipate potential security threats and design systems to prevent them.

Alumni testimonial

Cisco certifications gave yasser the right information and background.

"Cisco Certifications and the material for certifications are of high quality. They are recognized by the market and IT community."

Yasser Auda, Network security architect

CCNA, CCNP Enterprise, CCNP Security

Start your learning journey

Enrich learning with community support.

Cisco learning communities support you on your path to certification success. Join discussions, get expert advice, and access free study resources.

Empower your teams to thrive

Take your team’s skills and productivity to the next level in an ever-changing tech landscape. From in-person group training to online curricula, we have training solutions for any and every business.

• Fortinet 2023 Cybersecurity Skills Gap Global Research Report
• The State of Security 2023

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock ( ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

Increase in Human Parvovirus B19 Activity in the United States

Distributed via the CDC Health Alert Network August 13, 2024, 2:30 PM ET CDCHAN-00514

Summary The Centers for Disease Control and Prevention (CDC) is issuing this Health Alert Network (HAN) Health Advisory to notify healthcare providers, public health authorities, and the public about current increases in human parvovirus B19 activity in the United States. Parvovirus B19 is a seasonal respiratory virus that is transmitted through respiratory droplets by people with symptomatic or asymptomatic infection. In the first quarter of 2024, public health authorities in 14 European countries observed unusually high numbers of cases of parvovirus B19. In the United States, there is no routine surveillance for parvovirus B19, and it is not a notifiable condition. Recently, CDC has received reports indicating increased parvovirus B19 activity in the United States. Data include increased test positivity for parvovirus B19 in clinical specimens and pooled plasma from a large commercial laboratory, and reports of clusters of parvovirus B19-associated complications among pregnant people and people with sickle cell disease. The proportion of people with IgM antibodies, an indicator of recent infection, increased among all ages from <3% during 2022–2024 to 10% in June 2024; the greatest increase was observed among children aged 5–9 years, from 15% during 2022–2024 to 40% in June 2024. Among plasma donors, the prevalence of pooled samples with parvovirus B19 DNA >10 4 IU/mL increased from 1.5% in December 2023 to 19.9% in June 2024.

Background Parvovirus B19 is highly transmissible in respiratory droplets, with 50% of susceptible people infected after household exposure and 20–50% of susceptible students and staff infected during school outbreaks. Historically, people working in schools and in close contact with children (e.g., daycare workers and teachers) have had high occupational risk of infection. About 50% of adults have detectable antibodies by age 20 years. More than 70% of adults have detectable antibodies by age 40 years. Antibodies from prior infection are thought to protect against reinfection.

Parvovirus B19 infection can be transmitted during pregnancy (i.e., from mother to the fetus) or through transfusion of blood components and certain plasma derivates. The Food and Drug Administration (FDA) recommends testing all plasma-derived products and plasma units for parvovirus B19 using nucleic acid tests. Whole blood is not screened for parvovirus B19 in the United States. Transfusion-associated parvovirus B19 infection is extremely rare.

Although many people with parvovirus B19 infection are asymptomatic, immunocompetent children and adults with symptomatic disease typically develop a biphasic illness. The first phase of illness is characterized by symptoms of fever, myalgia, and malaise and develops approximately 7 days after infection. This phase lasts approximately 5 days. People with parvovirus B19 infection are most contagious during the first phase, when viral loads in respiratory secretions and saliva are highest. During the second phase of illness (approximately 7–10 days after the first phase), children often present with a characteristic facial rash (erythema infectiosum, or “slapped cheek” appearance), which may be followed by reticulated body rash or joint pain (arthralgia) 1–4 days later. In immunocompetent adults, the most common symptoms of parvovirus B19 disease typically occur during the second phase and include a reticular rash on the trunk and joint pain (arthralgia). Typically, the characteristic facial rash does not appear until after viral loads (a measure of infectiousness) have declined. Laboratory tests conducted during acute illness can demonstrate a transient decrease in absolute reticulocyte counts lasting approximately 10 days, mild anemia, thrombocytopenia, or leukopenia. Most people require only supportive care during the acute phase of illness and will recover completely. Severe outcomes from parvovirus B19 disease, such as myocarditis, hepatitis, or encephalitis, are rare. No vaccine or specific treatment is recommended for parvovirus B19 infection.

Parvovirus B19 infection can lead to adverse health outcomes among people without pre-existing immunity who are pregnant, immunocompromised, or have chronic hemolytic disorders. During pregnancy, most cases of fetal parvovirus B19 infection resolve spontaneously without adverse outcomes. However, the risk of an adverse fetal outcome (e.g., fetal anemia, non-immune hydrops, or fetal loss) is 5–10%, and is highest when acute infection occurs between gestational weeks 9–20. Treatment for acute infection in the pregnant individual is supportive, and management includes monitoring for and treating severe fetal anemia. Furthermore, parvovirus B19 can cause chronic or transient aplastic anemia among people with severely immunocompromising conditions (e.g., leukemia or other cancers, organ transplant, HIV infection, receiving chemotherapy) or chronic hemolytic disorders (e.g., sickle cell disease, thalassemia, hereditary spherocytosis). Red blood cell transfusions and intravenous immunoglobulin are the mainstays of treatment for aplastic anemia.

Recently, CDC has received reports indicating increased parvovirus B19 activity in the United States. These reports include data from commercial laboratories of increasing parvovirus B19 test positivity by nucleic acid amplification tests and serology in the general population and increased serological evidence of infection in plasma donors. The proportion of people with IgM antibodies increased among all ages from <3% during 2022–2024 to 10% in June 2024; the greatest increase was observed among children aged 5–9 years, from 15% during 2022–2024 to 40% in June 2024. Among plasma donors, the prevalence of pooled samples with parvovirus B19 DNA >10 4 IU/mL increased from 1.5% in December 2023 to 19.9% in June 2024. CDC has also received anecdotal reports from clinicians who have observed more than the expected number of cases of parvovirus B19 infections among pregnant people, including cases resulting in severe fetal anemia requiring fetal transfusions or pregnancy loss, and increases in aplastic anemia among people with sickle cell disease. There is no routine surveillance for parvovirus B19 in the United States.

Recommendations for Healthcare Providers

• Have increased suspicion for parvovirus B19 among people presenting with compatible symptoms (i.e., fever, rash, arthropathy, or unexplained anemia with low reticulocyte count).
• Pregnant people
• People with severely immunocompromising conditions, including leukemia or other cancers, organ transplant, HIV infection, or who are receiving chemotherapy.
• People with chronic hemolytic blood disorders, including sickle cell disease, thalassemia, and hereditary spherocytosis.
• When treating people with suspected or confirmed parvovirus B19, inform them or their caregivers about high-risk groups and advise any exposed contacts in those groups (e.g., who may be pregnant) to consult with their healthcare providers.
• Follow standard of care (e.g., professional society guidelines) for testing pregnant people reporting exposure to parvovirus B19 infection or who present with compatible signs and symptoms of maternal or fetal parvovirus B19 disease.
• People at higher risk of severe outcomes or complications who work in settings with higher risk of parvovirus B19 exposure should practice hand hygiene , avoid sharing food or drinks, and consider wearing a respirator or mask while at work. There is no proven benefit to removing someone from work in settings with higher risk of parvovirus B19 exposure.
• Follow recommended infection control precautions for persons with parvovirus B19 in healthcare settings.

Recommendations for Health Departments

• Ensure that healthcare providers are aware of increasing parvovirus B19 activity and identify people at higher risk of severe parvovirus B19 outcomes. Parvovirus B19 is not nationally notifiable.
• Promote measures to prevent respiratory illness and share information about complications of parvovirus B19 with people at high risk of severe disease.
• Raise awareness of parvovirus B19 activity among daycare and school providers, including who may be at higher risk of severe parvovirus B19 disease and when children and staff can return to school following an infection .

Recommendations for the Public

• Learn about parvovirus B19 symptoms and who may be at higher risk of severe disease .
• are pregnant and have been exposed to a person with suspected or confirmed parvovirus B19 or you have signs and symptoms of parvovirus B19.
• have a weakened immune system or a chronic hemolytic blood disorder including sickle cell disease, thalassemia, and hereditary spherocytosis, and you have signs and symptoms of parvovirus B19.
• Follow general respiratory precautions to prevent spread of parvovirus B19 and other respiratory viruses. People at higher risk of severe parvovirus B19 can consider using additional prevention strategies such as wearing a mask when around others .
• Know that children and adults with parvovirus B19 are no longer contagious once the characteristic facial rash appears.

For More Information

• About Parvovirus B19 | CDC
• Parvovirus B19 in Pregnancy | CDC
• Preventing Spread of Infections in K-12 schools | CDC
• Parvovirus B19 (Erythema Infectiosum, Fifth Disease), Red Book | American Academy of Pediatrics (AAP)
• Practice Bulletin on Cytomegalovirus, Parvovirus B19, Varicella Zoster, and Toxoplasmosis in Pregnancy | American College of Obstetricians and Gynecologists (ACOG)
• Fifth Disease (Erythema Infectiosum) Fact Sheet | MotherToBaby
• European Centre for Disease Prevention and Control. Risks posed by reported increased circulation of human parvovirus B19 in the EU/EEA . June 5, 2024.
• Heegaard ED, Brown KE. Human parvovirus B19. Clin Microbiol Rev . 2002; 15(3):485–505. DOI: 10.1128/CMR.15.3.485-505.2002 .
• Cohen BJ, Buckley MM. The prevalence of antibody to human parvovirus B19 in England and Wales. J Med Microbiol . 1988; 25(2):151–153. DOI: 10.1099/00222615-25-2-151 .
• Doyle S, Corcoran A. The immune response to parvovirus B19 exposure in previously seronegative and seropositive individuals. J Infect Dis . 2006;194(2):154–158. DOI: 10.1086/505226 .
• Young NS, Brown KE. Parvovirus B19. N Engl J Med . 2004; 350(6):586–97. DOI: 10.1056/NEJMra030840 .
• Public Health Laboratory Service Working Party on Fifth Disease. Prospective study of human parvovirus (B19) infection in pregnancy. BMJ . 1990; 300(6733):1166–1170. DOI: 10.1136/bmj.300.6733.1166 .
• Guillet M, Bas A, Lacoste M, et al. New atypical epidemiological profile of parvovirus B19 revealed by molecular screening of blood donations, France, winter 2023/24. Euro Surveill . 2024; 29(21):2400253. DOI: 10.2807/1560-7917.ES.2024.29.21.2400253 .
• Nordholm AC, Trier Møller F, Fischer Ravn S, et al. Epidemic of parvovirus B19 and disease severity in pregnant people, Denmark, January to March 2024. Euro Surveill . 2024; 29(24):2400299. DOI: 10.2807/1560-7917.ES.2024.29.24.2400299 .
• Kleinman SH, Glynn SA, Lee T-H, et al. Prevalence and quantitation of parvovirus B19 DNA levels in blood donors with a sensitive polymerase chain reaction screening assay. Transfusion . 2007; 47(10):1756–1764. DOI: 1doi/10.1111/j.1537-2995.2007.01341.x.
• U.S. Department of Health and Human Services, Food and Drug Administration, Center for Biologics Evaluation and Research. Nucleic Acid Testing to Reduce the Possible Risk of Human Parvovirus B19 Transmission by Plasma-Derived Products . July 2009.

The Centers for Disease Control and Prevention (CDC) protects people’s health and safety by preventing and controlling diseases and injuries; enhances health decisions by providing credible information on critical health issues; and promotes healthy living through strong partnerships with local, national and international organizations.

Department of Health and Human Services

Han message types.

• Health Alert: Conveys the highest level of importance about a public health incident.
• Health Advisory: Provides important information about a public health incident.
• Health Update: Provides updated information about a public health incident.

### This message was distributed to state and local health officers, state and local epidemiologists, state and local laboratory directors, public information officers, HAN coordinators, and clinician organizations. ###

• HAN Archive By Year
• Sign Up for HAN Email Updates
• HAN Jurisdictions

• Prepare Your Health
• Coping with a Disaster or Traumatic Event
• Information on Specific Types of Emergencies
• Information for Specific Groups
• Resources for Emergency Health Professionals
• Training & Education
• Social Media
• Preparation & Planning
• What CDC is Doing
• Blog: Public Health Matters

Fact Checking Trump’s Mar-a-Lago News Conference

The former president took questions from reporters for more than hour. We examined his claims, attacks and policy positions.

By The New York Times

• Share full article

Former President Donald J. Trump held an hourlong news conference with reporters on Thursday at his Mar-a-Lago club in Florida, during which he attacked Vice President Kamala Harris, his general election opponent, criticized the Biden administration’s policies and boasted of the crowd size at his rallies. We took a closer look at many of his claims.

Trump claims his Jan. 6 rally crowd rivaled the 1963 March on Washington. Estimates say otherwise.

“If you look at Martin Luther King, when he did his speech, his great speech. And you look at ours, same real estate, same everything, same number of people. If not, we had more.” — Former President Donald J. Trump

This lacks evidence.

Mr. Trump was talking about the crowds gathered for his speech on Jan. 6, 2021, and for the “I Have a Dream” speech the Rev. Dr. Martin Luther King Jr. delivered during the March on Washington in 1963. While it is difficult to gauge exact crowd sizes, estimates counter Mr. Trump’s claim that the numbers gathered were comparable. Dr. King’s speech drew an estimated 250,000 people . The House Select Committee responsible for investigating the events of Jan. 6 estimated that Mr. Trump’s speech drew 53,000 people.

“She wants to take away your guns.”

— Former President Donald J. Trump

Ms. Harris, in 2019, said she supports a gun buyback program for assault weapons, not all guns. Her campaign told The New York Times recently that she no longer supports a buyback program.

Advertisement

Peter Baker

“They take the strategic national reserves. They’re virtually empty now. We have never had it this low.”

This is exaggerated..

President Biden has indeed tapped the Strategic Petroleum Reserve to try to mitigate gasoline price increases , drawing it down by about 40 percent from when he took office, and it is currently at the lowest level since the 1980s. But it still has 375 million barrels in it now , which is not “virtually empty” nor is it at the lowest level ever.

“The vast majority of the country does support me.”

Mr. Trump never won a majority of the popular vote in either of the elections he ran in and never had the approval of a majority of Americans in a single day of Gallup polling during his presidency. An average of polls by FiveThirtyEight.com shows that he is viewed favorably by just 43 percent of Americans today and has the same level of support in a matchup against Vice President Kamala Harris.

Alan Rappeport

“They’re going to destroy Social Security.”

President Biden and Vice President Kamala Harris have pledged not to make any cuts to America’s social safety net programs. Mr. Trump suggested this year that he was open to scaling back the programs when he said there was “a lot you can do in terms of entitlements in terms of cutting.” He later walked back those comments and pledged to protect the programs. But if changes to the programs are not made, the programs’ benefits will automatically be reduced eventually. Government reports released earlier this year projected that the Social Security and disability insurance programs, if combined, would not have enough money to pay all of their obligations in 2035. Medicare will be unable to pay all its hospital bills starting in 2036.

Coral Davenport

“Everybody is going to be forced to buy an electric car.”

While the Biden administration has enacted regulations designed to ensure that the majority of new passenger cars and light trucks sold in the United States are all-electric or hybrids by 2032, the rules do not require consumers to buy electric vehicles.

“Our tax cuts, which are the biggest in history.”

The $1.5 trillion tax cut, enacted in December 2017, ranks below at least half a dozen others by several metrics. The 1981 tax cut enacted under President Ronald Reagan is the largest as a percentage of the economy and by its reduction to federal revenue. The 2012 cut enacted under President Barack Obama amounted to the largest cut in inflation-adjusted dollars: $321 billion a year.

“They’re drilling now because they had to go back because gasoline was going up to seven, eight, nine dollars a barrel. The day after the election, if they won, you’re going to have fuel prices go through the roof.”

The price of gasoline reached a low of $1.98 per gallon in April 2020, when Mr. Trump was president, chiefly as a result of the drop in driving in the first months of the Covid pandemic. It rose to a peak of $5 per gallon in June 2022, but has since steadily dropped to $3.60 per gallon in July 2024. The United States has steadily increased its oil production over the last decade, becoming the world’s largest producer of oil in 2018, a status it still holds today .

“If you go back and check your records for 18 months, I had a talk with Abdul. Abdul was the leader of the Taliban still is, but had a strong talk with him. For 18 months. Not one American soldier was shot at or killed, but not even shot at 18 months.”

Mr. Trump spoke with a leader of the Taliban in March 2020. In the 18 months that followed, from April 2020 to October 2021, 13 soldiers died in hostile action in Afghanistan.

“Democrats are really the radical ones on this, because they’re allowed to do abortion on the eighth and ninth month, and even after birth.”

No state has passed a law allowing for the execution of a baby after it is born, which is infanticide. Moreover, abortions later in pregnancy are very rare: In 2021, less than 1 percent of abortions happened after 21 weeks’ gestation, according to a Centers for Disease Control and Prevention report based on data from state and other health agencies. More than 90 percent of abortions happened within 13 weeks of gestation.

• Cast & crew

A high-powered CEO puts her career and family on the line when she begins a torrid affair with her much younger intern. A high-powered CEO puts her career and family on the line when she begins a torrid affair with her much younger intern. A high-powered CEO puts her career and family on the line when she begins a torrid affair with her much younger intern.

• Halina Reijn
• Nicole Kidman
• Antonio Banderas
• Harris Dickinson
• 1 nomination

Top cast 35

• Intern Rose

• Giggling Girl

• Nude cult member

• Uber Driver
• All cast & crew
• Production, box office & more at IMDbPro

More like this

2024 Venice Film Festival Guide

• December 20, 2024 (United States)
• United States
• Netherlands
• New York City, New York, USA (street scenes)
• Man Up Film
• See more company credits at IMDbPro

Technical specs

• Runtime 1 hour 54 minutes

Related news

Contribute to this page.

• See more gaps
• Learn more about contributing

More to explore

Recently viewed.