From html to html5

carthago1 · October 1, 2017, 12:01pm

I want to start using HTML5 for below website. The main areas I can figure out and rename, but how to deal with the different I am using?

Best is directly start making the site responsive. I only not understood how to use the % when my width of the pages (#wrapper) is 770px. Do I have to use the 770 as 100%. How to calculate the other divs?

I thought for the Html5 in this way:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
   <meta name=viewport content="width=device-width, initial-scale=1">
     <titlele>lorem ipsum</title>
     <link rel="" href="">
  </head>
  <body>
<top>
<!-- here start top bar with logo, header and image -->
</top>
<navigation>
<!-- here include with navigation horizontal -->
</navigation>
<introduction>
<!-- the part with the left and right div as well as quoteblock -->
</introduction>
<productgroup>
<!-- the part with the 6 images and different products -->
</productgroup>
<footer>
<!-- footer area with social media, map and links -->
</footer>
  </body>
</html>

Did I split the page into right main sections. ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/css/styling.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quovolver.js"></script>
<script type="text/javascript">
		$(document).ready(function() {
		
			$('blockquote').quovolver();
	
		});
	</script>
</head>
<body>
<div id="wrapper">
   <div id="top">
        <img style="float:left;" src="images/logo.jpg" height="" width="" alt="" />
        <h1>lorum ipsum</h1>
   </div>
   <div id="animation"></div>
   <div id="content">
      <div id="topnavigation">
	   <!-- include nav here -->
	  </div>            <div id="contentleft">
		    <h2>lorum ipsum</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices. Etiam sollicitudin neque a vestibulum bibendum. Curabitur varius mauris ac turpis interdum, quis tincidunt lacus tincidunt.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices..</p>
			<p style="margin-bottom:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices.</p>
		 </div>
		 <div id="contentright">
		   <blockquote>
		                <h4>lorum ipsum</h4>
						<p>&#8220;Nulla facilisi. Mauris vel mattis risus. Ut nec luctus tortor. In interdum pulvinar quam non pharetra. Proin sed diam in lorem varius tempor. Vestibulum porta, diam quis mollis rutrum, dolor lectus interdum leo, malesuada convallis purus tortor sed turpis.&#8221;
                          </p>
						
						<cite>&#8211; lorum US&#36;</cite>
					</blockquote>
					
					<blockquote>
					<h4>lorum ipsum</h4>
						<p>
							&#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam libero metus, blandit at pulvinar at, feugiat ac est. Fusce turpis dolor, lobortis non consequat sed, varius ac nulla. Donec congue quam id nibh interdum pellentesque. Aenean ac elementum ipsum. Ut vel dui neque.&#8221;
						</p>

						<cite>&#8211; lorum ipsum US&#36;</cite>
					</blockquote>
		 </div>
  <div class="equaliser"></div>
   <div class="productrow">
	<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="img/.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices.</p>
		  <a href="#" title="">lorum ipsum</a>
	</div>
	<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="img/red-sea-holidays.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices.</p>
		  <a href="egypt-beach-holidays.php">lorum ipsum</a>
	</div>
     <div class="box rght">
	      <h2>lorum ipsum</h2>
		  <img src="img/" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices..</p>
		  <a href="#" title="">lorum ipsum</a>
	
	</div>
		<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="img/.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices..</p>
		  <p><a href="#" title="">lorum ipsum</a></p>
	</div>
	<div class="box">
	      <h2>lorum ipsum</h2>
		  <img src="img/.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices..</p>
		  <a href="#" title="">lorum ipsum</a>
	</div>
     <div class="box rght">
	      <h2>lorum ipsum</h2>
		  <img src="img/.jpg" width="250" height="150" alt="" title=""/>
		  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices..</p>
		  <a href="#" title="">lorum ipsum</a>	
	</div>
</div> 
   </div>  
   <div class="equaliser"></div>
   
       <div id="footer">	        
    
               <h5>lorum ipsum</h5>
			<div class="share-buttons noprint">
    <a href="https://www.facebook.com/l/" title="" target="_blank"><img src="/icon/facebook.png" alt="/></a>
    <a href="https://twitter.com/" target="_blank" title="Tweeten"><img src="/icon/twitter.png" alt="" /></a>
    <a href="https://eg.linkedin.com/in/" title="Share at LinkedIn"><img src=/icon/linkedin.png" alt="LinkedIn icon to " /></a>
</div>
			<div id="footermap">
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3452.4006835509076!2d31.32468341557754!3d30.082708981868358!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14583e2347d48bb3%3A0xa64fe35dcef0b7c5!2s107+El-Tawfik%2C+Al+Golf%2C+Nasr+City%2C+Cairo+Governorate%2C+Egypte!5e0!3m2!1snl!2snl!4v1506108267873" width="760" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
			</div>
			<div class="equaliser"></div> 
   <div class="footerrow">
	<div class="footerbox">
	      <h2>ABOUT</h2>
		  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis nisl quis mollis ultrices..
	</div>

	<div class="footerbox">
	      <h2>PROGRAMS</h2>
		<ul class="listfooter">
	  <li><a href="#" title="">1</a></li>
	<li><#" title="">2</a></li>
	<li><#" title="">3</a></li>
	<li><#" title="">4</a></li>
	<li><#" title="">5</a></li>
	<li><#" title="">6</a></li>
	</ul>  
	</div>
     <div class="footerbox bxrgt">
	      <h2>CONTACT US</h2>
	<ul class="listfooter">
	  <li>lorum ipsum</li>
	<li>lorum ipsum</li>
	<li>lorum ipsum</li>
	<li>lorum ipsum</li>
	<li>lorum ipsum</li>
	</ul>	
	</div>
			</div>
 <div id="copyright">&copy; 2017 lorum ipsum</div>
 

     </div>
</div>
</div>
<!--Start of Tawk.to Script-->

<!--End of Tawk.to Script-->
</body>
</html>
...

The used CSS:


img{
border-width:0px;
}

html, body {
 margin:0;
 padding:0;
 background:#FBFFEC;
 font:11px Verdana, Arial, Helvetica, sans-serif;
 line-height:17px;
}
body {
 padding:4px;
}
#wrapper {
 width:770px;
 margin:0 auto;
 text-align: justify;
position:relative;
}
* html #content {width:772px;w\idth:770px;}

