HTML5 Semantic mark up help - html

I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>

Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>

In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element

Related

How should I seperate this Footer from the Content?

So I was learning to make a web page using HTML and CSS only.. lss, I can't put the footer under the content somehow. I'm supposed to separate every block from the header, content, and footer. but the footer stays inside the content or is blended with the content.
<header>
<ul class="Tabbar">
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
<li>About</li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_beginner.jpeg" alt="Beginner Cardio" class="gambar1">
<a href="detailbeginnercardio.html">
<div class="desc">
<div class="text">Beginner Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Pullup_1.jpeg" alt="Pull up" class="gambar1">
<a href="detailpullup.html">
<div class="desc">
<div class="text">Pull Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_beginner.jpeg" alt="Beginner Yoga" class="gambar1">
<a href="detailyogabeginner.html">
<div class="desc">
<div class="text">Yoga for Beginners</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_intermediate.jpeg" alt="Intermediate Cardio" class="gambar1">
<a href="detailintercardio.html">
<div class="desc">
<div class="text">Intermediate Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>
I tried on putting it on a different block, and tried to give margins and padding but every time I resize the page the footer moved to the side of the content.
Maybe change the "content" to "main" or "article" or something else. "Content" is not recommended to use. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content

Make an iframe heigher

I am not able to cope with the iframe. I am trying to insert my curriculum in it, but although the width seems easily managable, the height does not repond to increments in the feature. The result is an iframe that ocupies the width of the page but is wide too narrwo to confortably scroll down. Downhere I leave the code (The issue is halfway) and my webpage, https://rubencioak.github.io/cv2.html, in case it's of any help.
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TWMMZHX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="header">
rubencioak.github.io
<ul class="icons">
<li><span class="label">Email</span></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Curriculum Vitae</h1>
</header>
<!-- About Container -->
<div class="w3-container">
<div class="w3-content w3-text-color2 w3-padding-64" style="max-width:700px">
<p>
<span> </span> Download [pdf]
</p>
</div>
</div>
<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz">
<div class="responsive-wrapper responsive-wrapper-wxh-550x2000 w3-text-color2">
<p> <iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<p>Your web browser does not support iframes. Please click at the pdf link above. </p> </iframe> </p>
</div>
</div>
<section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li>Homepage</li>
<li>Research</li>
<li>Curriculum</li>
<li>Teaching</li>
<li>Contacts</li>
<li>Referees</li>
<!--<li>
<span class="opener">Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li> -->
</ul>
</nav>
<section>
<header class="major">
<h2>Contact</h2>
</header>
<p>Please, contact me with any question, specially those regarding my reseach. Your feedback will be much apreciated</p>
<ul class="contact">
<li class="icon solid fa-envelope">rubenprzsnz#gmail.com</li>
<!-- <li class="icon solid fa-phone">(000) 000-0000</li> -->
<li class="icon solid fa-building">
Departament d'Economia<br />
Edifici B<br />
Universitat Autònoma de Barcelona<br />
08193 Bellaterra, Barcelona, Spain</li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Untitled. All rights reserved. Demo Images: Unsplash. Design: HTML5 UP.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
Change your height in your inline style on your iframe to vh (viewport height)instead of %. I changed the height to 1000vh using Dev Tools and it nearly filled the whole screen. That's not the ideal fix, but it works.
<iframe width="75%" height="500%" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">
<!------Change height to vh------>
<iframe width="75%" height="500vh" src="https://docs.google.com/viewer?url=https://rubencioak.github.io/documents/Academic_CV___Ruben.pdf&embedded=true">

CSS only: moving nested content into side drawer

Anyone know of any tricks to get the main content to move left (in my example) so it is lined up with the right drawer. I'm sure it has something to do with getting the absolute drawer outside of the overflow:hidden wrapper.
Here's the html, the css is in the jsfiddle example:
<nav>
<div class="header">
Title
</div>
<div class="content">
<ul>
<li>pizza</li>
<li>tacos</li>
<li>nachos</li>
</ul>
</div>
</nav>
<main>
<header class="rightnav">
<span class="left-nav">
toggle
</span>
<span class="content">
<input/>
link1 link2 link3
</span>
<span class="right-nav">
icon
</span>
</header>
<article>
<div class="header">header</div>
<div class="content">content</div>
</article>
<article>
<div class="header">header2</div>
<div class="content">content2</div>
</article>
<article class="detail">
<div class="header">header3</div>
<div class="content">content3</div>
</article>
</main>
I know it can be done if I break the right drawer outside of the main wrapper, just wondering if there are any techniques to get it to work leaving the html as is.

In code footer goes all over the place

I have some troubles with my footer on a website. Footer is not displaying at the bottom of the page but it starts right below the header and covers elements that are under it. For better understanding I made fiddle for it and screenshot
But its like this:
<div class="mens">
<div class="main">
<div class="wrap">
<div class="section group">
<div class="cont span_2_of_3">
<h2 class="head">PRIPOROČAMO</h2>
<div class="top-box">
and then there are some products and then there are the end divs for this:
</div>
</div>
</div>
</div>
</div>
</div>
And then follows the footer:
<footer class="footer-2 bg-midnight-blue">
<div class="container">
<nav class="pull-left">
<ul>
<li class="active">
Home
</li>
<li>
Company
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="social-btns pull-right">
<div class="fui-vimeo"></div><div class="fui-vimeo"></div>
<div class="fui-facebook"></div><div class="fui-facebook"></div>
<div class="fui-twitter"></div><div class="fui-twitter"></div>
</div>
<div class="additional-links">
Be sure to take a look to our Terms of Use and Privacy Policy
</div>
</div>
</footer>
And I know its a lot of code but I would really appreciate if someone could look at it. Thanks.
use this to reset ur css
.clearfix:before,.clearfix:after{content: '.';display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;clear: both;}
.clearfix {overflow: auto;zoom: 1;}
and add clearfix class in parent div where in child u have used float like in
<div class="page-wrapper clearfix">
<div class="main clearfix">
<footer class="footer-2 bg-midnight-blue clearfix">

Foundation Orbit Slider: Navigation Arrows referencing to index

When using Foundation: Orbit Slider, the navigation arrows are not taking me to the next slide but going back to the index page each time.
Markup `
<div class="row full-width" id="portfolio">
<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<!-- Navigation Arrows -->
Prev <span></span>
Next <span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>`
Try the following. Remove the following classes and rows (they are added by the JS automatically):
example-orbit
orbit-slides-container
active
everything after the <\ul>
Add closing tag to the <div class="orbit-container">
So your code will be this:
<div class="row full-width" id="portfolio">
<div class="orbit-container">
<ul data-orbit="">
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
It can be also a good idea to put the <div class="orbit-container"> into an additional div with class="large-12 columns", and to use a different image inside the first and second slide. I have no other ideas. It also took me a while to figure out how Orbit correctly works.