I'm a little confused about article VS Section in HTML 5.
My web page is divided into different types of foods.
Each row is a different type of food - (Meat, veg and desserts). Each row is subdivided into three columns / recipes
Should I enclose everything in a section tag AND then each type of food (row) in and article tag?
<h2> Vegetable recipes </h2>
<div class="row_divider clearfix>
<div class="span1_of_3>
<p> a veg recipie1 </p>
</div>
<div class="span1_of_3>
<p> a veg recipie2 </p>
</div>
<div class="span1_of_3>
<p> a veg recipie1 </p>
</div>
</div> <!-- end row-->
<h2> Meat recipes </h2>
<div class="row_divider clearfix>
<div class="span1_of_3>
<p> a Meat recipe 1 </p>
</div>
<div class="span1_of_3>
<p> a Meat recipe 2 </p>
</div>
<div class="span1_of_3>
<p> a Meat recipe 3 </p>
</div>
</div> <!-- end row -->
<h2> Dessert recipes</h2>
<div class="row_divider clearfix>
<div class="span1_of_3>
<p> a Dessert recipe 1 </p>
</div>
<div class="span1_of_3>
<p> a Dessert recipe 2 </p>
</div>
<div class="span1_of_3>
<p> a Dessert recipe 3 </p>
</div>
</div> <!-- end row -->
No you should not wrap each item in <article> see on w3c specs
In case you have a list of items you should wrap each one in <li> - list item and wrap all of those with <ol> or <ul> depends if the order of the items is important.
Related
I'm creating a React component which represents a product card. Each product card has a title and a list of sub-product cards, and so on. This nested structure can go infinitively.
At this stage my focus is on having a correct structure, outline and utilizing semantic HTML.
According to MDN, <article> is a correct element to represent this. So I've come up with this structure:
<h1> Products </h1>
<article>
<header>
<h2> Title: Product A </h2>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h2> Title: Product A-1 </h2>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h2> Title: Product A-1-1 </h2>
</header>
</article>
</li>
</ul>
</div>
</article>
</li>
<li>
<article>
<header>
<h2> Title: Product A-2 </h2>
</header>
</article>
</li>
</ul>
</div>
</article>
Now, I'm wondering if using h2 correct at all. I was thinking about using h3-h6 but what actually stopped me was that after 6 level of nesting, I wouldn't have a proper tag to use.
So, what's the correct way to present titles as the heading of the articles?
If you nest contents using <article>, use <h1> for the title of each article: Right -- more than one <h1> in the code for one HTML page.
Bruce Lawson wrote a comprehensive article about this subject:
https://www.smashingmagazine.com/2020/01/html5-article-section/
<h1> Products </h1>
<article>
<header>
<h1> Title: Product A </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h1> Title: Product A-1 </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h1> Title: Product A-1-1 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
</li>
<li>
<article>
<header>
<h1> Title: Product A-2 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
That said, my preferred approach is actually use aria-labelledBy to connect those <h1>s as the title of each segment, i.e.:
<h1> Products </h1>
<article aria-labelledBy="title001">
<header>
<h1 id="title001"> Title: Product A </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article aria-labelledBy="title002">
<header>
<h1 id="title002"> Title: Product A-1 </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article aria-labelledBy="title003">
<header>
<h1 id="title003"> Title: Product A-1-1 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
</li>
<li>
<article aria-labelledBy="title004">
<header>
<h1 id="title004"> Title: Product A-2 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
Arguably it's a little elaborative, but creates unmistakable link between each piece of content and its title when accessed with accessible technologies -- even when the segment is tab-navigated into with no chance to read its <h1> element.
I'm having trouble trying to push the containers inside my two columns layout. Right now it aligns which means that there are gaps between a container if it happens to be longer than other containers.
Here is the picture that hopefully explains it further
Below is the code of this part:
<section class="maincontent container container-fluid">
<!-- BOX 1 -->
<article class="servicestatus container container-fluid col-xs-12 col-md-6 float-md-left">
<a id="aservicestatus"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Service Status Notifications</h3>
<j:while test="${ou.next()}">
<j:if test="${ou.type!='planned'}">
<div class="statusitem">
<j:if test="${ou.type=='outage'}">
<span class="status red">Outage</span>
</j:if>
<j:if test="${ou.type=='degradation'}">
<span class="status yellow">Degradation</span>
</j:if>
<j:if test="${ou.type=='informational'}">
<span class="status green">Informational</span>
</j:if>
<h5>${ou.short_description}</h5>
<p class="subheader"><strong>Start Date</strong> <em>- ${ou.begin.getDisplayValue()}</em></p>
<p class="subheader">${ou.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<!-- BOX 2 -->
<article class="plannedoutages container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="aplannedoutages"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Scheduled Maintenance</h3>
<j:while test="${mn.next()}">
<j:if test="${mn.type=='planned'}">
<div class="outageitem">
<p class="subheader"><strong>${mn.cmdb_ci.name}</strong></p>
<p class="subheader">From: <em>${mn.begin.getDisplayValue()} - ${mn.end.getDisplayValue()} </em> </p>
<p class="subheader">${mn.u_outage_details}</p>
</div>
</j:if>
</j:while>
</div>
</article>
<article class="wifi container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awifi"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Wifi Information</h3>
<div class="container">
<j:if test="${bt.next() || bt.getRowCount() > 0}">
<j:if test="${bt.u_omers_company=='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
<j:if test="${bt.u_omers_company!='oxford'}">
<p class="subheader">Please follow these Instructions</p>
</j:if>
</j:if>
</div>
</div>
</article>
<!-- BOX 3 -->
<article class="windows10 container container-fluid col-xs-12 col-md-6 pull-md-right">
<a id="awindows10"></a>
<div class="container">
<!--<span class="sprite icon"></span> -->
<img src="win10icon.png" width="62" height="63"/>
<h3>Exchange/Win 10 Information</h3>
<div class="container">
<p class="subheader">IT Team is pleased to announce the deployment of Windows 10 with Office Professional Plus and Outlook Exchange Online (part of the Microsoft Office 365 platform). You can get regular updates here.</p>
<p></p>
<!--<p class="subheader">For those who would like to preview it prior to receiving the Windows 10 upgrade, please click here.</p> -->
<p class="subheader">We are pleased to inform you that your Office suite has been updated to a new version (1808).</p>
<p class="subheader">This will enable new collaboration features like <B>Document collaboration and co-authoring, AutoSave for Teams and OneDrive files, Improved cell and formula bar editing</B>, etc.</p>
<p></p>
<p class="subheader">To ensure your upgrade is complete:</p>
<p class="subheader">1. <B>Close</B> all open Microsoft apps. </p>
<p class="subheader">2. <B> Relaunch</B> any Microsoft Office desktop app (e.g. Word, PowerPoint, Excel, Outlook) </p>
<p class="subheader">3. <B> Check</B> that you have the right version. Go to <B>File > Account</B>, and look under Product Information for <B>"Version 1808"</B> </p>
<p></p>
<p class="subheader">Please see full release notes here.</p>
</div>
</div>
</article>
<!-- BOX 4 -->
<article class="hoursofoperation container container-fluid col-xs-12 col-md-6 float-md-right">
<a id="ahoursofoperation"></a>
<div class="container">
<span class="sprite icon"></span>
<h3>Hours of Operation</h3>
<j:if test="${be.next()}">
<j:if test="${be.u_omers_company=='oxford'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday to Friday – 8AM to 8PM ET</em></p>
<p class="subheader"><B>After-Hours Emergency Support: </B> <em>Monday to Friday – 8PM to 11PM ET Saturday to Sunday – 10AM to 7PM ET</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-865-8349</em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
<j:if test="${be.u_omers_company=='omers'}">
<p class="subheader"><B>Regular Operating Hours: </B> <em>Monday – Friday 7am to 7pm ET</em></p>
<p class="subheader"><B>24/7 on call support: </B> <em>available outside of business hours (by phone only). For urgent issues requiring immediate attention, please call the Service Desk instead of emailing. Depending on volumes being handled by the team, it may take up to 24 business hours for the Service Desk to respond to emails. Outside of normal business hours, the Service Desk phone line is automatically redirected to 24/7 on call support.</em></p>
<p class="subheader"><B>Telephone: </B> <em>416-814-6555, option 1 </em></p>
<p class="subheader"><B>Email:</B> Service Desk</p>
</j:if>
</j:if>
</div>
</article>
<!-- BOX 5 -->
<article class="ITsupport container container-fluid col-xs-12 col-md-6">
<a id="ITsupport"></a>
<div class="container">
<img src="/Facility_logoMobile.png" height="45px"/>
<h3>Facilities Portal</h3>
<p class="content"> From here you can submit a request relating to new office furniture, security cards, confidential shredding services or to request an ergonomic consultation.</p>
Go >
</div>
</article>
</section>
I am having trouble getting quotes (within divs) to line up properly.
This site is here
http://79.170.44.107/robinsonhambro.com/wp/.
What I need to do is line up the divs (with a class or id of hero) across a horizontal line along the top and the bottom of the picture. For some reason they dont seem to be sitting evenly.
Can anyone give me some help?
I assume the issue you are having is the quotes in the right hand side is a little lower than the other two DIVs.
One of the issues I saw was that there is an empty <p> in your right div. If you remove it, the text should line up with the rest of the DIVs. Remove this from your html: <p><!-- Right div hero section --></p>
Also, your .entry class has huge amount of padding in it,remove that and it should bring everything down closer.
I'd also recommend removing the other <p> tags and using margins for better control off the elements.
Here is my update to your html. This work from from browser.
Updated Style.CSS
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:50px 50px 45px 0;
becomes....
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:0 50px 45px 0;
Updated html
<div id="herobox">
<div id="left-hero">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2015/02/newdoor.jpg" width="265px" height="426px" alt="Robinson Hambro Door">
</div>
<div id="centre-hero">
<h1>
<p class="pcentre">Robinson Hambro specialises in Board Search and Chairman Advisory. The Firm advises companies with a global outlook drawing on the experience of a multilingual and multidisciplinary team.</p>
</h1>
<div class="subcentrehero">
<p class="p03">Robinson Hambro Chairman Advisory Service is priceless.Լ/p>
<p class="p04">- Carles Casajuana, former Spanish Ambassador to the UK</p>
</div>
<div class="subcentrehero">
<p class="p03">Robinson Hambro advice was invaluable and I could not recommend them more highly!</p>
<p class="p04">- Global COO of a $45bn firm</p>
</div>
</div>
<div id="right-hero">
<p class="p01">The process was carried out to a high standard, in a timely way, and I can therefore wholeheartedly recommend this service.</p>
<p class="p02">- Dr Andrew McCulloch, CEO, MHF</p>
<p class="p01">Karina knows everyone</p>
<p class="p02">Fiona Woolf, former Lord Mayor of the City of London</p>
<p class="p01">We would have no hesitation in highly recommending Robinson Hambro for an assignment in any sector.</p>
<p class="p02">- Robin Walker, Deputy Chairman, Berry Gardens</p>
</div>
</div>
<div style="clear:both"></div>
</article> <!-- end .entry -->
</div> <!-- end #main_content -->
</div> <!-- end #content_area -->
</div> <!-- end .container -->
</div> <!-- end #main-area -->
</div> <!-- end #page-wrap -->
<footer id="main-footer">
<div class="container clearfix">
<div id="footer-top-shadow"></div>
<div id="footer-widgets" class="clearfix">
<div class="footer-widget footer-col1"><div id="text-4" class="f_widget widget_text"><h4 class="widgettitle">INSIDER VIEW</h4> <div class="textwidget">Visit Karina's Column for insights on the world of finance by Robinson Hambro's Karina Robinson
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col2"><div id="text-5" class="f_widget widget_text"><h4 class="widgettitle">What We Do</h4> <div class="textwidget">Guiding Principles
<br/>
Chairman Counsel
<br/>
Board Search</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col3"><div id="text-6" class="f_widget widget_text"><h4 class="widgettitle">Get in touch</h4> <div class="textwidget">t: +44 (0) 20 3405 2355
<br/>
m: +44 (0) 7980 510 975
<br/>
e: info#robinsonhambro.com
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col4 last"><div id="text-3" class="f_widget widget_text"><h4 class="widgettitle">LINKS</h4> <div class="textwidget"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/women.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/bankers.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/youtube.png">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/googleplus.png"> </div>
</div></div> <!-- end . footer-widget --> </div> <!-- end #footer-widgets -->
<p id="copyright">Designed by Elegant Themes | Powered by WordPress</p>
</div> <!-- end .container -->
</footer> <!-- end #main-footer -->
I'm trying to align some text (asterisk) in the middle of the image above.
I've set the css to align center, but it looks like it's off to the left a bit.
How do I align the text in the exact center of the square image above?
<div class="alignright">
<p>
<img alt="Sign up Today" height="259" src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" width="300" /></p>
<p class="asterisk">
*Price for a single city. Multi-city, state<br>
and multi-state packages also available.</p>
</div>
<div class="circle">
<span class="number">1</span>
</div>
<h3>
Banana</h3>
<p>
A banana is an edible fruit, botanically a berry, produced by several kinds
of large herbaceous flowering plants in the genus Musa.</p>
<p> </p>
<div class="circle">
<span class="number">2</span>
</div>
<h3>
Orange is the colour of saffron, pumpkins and apricots.</h3>
<p>
Mobile phones, mobile broadband and home broadband in the Orange Shop. Plus the latest
news, entertainment, sport and lifestyle content from Orange.</p>
<p> </p>
<div class="circle">
<span class="number">3</span>
</div>
<h3>
Watermelon</h3>
<p>
We here at the National Watermelon Promotion Board have one goal: to increase
consumer demand for fresh watermelon through promotion, research</p>
jsfiddle:
http://jsfiddle.net/7bzc74qy/37/
It is being aligned to the center; you just have a left margin on your image that isn't on your asterisk.
Add those 49px to the asterisk and you're good to go.
.asterisk {
margin: 20px 0 0 49px;
}
JSFiddle
It seems that I have no missing DIVs or at least I see it. It seems to be off and overlap Any suggestions? I am unable to see the problems. The top and bottom one works well but the one with the Build Release notes and Supplemental Release Notes are off quite a bit.
<h2 class="Billboard">
System Knowledge Base</h2>
<div class="Billboard">
<p align="center">
Home I Customer Care
I Field Customer Care
I Logout
</p>
</div>
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
**<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p>
120 Links and Documents
</p>
</div>
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div style="float:right">
<p>
10 Link and Documents
</p>
</div>**
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->
You do in fact close a <DIV> prematurely. See the line below that I've commented out.
<h2 class="Billboard">
System Knowledge Base</h2>
<div class="Billboard">
<p align="center">
Home I Customer Care
I Field Customer Care
I Logout
</p>
</div>
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
**<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p>
120 Links and Documents
</p>
<!--- ** </div> RIGHT HERE ** --->
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div style="float:right">
<p>
10 Link and Documents
</p>
</div>**
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->
Looks like you have an extra closing div tag. I am going to mark this question on hold because it is too localized. Please use the W3C Validator for things like this: http://validator.w3.org/check
See the closed div tag below marked with a comment:
<h2 class="Billboard">
System Knowledge Base</h2>
<div class="Billboard">
<p align="center">
Home I Customer Care
I Field Customer Care
I Logout
</p>
</div>
<h2 class="Billboard">
General System Information</h2>
<div class="Billboard">
<p>
80 Links and Documents
</p>
</div>
**<h2 class="QuickLinks">
Build Release Notes</h2>
<div class="QuickLinks">
<p>
120 Links and Documents
</p>
</div> <!-- EXTRA CLOSING TAG IS HERE -->
</div>
<h2 class="QuickLinks">
Supplemental Release Notes</h2>
<div style="float:right">
<p>
10 Link and Documents
</p>
</div>**
<h2 class="Billboard">
TFACTS Customer Care</h2>
<div class="Billboard">
<p>
10 Link and Documents
</p>
</div>
<h2 class="Billboard">
Reference Materials and Storyboards
</h2>
<div class="Billboard">
<p>
250 Links and documents
</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- CLOSES THE MAIN CONTENT DIV -->