This question already has answers here:
What is XHTML role attribute? What do you use it for?
(3 answers)
Closed 8 years ago.
I have created a web page using html5.
I used source code from bootstrap.
For example: role="main", role ="navigation", role = "document" etc.
If I remove these attribute from my code, page didn't any change.
So I want to know: what is the purpose of "role" attribute?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<h1><img src="img/logo.png" /></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/>
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left" />
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the Job Board >
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span class="padding-10"><img src="img/article-logo.png" /></span>
<span class="padding-10">ARTICLES</span>
<span class="padding-10">COLUMNS</span>
<span class="padding-10">BLOG</span>
<span class="padding-10">TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span class="padding-10">ABOUT</span>
<span class="padding-10">AUTHORS</span>
<span class="padding-10">MASTHEAD</span>
<span class="padding-10">CONTRIBUTE</span>
<span class="padding-10">STYLE GUIDE</span>
<span class="padding-10">CONTACT</span>
<span class="padding-10">SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<h3>.NET Training</h3>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<h3>Shopify Expert</h3>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
It provides support for ARIA (Accessible Rich Internet Applications) which allows to specify even more semantic richness in documents.
You can add role="search" to your search form, role="banner" to your
masthead, and role="contentinfo" to your page footer. There’s a full
list of values in the ARIA specification at
http://www.w3.org/TR/wai-aria/roles#role_definitions.
Basically you don't have to add them, but its better if you do as it provides more context for your page. More discussed at A List Apart.
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links, all we need to do is use the nav element correctly. This will allow screen reader users to skip past navigation without us having to provide an explicit link.
Twitter Bootstrap uses like <nav role="navigation">. So Bootstrap take consider not only normal browser but also take care of screen reader browsers.
Note: By including Role attribute you are making your website more accessible and its good practice to use this Role attribute.
Related
I'm building a landing page and I encounter a problem. I have an image of a project that when is clicked will zoom in a gallery mode and on top of that image it is a link towards the Behance page of the project. But what ever I do when I click the project link is opening still the image gallery. This is my code:
<div class="row masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<a href="images/portfolio/gallery/LiveStreaming.png" class="thumb-link" title="Live" data-size="1617x1440">
<img src="images/portfolio/LiveStream500x625.jpg" srcset="images/portfolio/LiveStream500x625.jpg 1x, images/portfolio/LiveStream1000x1250.jpg 2x" alt=""></a>
</div>
<a href="https://www.behance.net/gallery/77261419/Live-Streaming-Landing-Page-Design" class="item-folio__project-link" title="Project link">
Project Link
</a>
<div class="item-folio__text">
<h3 class="item-folio__title">
Live Streaming Landing Page
</h3>
<p class="item-folio__cat">
UI Design
</p>
</div>
<div class="item-folio__caption">
<p>A modern touch to a simple service. UI design made in Sketch for a Live Streaming Landing Page.</p>
</div>
</div>
<!-- end item-folio -->
</div>
<!-- end masonry__brick -->
</div>
<!-- end masonry -->
</div>
<!-- end masonry-wrap -->
What do I do wrong?
<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 style="font-family:times-new-roman">BIOGRAPHY</h2>
<div id="demo" class="collapse">
<p>
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black">
<br>
<div class="text-center">
<i class="fa fa-angle-double-down" style="font-size:36px;"></i>
</div>
</button>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
I am trying to have this section in a website I'm creating. As you can see, I am using the Bootstrap grid system to make sure the text is only within a certain box. Problem is the text still fills the entire page so the Bootstrap doesn't seem to work. Maybe I'm not doing something right.
Have you included bootstrap 4 and fontawesome css files with jquery in header?
content is showing in bootstrap grid layout only. see my code below and fiddle and check the versions of bootstrap css and js files
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 style="font-family:times-new-roman">BIOGRAPHY</h2>
<div id="demo" class="collapse">
<p>
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black">
<br>
<div class="text-center">
<i class="fa fa-angle-double-down" style="font-size:36px;"></i>
</div>
</button>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
I've recently designed a website and have realised that some of the background of the content, when you scroll down is transparent and so the fixed div that is beneath the content displays on IE and Firefox. Please see my website for a live view of the problem. The HTML is below. Please see below an image of my problem as you can see the text "Get In Touch" is being displayed. I want the background of the content to be above this. Please find attached the fiddle.
<body>
<div class="overlay overlay-hugeinc">
<button type=button class=overlay-close></button>
<img src=http://kadeem.london/Image/Transparent-Kadeem-min.png class="fixed-Me scaling">
<nav>
<ul>
<li><a href=http://kadeem.london>Home</a></li>
<li><a href=papers.html>Papers</a></li>
<li><a href=events.html>Events</a></li>
<li><a href=designs.html>Designs</a></li>
</ul>
</nav>
</div>
<div id=trigger-overlay>
<div class=menubutton>
<h3 class=menubuttontext>MENU</h3></div></div>
<div class=high-container>
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4"/>
</video>
<div class=Kadeem-Logo>
<img src=http://kadeem.london/Image/KL-LOGO.png>
</div>
</div>
</div>
</div>
<div class=content-container>
<div class=row>
<div class="border red"></div>
<h1 class=title-role>
I'm Kadeem
</h1>
</div>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<br>
<p>I go by the name of <a href=https://www.linkedin.com/pub/kadeem-laurie/57/277/9b5>Kadeem Laurie</a>. I am an events graduate currently developing an events marketing start-up. This website was created from scratch using HTML5, CSS3,jQuery & responsive design. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design. <p> Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I am currently working as an event organiser at <a href=https://en.wikipedia.org/wiki/Spire_Healthcare>Spire Healthcare</a>. I hope to integrate events within marketing strategy more. I like to ask the <a href=http://stackoverflow.com/users/1923610/kadeem-laurie target=_blank>right questions</a> and find solutions from different perspectives. My academic interests lie in the regions of city branding and <a href=https://www.academia.edu/14690454/The_Commercial_and_Political_Implications_of_Events>events management.</a> <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
<p>
</p>
</div>
</div>
</div>
<div class=other-contain>
<div class=My-Gems>
<div id=effect-6 class="effects clearfix">
<div class=img>
<img src=https://alchetron.com/cdn/zeebra-5e766eb1-964a-49c5-b888-c05effa9354-resize-750.jpeg style=height:100% alt>
<div class=overlay5>
<a class=expand>Bone & Joint Launch</a>
</div>
</div>
<div class=img>
<img src=http://kadeem.london/Image/Money-Matters-Logo.png alt>
<div class=overlay5>
<a href=designs.html class=expand>Money Matters</a>
</div>
</div></div>
</div>
</div>
<div class=eee>
<div class=row>
<section id=activities class=pane>
<div class=pane-content>
<div class=pane-row>
<div class=summary>
<p>POSTS</p>
</div>
</div>
<div class="pane-row d">
<div class=activity-col>
<h4>city branding</h4>
<ul>
<li><a>The Impact of City Branding in The Perceived Image of Cities: The Case of New York City</a></li>
</ul>
<h4>Urban Regeneration</h4>
<ul>
<li>The Role of Events in Urban Regeneration</li>
<li>Hacknified</li>
</ul>
</div>
<div class=activity-col>
<h4>Marketing Strategy</h4>
<ul>
<li>Marketing Strategy: British Airways vs. Air France</li>
<li>The Marketing Strategies of Startup Brands</li>
</ul>
<h4>Events Management</h4>
<ul>
<li>The Political & Commerical Implications of Events</li>
</ul>
</div>
<div class=activity-col>
<h4>Events Marketing</h4>
<ul>
<li>Marketing Events Online</li>
<li>The Role of City Branding in Urban Tourism</li>
</ul>
<h4>Digital Marketing</h4>
<ul>
<li>Digital Content</li>
<li>Post Purchase Behaviour of Hotel Guests</li>
</ul>
</div>
</div>
</div>
</section>
<footer class=goodbye>
<div class="border red4"></div>
<div class=block>
<div class=centered>
<h2 class=text-go>GET IN TOUCH</h2>
</div>
</div>
</footer>
<footer class=goodbye4>
<div class=block6>
<div class=centered6>
If you would like to find out more about me you can <a href=mailto:kadeemlaurie#gmail.com>message me</a>.
</div>
</div>
</footer>
<footer class=goodbye5>
<div class=container1>
<footer class=footer>
<div class=container1>
<div class=flex-item>© 2015 KADEEM</div>
</div>
</footer>
</div>
</div>
You have an empty P tag inside your post-container that is causing this gap. Remove it and it will fix everything accross all browsers. Also, once the empty tag is removed, you could give the last P element (with the "My favourite book" text) a padding-bottom of 45px to push the container down correctly.
<div class="post-container">
<div class="Biographical-Content hidden visible animated fadeInUpBig">
<div style="height: 407px;" class="step out-view active"></div>
<br>
<p>I go by the name of [...]</p>
<p> Freedom of thought [...]</p>
<p>My favourite book [...]</p>
<p></p> --> Empty P tag
</div>
</div>
If for any reason you can't avoid having that "extra" <p> in your html; add this to your css
p:last-child {
display: none;
}
I have this website http://www.basketballworkouttips.com/jump-manual-review/ and the problem is when viewing it in IE8 the sidebar gets pushed down to the bottom of the page. however, if I remove the review box from the page the side bar is showing ok.
I want to keep the review box but I don't want my side bar to be pushed down.
any idea how to fix this?
Here's the review box code
<div class="review">
<div itemtype="http://schema.org/Product" itemscope="">
<div itemtype="http://schema.org/Review" itemscope="">
<div class="ta_rating_container ta_box_right" style="width:240px;">
<div id="ta_rating">
<div>
<div>Review of:
<span class="title item fn" itemprop="name">
<a onclick="_gaq.push(['_trackEvent', 'Affiliate Clicks', 'Jump Manual', '/jump-manual-review/-Review Box Link',, false]);" rel="nofollow" href="http://www.basketballworkouttips.com/go/jumpmanual" title="Jump Manual">Jump Manual</a>
</span>
</div>
<div class="clear"></div>
<dl>
<div class="clear_space"></div>
<div class="hr"><hr /></div>
<div>Reviewed by:
<span class="reviewer author byline vcard hcard">
<span class="author me fn" itemprop="author">Jesse Parker</span>
</span>
</div>
<dl>
<dt>Rating:</dt>
<dd>
<div class="ta_rating result rating" itemtype="http://schema.org/Rating" itemscope="" itemprop="reviewRating">
<meta content="1" itemprop="worstRating">
<meta content="5" itemprop="ratingValue">
<meta content="5" itemprop="bestRating">
<div class="result" style="width:100%;" title="5">5</div>
</div>
</dd>
</dl>
<div class="clear"></div>
<div class="clear_space"></div>
<div class="hr"><hr /></div>
<h3>Summary:</h3>
<div class="ta_description summary" itemprop="description">
<p>
<span>The Jump Manual is an effective program that will help you increase your vertical leap. The program is easy to follow and provides one on one coaching from it's author + exclusive 60 day money back guarantee. if you're looking to increase your vertical this program is the best one to go for.
</span>
</p>
</div>
</div>
<div class="rating_btn">
<a onclick="_gaq.push(['_trackEvent', 'Affiliate Clicks', 'Jump Manual', '/jump-manual-review/-Review Box Button',, false]);" itemprop="url" class="ar_button ar_orange" href="http://www.basketballworkouttips.com/go/jumpmanual" title="Download Jump Manual" rel="nofollow">Download Jump Manual</a>
</div>
<div class="clear"></div>
</div>
</div>
<div itemprop="reviewBody">
<div itemtype="http://schema.org/Thing" itemscope="" itemprop="itemReviewed">
<meta content="Jump Manual" itemprop="name">
</div>
This looks like a nesting issue. Your sidebar is within the same block element as your #content. Thusly floats will not work properly. FireFox and other browsers are most likely auto-correcting it, but IE8 is limited and does not give guess work to assist.
I would correct the issue by placing the #sidebar_wrap_right and placing it at the same level as #content. Then be sure to add a width to both in CSS and float the 2 divs left adding margin/padding as needed.
I also have never seen the tag below that is rendering, it is possible you have some invalid HTML and CSS as well.
<css3-container style="z-index: auto; position: absolute; direction: ltr; top: 5500px; left: 28px;">