4
\$\begingroup\$

I have started learning HTML. Here is one of the very basic HTML pages I have written. I would appreciate advice about how to write code especially regarding indentation.

<!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>
\$\endgroup\$

3 Answers 3

Reset to default
5
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ Nice idea. Using some spaces would make it easy to read and understand the code. Isn't? \$\endgroup\$
    – user1211
    Commented Jun 29, 2011 at 5:48
  • 1
    \$\begingroup\$ @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. \$\endgroup\$
    – James Khoury
    Commented Jun 29, 2011 at 6:52
5
\$\begingroup\$

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.

\$\endgroup\$
0
0
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\begingroup\$ Don't forget the DOCTYPE! \$\endgroup\$
    – RoToRa
    Commented Jun 29, 2011 at 15:22
  • 4
    \$\begingroup\$ And one shouldn't use unnecessary classes. Style the elements first (h1, etc.) and use classes for exceptions not the regular styles. \$\endgroup\$
    – RoToRa
    Commented Jun 29, 2011 at 15:38
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – Eric Anderson
    Commented Jun 29, 2011 at 21:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.