I wonder how to reorganize the following html structure into HTML5 structure Semantically ? I'm thinking to place in section, figure and dl but no idea how to organize it correctly. Hope someone experience with HTML 5 semantic structure can show me the correct way. Thanks.
<div class="product-list">
<h1>Product Category A</h1>
<div class="item odd">
<div class="inner">
<div class="image"><img src="img/product.jpg"></div>
<div class="title">Product 1
<span>Sub title 1</span>
</div>
<div class="desc">
<div class="col-left">Lorem ipsum</div>
<div class="col-right">Price: 50</div>
</div>
</div>
</div>
<div class="item even">
<div class="inner">
<div class="image"><img src="img/product.jpg"></div>
<div class="title">Product 2
<span>Sub title 2</span>
</div>
<div class="desc">
<div class="col-left">Lorem ipsum</div>
<div class="col-right">Price: 70</div>
</div>
</div>
</div>
<div class="item even">
<div class="inner">
<div class="image"><img src="img/product.jpg"></div>
<div class="title">Product 3
<span>Sub title 3</span>
</div>
<div class="desc">
<div class="col-left">Lorem ipsum</div>
<div class="col-right">Price: 20</div>
</div>
</div>
</div>
</div>
HTML5 is simply a specification. It introduces a new set of elements. So, in advising you in "converting an HTML structure" into HTML5, I'd suggest you take a look at the new tags and use them.
I see a lot of div tags in your current markup. An HTML5 compliant site wouldn't look like this. Check out this.
To give you a starting point, this sample uses many of the new tags and would be considered HTML5 compliant:
<!DOCTYPE html>
<head></head>
<body>
<nav>
<li></li>
<li></li>
</nav>
<main>
<section></section>
<article></article>
</main>
</body>
</html>
Related
markup 1: -
below I've created "about section" block. in this block have some mini blocks like:- stats and features.
` <section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
Question from about code:-
Should i need to create new css file to each block like about.css, about-stats.css and about-features.css or create one file for this block about.css ?
markup: 2
`<section class="about">
<div class="about__container">
<div class="about__header">
<h2 class="about__title">about title</h2>
<p class="about__sub-title">about sub title </p>
</div>
<div class="about__stats about-stats">
<div class="about-stats__item">
<div class="about-stats__title">stats title</div>
<div class="about-stats__sub-title">stats sub title</div>
</div>
</div>
<div class="about__features about-features">
<div class="about-features__item">
<div class="about-features__icon">features icon </div>
<div class="about-features__title">features title </div>
</div>
</div>
</div>
</section>`
question from above code:-
should we mix child blocks with parent block or markup 1 is good ?
In the following picture as you can see "Colton Smith" is coming in two lines. What should I do to prevent this? I want to display in the same line.
Here is my code
<div class="row mt-5" id='imag'>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-1">
<img src="images/image-colton.jpg" alt="" />
</div>
<div class="col-lg-3" id="intro">
<h6>Colton Smith</h6>
<h6>Verified Buyer</h6>
</div>
</div>
<div class="row">
<p>
"We needed the same printed design as the one we had ordered aweek prior. Not only did they find the original order, but we alsoreceived it in time. Excellent!"
</p>
</div>
</div>
</div>
here is the image of above code
In your code change <div class="col-lg-3" id="intro"> to <div class="col-lg-11" id="intro">
I am working on html through angularjs.
While I am working on the title of the page, it shows me the part of title
What I mean about it is that the image below shows you.
My code for html is below,
<div class="wrapper">
<div class="page-header section-dark" style="background-image: url('./assets/img/Cover1.jpg')">
<div class="content-center">
<div class="container">
<div class="title-brand">
<div class="angular-logo"><img alt="" src="./assets/img/asia-logo.png"></div>
<h1 class="presentation-title"> ASIA-SMS</h1>
<div class="type">pro</div>
<div class="fog-low">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="./assets/img/sections/fog-low.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to fix it?
Thanks
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
I'm trying to make the entire content inside the <a> tag clickable but only the text is right now.
Here a CodePen: http://codepen.io/francobermudez/pen/dvBpNw?editors=1100
HTML:
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<a class="btn-evento btn-azul" href="#">Detalles</a>
</div>
</div>
</div>
</a>
</div>
</section>
You have a link inside a link (The "Detalles" text) - that cannot work. Delete the inner link (i.e. convert it to a regular text div or p tag) and you'll be able to click the whole container.
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<div>Detalles</div>
</div>
</div>
</div>
</a>
</div>
</section>
http://codepen.io/anon/pen/GWbNjN?editors=1100