Pinterest Stumbleupon Whatsapp
Advertisement

Creating a web page with HTML and CSS is pretty straightforward How to Make a Website: For Beginners How to Make a Website: For Beginners Today I'll be guiding you through the process of making a complete website from scratch. Don't worry if this sounds difficult. I'll guide you through it every step of the way. Read More . But it’s easy to make mistakes, and there are quite a few things you might not think about. Most of the time, these small mistakes won’t make much of a difference.

But in the long run, they can make your life more difficult. These nine mistakes are easy to make, but if you head them off earlier rather than later, your page will look better, be easier to maintain, and function how you want it to.

1. Inline Styling

One of the great things about HTML and CSS is that you can format any line of text — any single word, really — whenever you want. But that doesn’t mean you should take advantage of this capability.

Here’s an example of an inline style that you might use to make a paragraph larger than the surrounding paragraphs and highlight it in a different color:

<p>Your text here.</p>

This gives the paragraph a CSS style Learn HTML and CSS with These Step by Step Tutorials Learn HTML and CSS with These Step by Step Tutorials Curious about HTML, CSS, and JavaScript? If you think that you have a knack for learning how to create websites from scratch -- here are a few great step-by-step tutorials worth trying. Read More that ends with the conclusion of the paragraph. Seems pretty efficient, right?

There’s one big problem with it: if you want to change a lot of things throughout your website, you’re going to need to go and find every instance of inline styling and change it. If you have 100 different paragraphs that are 120% text size and blue, you’re going to have to find all 100 and change them to whatever you’ve decided is a better format.

Advertisement

Instead, use a CSS stylesheet. Here’s the style you’d use for the above paragraph:

p.important {
  size: 120%;
  color:blue;
}

Now, instead of using the inline style, you can simply use this line:

<p class="important">Your text here.</p>

And your paragraph will be big and blue. And when you make a change to the “important” class in your CSS, they’ll all change.

2. Tables for Layout

People used to use tables for formatting page layout pretty regularly. By using a table, you can organize the elements on your page in columns and rows, as well as apply different alignments and styles. Even single-celled tables would be used to get the content aligned correctly. But this use of tables is generally frowned upon.

Much like inline styles, using CSS instead of HTML tables for layout is easier to maintain. Again, if you want to make changes across dozens or hundreds of pages, it’s much easier to edit your stylesheet than to go through each page and tweak the tables.

In addition to easier maintenance, reading CSS layouts tends to be quite a bit easier than reading HTML tables. Especially if you end up nesting many levels of tables within each other. It might not be super easy to go back and forth between your HTML document and your stylesheet to see exactly what’s happening, but the content of your page will be clearer and easier to edit.

Using tables here and there to split pages into columns isn’t a mortal sin. Sometimes it’s easier and faster than messing around with CSS. But if you’re making gigantic, multi-tiered tables, you should consider reformatting with CSS.

3. Deprecated HTML

Like any language, HTML changes regularly. Officially recognized tags change, and some become deprecated. Even if those tags do still work, it’s best to avoid them.

For example, if you’re used to using the <b> tag for bold and the <i> tag for italics, you’re behind the times. <strong> and <em> (for “emphasis”) are now the standard tags. <center>, <align>, <color>, <size>, and others are also deprecated.

Most deprecated tags were replaced with CSS, so you’ll need to use styles (preferably not inline ones) to get the same effect. If you’re not sure how to replace a deprecated tag or if a specific tag is still in use, check the official HTML documentation or just run a quick search.

4. Inline JavaScript

Some web pages use JavaScript to add additional functionality JavaScript and Web Development: Using the Document Object Model JavaScript and Web Development: Using the Document Object Model This article will introduce you to the document skeleton that JavaScript works with. Having a working knowledge of this abstract document object model, you can write JavaScript that works on any web page. Read More . It can make web pages interactive, validate text as it’s being entered, add animations, provide responses to user actions, and so on. In short, it can make a page more useful by providing added behavior.

Much like CSS, you can add inline JavaScript to your HTML. Also like CSS, this is generally discouraged. In addition to being potentially harder to maintain, there are a couple other reasons that warrant this admonition.

Inline JavaScript can use greater amounts of bandwidth than a script linked from a different file. A process called minification compresses HTML and CSS before sending it to a user, requiring less bandwidth over broadband or mobile connections. Inline JavaScript, however, can’t be minified. It also won’t be cached, whereas a separate JavaScript file can be cached.

All of these things make inline JavaScript more bandwidth-intensive.

It’s also harder to debug, as you can use a JavaScript validator for a JavaScript file… but it won’t work on inline script. And, again, it makes for cleaner and more easily maintained HTML.

5. Multiple H1 Tags

Heading tags are great. They make pages easier to skim, they can give you an SEO boost, and they can be used to emphasize certain points.

But there are six levels of heading tags for a reason. There should really only be one H1 tag on your page. And that’s often the title of the page (especially on blogs and similar sites). You might think that putting a bunch of keywords in H1 tags will make Google more likely to pick them up and rank your site higher in the results.

html heading tags

But what it really does is make your page more confusing and harder to read. Which will negate any SEO benefits you might see anyway.

