Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I have started learning HTML. Here is one of the very basic HTML code I have written. I would like to get good advice about how to write code and regarding indentation. I would be very thankful to you for it. Thank you in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title> Checking Different Headings | Isnt it fun?</title>
</head>

<body>
<h1>  This is big</h1>
<h2>  This is also good </h2>
<h3>  This is also good </h3>
<h4>  This is also good  </h4>
<h5>  This is also good </h5>
<h6>  This is small </h6>
</body>
</html>
share|improve this question

3 Answers 3

up vote 5 down vote accepted

I start my intention in head and body.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
    <title> Checking Different Headings | Isnt it fun?</title>
</head>

<body>
    <h1>This is big</h1>
    <h2>This is also good</h2>
    <h3>This is also good</h3>
    <h4>This is also good </h4>
    <h5>This is also good</h5>
    <h6>This is small</h6>
</body>
</html>

I also keep my tag tight–no spaces between text and tag.

share|improve this answer
    
Nice idea. Using some spaces would make it easy to read and understand the code. Isn't? –  Fahad Uddin Jun 29 '11 at 5:48
1  
@fahad Inside your tags spaces don't really add any readability. Also it can have unusual side effects depending on how you've styled your page. It's cleaner to remove them where it isn't needed just like @natedavisolds. Around your tags is another thing all together and IMHO it is up to you how you indent your html. –  James Khoury Jun 29 '11 at 6:52

You should consider following points:

  • Consider if you really need/want to use XHTML. XHTML has many disadvantages and hardly any advantages. See, for example: http://www.webdevout.net/articles/beware-of-xhtml

    Instead use either HTML 4.01, or possibly HTML 5 (it's no problem to "upgrade" from 4.01 to 5 later).

  • Don't use the Transitional DOCTYPE. It's only for legacy webpages, that don't use CSS. All additional features of Transitional are covered by CSS.

  • Your filler texts "This is big" and "This is small" suggest you my be misunderstanding the usage of h1 to h6 (and possibly HTML all together). h1 to h6 are not for changing font sizes, they are for marking-up headlines of different importance and "depth" in the document structure. HTML only determines how a text is structured, not how it looks like. To change the look of the text, use CSS.

share|improve this answer
    
Thankyou so very much. I never knew what XHTML was. –  Fahad Uddin Jun 29 '11 at 22:30
    
+1 Thank you for emphasizing header semantics! –  Daniel Standage Apr 11 '12 at 16:22

It looks like you have the right idea starting out. The previous answer gives good advice about indentation.

However, it looks like you're using header tags to specify the size of your font. It is now generally considered good practice to use CSS to control the style of your HTML.

Simple example:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type='text/css'>
        .pageTitle {
            font-size: x-large;
            font-weight: bolder;
            text-decoration: underline;
        }        
        .sectionTitle {
            font-size: large;                        
        }                
        .regular 
        {
            font-size: medium;
        }    
    </style>
</head>
<body>
    <h1 class='pageTitle'>Page Title</h1>    
    <h2 class='sectionTitle'>Section Title</h2>    
    <p class='regular'>Lorem Ipsum Dolar Sit Amet!</p>
</body>
</html>

See http://www.csszengarden.com/ for good CSS examples.

share|improve this answer
    
Don't forget the DOCTYPE! –  RoToRa Jun 29 '11 at 15:22
4  
And one shouldn't use unnecessary classes. Style the elements first (h1, etc.) and use classes for exceptions not the regular styles. –  RoToRa Jun 29 '11 at 15:38
1  
Just a minor note to add. Inline CSS is ok, but you don't want to get carried away with it. When designing a page try to make things as modularized as possible; it makes for easy updating in the long run. So use external .css files to store all of your CSS goodness. –  Eric Anderson Jun 29 '11 at 21:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.