In HTML, a container refers to a pair of HTML tags. I also use this term to refer to tag pairs that have other HTML elements inside of them (and these are also called parent containers). Understanding which tags on your pages are containers can make it easier to target elements with CSS later.
Semantic HTML Containers
The containers below were included in your zyBook for this module and are considered semantic, which means that they help convey the meaning of your content.
Header
The header on your site will generally hold the same content on every page. It holds things like the h1, logo, navigation, search bar, cart, and account login information. It is one the the three containers I start my HTML body off with when I create a new file.
<header>
<a href="#" aria-label="Go to site home page"><img src="images/logo.png" alt="" width="100" height="100"></a>
<h1>Site Topic Heading</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
Footer
The footer on your site will generally hold the same content on every page. It holds things like copyright information, social media links, secondary navigation, etc. It is one the the three containers I start my HTML body off with when I create a new file.
<footer>
<p>Copyright © 2023</p>
<address>
1234 Main Street<br>
Anytown, State 12345<br>
<a href="tel:555-555-5555">(555) 555-5555</a>
</address>
<section>
<h2>Find Us on Social Media</h2>
<a href="#" aria-label="View our Facebook page"><img src="images/facebook.svg" alt=""></a>
<a href="#" aria-label="View our Twitter Page"><img src="images/twitter.svg" alt=""></a>
<a href="#" aria-label="View our Instagram account"><img src="images/instagram.svg" alt=""></a>
</section>
</footer>
Main
The main on your site is where you put the content that changes on each page of your site to be about that page topic. It holds things like your sections or articles on those topics, as well as any images or other related content. It is one the the three containers I start my HTML body off with when I create a new file.
<main>
<!-- This is not all of the content you will usually have in your main -->
<section>
<h2>Ayas: Responsive Website Development</h2>
<img src="images/responsive-website.jpeg" alt="responsive website shown
displayed on multiple devices" width="400" height="300">
<p>
The redesign and development of the Ayas website is one of my
favorite projects. The original site has many issues with functionality,
usability, and accessibility, and was originally created before websites
needed to worry about being responsive. The issues listed above were
hurting the company's bottom line, as their pages didn't rank in any
search results. The redesign has allowed the company to increase their
daily page visits by 300%, and their sales have increased by 25% since
the site was deployed.
</p>
</section>
</main>
Address
The address tags are used to contain information about the location, phone number, and email address for the owner of the site. These are commonly (but not always) used in the footer, like the example above. They are one of the two places where it’s acceptable to use line breaks for formatting. (The other being text that has to break on certain lines, like poems. Otherwise, use CSS to style your text, not line breaks).
<address>
1234 Main Street<br>
Anytown, State 12345<br>
<a href="tel:555-555-5555">(555) 555-5555</a>
<a href="mailto:contact@company.com">contact@company.com</a>
</address>
Section
Sections on your pages can be placed inside of the header, main, or footer, and can be used inside of other sections, articles, and asides. Each section should be used to group content on a topic or sub-topic, and should always include a heading. If your content doesn’t need a heading, it likely doesn’t need to be placed in a section (you don’t need a heading and nothing else in a section, or a heading and single image, for example). When adding your heading to the section, ideally you want it to be the first element in the container. You can use CSS to move it below an image or other decorative element with CSS if needed.
<section>
<h2>Ayas: Responsive Website Development</h2>
<img src="images/responsiveWebsite.jpeg" alt="responsive website shown
displayed on multiple devices" width="400" height="300">
<p>
The redesign and development of the Ayas website is one of my
favorite projects. The original site has many issues with functionality,
usability, and accessibility, and was originally created before websites
needed to worry about being responsive. The issues listed above were
hurting the company's bottom line, as their pages didn't rank in any
search results. The redesign has allowed the company to increase their
daily page visits by 300%, and their sales have increased by 25% since
the site was deployed.
</p>
<section>
<h3>Skills Used</h3>
<img src="images/html-logo.png" alt="the logo for the h.t.m.l. 5 language
looks like a stylized shield and is orange with the number five on it" width="75" height="75">
<img src="images/css-logo.png" alt="the logo for the c.s.s. 3 language
looks like a stylized shield and is blue with the number three on it" width="75" height="75">
<img src="images/js-logo.png" alt="the logo for the javascript language
looks like a stylized shield and is yellow with the letters J. and S. on it" width="75" height="75">
<p>
This project was built using HTML5, CSS3, and JavaScript
</p>
</section>
</section>
Article
Article tags are used to contain content that could “stand alone.” This means that if you took that content away from your site and the context, it would still make sense to anyone that saw it. Things like news articles, blog posts, and even cards with an image, blurb, and link to a full blog post or new article are appropriate pieces of content for article tags. Like sections, articles require a heading, and are not semantically correct without one, and your heading should be the first thing inside of the container.
<article>
<h2>
<a href="https://www.cnn.com/2023/07/27/movies/haunted-mansion-review/index.html">
Haunted Mansion’ scares up a modest renovation of the Disney ride turned movie
</a>
</h2>
<img src="images/haunted-mansion-screengrab.jpeg"
alt="Chase W. Dillon and Rosario Dawson in Disney's Haunted Mansion." width="300" height="200">
</article>
Navigation
The navigation tags are used to hold an unordered list, where each list item in the list holds a link (anchor tag) and text including the name of each of the main pages on your website. We use an unordered list because these include some functionality helpful for users navigating your site with a screen reader.
All links in your navigation should be relative links. This means that all of your HTML is in the same folder, and when you link to another page, the link only includes the file name. The example below shows navigation from the home page for a site with three pages: Home, About, and Contact. The home page is using a placeholder link because we don’t need a link to the home page from the home page.
You should only ever use one pair of navigation tags on your page.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Aside
An aside is used to contain information related to the content on your page, but not part of the content for your page. If you think about something like a blog post where a user talks about their vacation to Disney World, they would likely use an aside to hold links to the Disney World. website and any other sites they used when planning the trip. Those links don’t belong to the user posting to their blog, but they are related to what they’re talking about. In cases like this, these will be absolute links, because they are linking off of your site.
Like articles and sections, an aside requires a heading, and it should be the first thing inside of the container.
<aside>
<h2>Related Links</h2>
<a href="https://disneyworld.disney.go.com/">Walt Disney World Resorts</a>
<a href="https://wdwnt.com/">Walt Disney World News</a>
<a href="https://www.visitorlando.com/things-to-do/theme-parks/walt-disney-world-resort/">Visit Orlando: Walt Disney World</a>
</aside>
Non-Semantic HTML Containers
The containers below were included in your zyBook for this module. These two are NOT semantic. This means that they add no meaning and should only use them for styling purposes. Keep in mind: you do NOT need to wrap a single element in a div just to make an inline element display as a block element.
Div
A div is a generic block-level container. We use divs in cases where they’re needed for styling purposes only, as they do not add meaning to a page and it’s better to use semantic containers.
<div>
<!-- a div can be used empty to draw shapes on your page, or inside of a semantic container
for other styling purposes -->
</div>
Span
A span is a generic inline container. We use spans in cases where they’re needed for styling purposes, as they do not add meaning to the text they wrap. A pair of span tags would be used for things like wrapping your company name so that you could style it with your brand color later to make it easier to spot without adding any semantic meaning to it.
<p>
<span class="co-name">Path of Light Yoga Studio</span> provides all levels of yoga
practice in a tranquil, peaceful environment. Whether you are new to yoga or an
experienced practitioner, our dedicated instructors can develop a practice to meet
your needs. Let your inner light shine at the <span class="co-name">Path of Light
Yoga Studio</span>.
</p>
GIT Coding Club 