#top {height:30px;}

#animation {height:300px;background:url/images/.jpg);}

#content {width:100%;margin: 10px 0;}
#footertest {width:100%;margin: 10px 0;}
#contentleft {
              display:inline;
              float:left;
              width:420px;
              margin: 0;
}

#contentright {
display:inline;
              float:right;
              width:330px;
              margin: 0 0 0 20px;
			  }

#footer {margin:0 auto; background: #E0D6A4}

h1 {text-align:right;margin-bottom:15px;font-weight:bold;font-size: 18px;font-family: Verdana, Arial, Helvetica,sans-serif;color:#333;}

h2 {margin-left: 0;font-weight:-bold; font-size:14px; font-family: Verdana, Arial, Helvetica,sans-serif;color:#333;text-align:left;}
h2#topheader {margin-left: 5px;font:bold 11px Verdana, Arial, Helvetica,sans-serif;color:#333;text-align:left;}
.equaliser {
            clear:both;
            line-height:0;
            margin-top: 20px;
           }
		   
.box { float:left;border: 0; width:250px; margin-right:8px; background:#FBFFEC;}
.productrow{float:left; background:#FBFFEC;}
.productrow div.rght{margin:0; width:250px; border:none;}	

blockquote p { margin-bottom: 10px; font-style: italic; }
blockquote cite { font-style: normal; display: block; text-align: right; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; }

/*
 |	Setting the width for the blockquotes is required
 |	to accurately adjust it's contianer
*/

blockquote {
	font-family: Georgia, Times, serif;
	width: 300px; /* required */
	margin: 0 auto;
	}
	
.spamvrij {
           direction: rtl;
           unicode-bidi: bidi-override;
      }
	
/*
 |	The #quote_wrap div is created
 |	by Quovolver to wrap the quotes
*/

#quote_wrap {
	background: #fbffec url(http:/icon/quote-mark.png) no-repeat 20px 20px;
	margin: 0 0 40px 0; padding: 20px; border: 1px solid #edffaf;
	}
#topnavigation {
	 overflow:hidden;
	  height: 20px;
  margin:0 -1px;/* no width needed*/
 border-top:1px solid #e0d6a4;
 border-bottom:1px solid #e0d6a4;
 font-size:100%;
 padding-top:5px;
 text-align:center;
 text-transform: uppercase;
}
a.topmenu {
    color: #404040;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;
}
 
a.topmenu:active, a.topmenu:hover {
    color: #333;
}

#contentleft {
              display:inline;
              float:left;
              width:420px;
              margin: 0;
}
	
	
#footerlist {background: #e0d6a4;}	
ul.listfooter {
	list-style-type: none;
    margin: 0;
    padding: 0;
	background:#E0D6A4;
}
	
/*
 |	The footer div is as
 |  test
*/	
	

h5{ 
    position:relative;
    top:25px;
    text-align : center;
    font-size : 45px;
	font-weight:900;
	spacing: 50px 0px;
	color:#FBFFEC;
}
iframe {
    width:100%;
    position:relative;
    height:150px;
	background:#E0D6A4;
}

#footermap {width: 100%;
            heigth: 150px;
			}
			
