HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

HTML5 Elements - First markup

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
html5firstelementsmarkup

Problem

This is my first website. I would like to make sure that:

  • I am using HTML5 sectioning elements correctly.



  • I didn't forgot anything important for HTML5 compatibility like html5shiv, for example.



Any other advice?


    
    DEdesigns
        
         

  
    
       DEdesigns
    
        
            Home
            About
            Services
            Contact
        
    
 

   
        About Me
    
   
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
   
   
        
            
        
   
 

    
        My Work
    
    
        
            
        
        
            
                rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
            
        
        
         
            
                rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
            
        
         
            
        
        
         
            
        
            
                rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
            
        
        
    
   

  
    
        Services
    
    
        
            one
            two
            three
        
    
    

   
    
        Contact Me
    
    some contact me stuff goes here
    

  
    This is my fotter
      
 

   

Solution

Your formatting is a little off, indentation is very important when reading any code.

I fixed the indentation and I also added some new lines in some of your paragraph tags. they are formatted by the browser pretty nicely so you can added new lines in there to make them more readable with out side scrolling and they will still show up the way you intended.

I also took out all your empty lines, because it is formatted nicely and is easily readable, blank lines make it look messy to me.


    
        
        DEdesigns
            
             
    
    
        
            
                DEdesigns
                
                
                    Home
                    About
                    Services
                    Contact
                
                
             
            
            
                About Me
            
            
                
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    It has survived not only five centuries, but also the leap into electronic typesetting, 
                    remaining essentially unchanged
                
            
            
                
                    
                
            
             
            
                
                    My Work
                
                
                    
                        
                    
                    
                        
                            
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            
                        
                    
                    
                    
                        
                            
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            
                        
                    
                    
                        
                    
                    
                    
                        
                    
                        
                            
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            
                        
                    
                    
                
             
            
                
                    Services
                
                
                    
                        one
                        two
                        three
                    
                
             
            
                
                    Contact Me
                
                some contact me stuff goes here
             
            
                This is my footer
                
         
    

Code Snippets

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DEdesigns</title>
        <script scr="html5shiv.js"></script>    <!-- allows html 5 styling -->
        <link rel="stylesheet" href="style.css">     
    </head>
    <body>
        <div id="container">
            <header>
                <h1>DEdesigns</h1>
                <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                </nav>
            </header> <!-- end header -->
            <article id="about-me">
            <header>
                <h2>About Me</h2>
            </header>
            <section>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    It has survived not only five centuries, but also the leap into electronic typesetting, 
                    remaining essentially unchanged
                </p>
            </section>
            <aside>
                <figure>
                    <img src="#" alt="#" width="#" height="#">
                </figure>
            </aside>
            </article> <!-- end #about-me -->
            <div id="gallery">
                <header>
                    <h2>My Work</h2>
                </header>
                <div id="gallery-conatiner">
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                    <section>
                        <aside>
                            <p>
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            </p>
                        </aside>
                    </section>
                    <!--  ends first row -->
                    <section>
                        <aside>
                            <p>
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            </p>
                        </aside>
                    </section>
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                    <!-- ends second row -->
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
  

Context

StackExchange Code Review Q#71667, answer score: 5

Revisions (0)

No revisions yet.