Use H2, H3, and the rest of the heading tags to better outline your page. The level of the heading should give your reader an idea of how important the following section is. If you’ve misled them, they’ll know it, and they won’t be happy.

6. Skip Image Alts

Every image can be given an “alt” attribute that displays a specific line of text if the image can’t be displayed. This might not seem like a big deal, especially with modern browsers (both desktop and mobile) that can display just about anything.

But not adding alt attributes is a big mistake, especially in the age of constant mobile browsing. Mobile connections aren’t always great, and if a browser can’t load an image, your reader is left with no idea what they should be seeing there. An alt attribute can fix that.

image alt

And if someone is using a screen reader VoiceOver Makes Apple Devices More Accessible Than Ever VoiceOver Makes Apple Devices More Accessible Than Ever President of the American Foundation of the Blind reckons that "Apple has done more for accessibility than any other company to date," — and VoiceOver played a big part in that. Read More or other accessibility feature, that alt attribute might be all they get out of the image.

Of course, there are potential SEO benefits as well. Search engines may index short, descriptive alt attributes. But the biggest benefit here is helping out your readers.

7. Not Closing Tags

There are some HTML tags that you can get away with not closing, like <p> and <li>. Browsers know that when you start another paragraph or list item, the previous one is over. But that doesn’t mean you should skip out on the closing tags.

First and foremost, despite advances in browser tech, there’s definitely a possibility that the browser will display your content improperly if you haven’t closed your tags. And applying styles could produce some unpredictable results, as Stack Exchange user robertc demonstrates.

What it comes down to is that browsers are expecting closing tags. They don’t absolutely need them… but they’ll definitely benefit from having the correct HTML when they’re trying to display your page.

Fortunately, it doesn’t take much to close your tags, especially if you’re using a good HTML editor.

8. Not Including a DOCTYPE

At the beginning of HTML documents, you’ll usually see a DOCTYPE declaration, like this one:

<!DOCTYPE html>

It’s something that doesn’t get talked about often, but it’s an important element in your page. The DOCTYPE declaration tells a browser what type of HTML you’re using. This allows it to render the HTML correctly.

If you skip the DOCTYPE declaration, the page will render in “quirks mode.” This is the modern browser’s defense against antiquated web pages. And it changes how your page displays. A quick look at Firefox’s quirks mode shows that case sensitivity changes, font properties don’t inherit into tables, font sizes are calculated differently, and images without alt attributes sometimes display incorrectly.

Most of these things are relatively minor. But if you want your page to display correctly, you should ensure that a browser has its full standards mode enabled.

And to do that, you need a DOCTYPE. (If you’re not sure what to use, just use <!DOCTYPE html>.)

9. Neglect Schema Markup

Schema markup helps search engines get a better idea of what’s on your page. More specifically, that markup tells search engines what you’re writing about in each section.

For example, in an article, you can use schema markup to tell a search engine the title, author, date, publisher, and other useful information about an article.

There are schemas for movies, books, organizations, people, restaurants, products, places, actions, different types of data, music, sculpture, reservations, services, ATMs, breweries, and just about everything else you can think of. It’s pretty amazing.

You can definitely get away without using schema markup. Your page will display correctly without it. Your readers won’t even know it’s there. But there’s a lot to be gained from including this markup. Search engines will be able to provide much more detailed, useful information about your page, including rich snippets.

And with Google’s schema markup tool, the process is actually pretty easy.

Get Used to HTML Best Practices

Making these best practices a habit can take a while. And sometimes it can feel like you’re taking a lot of extra time for something that doesn’t get you very much. But making sure that your HTML and CSS Learn HTML and CSS with These Step by Step Tutorials Learn HTML and CSS with These Step by Step Tutorials Curious about HTML, CSS, and JavaScript? If you think that you have a knack for learning how to create websites from scratch -- here are a few great step-by-step tutorials worth trying. Read More are well laid out, easy to work with, and maintainable will save you a lot of time in the long run.

What other good habits have you found to be useful when creating web pages? Do you disagree with any of the practices above? Share your thoughts in the comments below!

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Doc
    May 25, 2017 at 12:36 pm

    Don't forget something quite important - font fallbacks. For example, if your user's browser can't load a WOFF font you've included, the browser should have an alternative (at the very least, "serif" or "sans-serif", preferably more options such as "Tahoma," "Times," or several common fonts) to fall back on.

    • Dann Albright
      May 29, 2017 at 9:06 pm

      That's a great point! Definitely something to keep in mind if you're using other fonts.

  2. AlejandroVega
    May 25, 2017 at 4:29 am

    Point 5. Multiple H1 Tags are wrong

    Whit HTML5 many things has changed, today in 2017 H1 represents the heading of the section not the heading of the page, so we can use more than one H1, please check the W3C recommendation.

    • Dann Albright
      May 29, 2017 at 9:05 pm

      Interesting; I hadn't seen that before. You're right about HTML5 allowing multiple H1 tags, and evidently Google has stated that sites won't be penalized for multiple H1s. I still think it's a good idea to only use a single one, though, as it indicates the hierarchy of information on your page.