.footerbox { float:left;border: 0; width:250px; margin-right:8px; background:#E0D6A4}
.footerrow{float:left; background:#E0D6A4}
.footerrow div.bxrgt{margin:0; width:250px; border:none; background:#E0D6A4}	
.share-buttons
{
  text-align: center;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  }

Thanks for teaching me

Gandalf · October 1, 2017, 12:23pm

The first thing with responsive web design is NOT to set the width of you pages/site to 770px or any other fixed width.

One other thing top navigation and productgroup are not valid HTML constructs so far as I am aware.

You can use nav for navigation but the others would probably be best as divs.

SamA74 · October 1, 2017, 12:28pm

To start with html5 does not mean you can make up your own html elements. I’m not aware of any <top>,<navigation>, <introduction> or <productgroup> elements. Though you can have <header> and <nav> in place of the first two.
Always Validate your html.

The simplest thing is to use max-width: 770px that will allow a block element to retain its default value of auto (full width of its parent) but not exceed the max-width value.
If you still want a gutter on smaller screens it can be combined with a % width, such as: width: 95%

Another thing you will need for a responsive page is the viewport meta tag, like this in the head:-

<meta name=viewport content="width=device-width, initial-scale=1">

carthago1 · October 1, 2017, 3:58pm

Thanks, I added this to the code.

When I want to use the % instead of the px, I have to change my

#wrapper {
               **width:770px**;
               margin: 0 auto;
               text-align: justify;
               position:relative;
}

into:

#wrapper {
               **width:100%**;
               margin: 0 auto;
               text-align: justify;
               position:relative;
}

How to deal with the value ‘height’ ?

SamA74 · October 1, 2017, 4:06pm

What I suggested would be more like:-

.wrapper {
               max-width:770px;
               margin: 0 auto;
               text-align: justify;
               position:relative;
}

There is little point in setting width:100% because

That default does not need to be set and will work better than 100% as when you account for padding and borders the total object width can exceed the parent width.

Don’t.
Let height take care of itself, the content will define an element’s height, so it’s best not to set a height in most cases.

carthago1 · October 1, 2017, 4:18pm

thnx gandalf458,

Reading again some about this subject, the best I can do is to put ‘top’, ‘productgroup’ and so on in their own <section>.

Just <section>content here</section>, or, can I see a section in combination with a id or class?

Other question is (and it is about SEO) that in HTML5 you can use the h1 tag in each section as well as I understood.([a look into proper HTML5]http://bit.ly/1GP6eGg)

carthago1 · October 1, 2017, 4:25pm

In the above CSS I put a width as well. Did you mean, I change width: into max-width;? id. width:300px will become max-width:300px?

Also for the html5 semantic:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
   <meta name=viewport content="width=device-width, initial-scale=1">
     <titlele>lorem ipsum</title>
     <link rel="" href="">
  </head>
  <body>
<section>
<!-- here start top bar with logo, header and image -->
</section>
<nav>
<!-- here include with navigation horizontal -->
</nav>
<section>
<!-- the part with the left and right div as well as quoteblock -->
</section>
<section>
<!-- the part with the 6 images and different products -->
</section>
<footer>
<!-- footer area with social media, map and links -->
</footer>
  </body>
</html>

Gandalf · October 1, 2017, 5:24pm

I wouldn’t use section for the header, but use the header tag which is what it’s meant for (rather like footer). And you don’t have to put everything in a section. You can still use div, and there is aside too.

You can apply ids and classes to any of these.

I understand you can use multiple h1 tags although it is not something I used myself.

PaulOB · October 2, 2017, 1:25pm

Although it’s allowed no UA will build a proper document outline from it so it in fact dilutes the importance of heading rank as a flat outline is created.

I would still stick to only 1 h1 per page. Any more and you will likely dilute the seo benefits rather than increase.

Even the specs have this to say:

4.3.9.1. Creating an outline

Warning: There are currently no known native implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers and browser extensions. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors should use heading rank (h1-h6) to convey document structure.

system · January 1, 2018, 8:25pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.