Thinking Semantically (coding semantic HTML & CSS)

Coding Your HTML

When starting to code a new web page, before cutting up images think of the basic content of the page apart from the visual design. This means the basic text content as well as any images or other elements which are actual content instead of just decoration. Start coding by adding all this content to your HTML page and then marking it up with simple basic semantic HTML tags such h1 through h6 tags for headers, p tags for most other ordinary text, ul for unordered lists, ol for ordered lists, etc. After you are done with this step your content should look organized and readable when viewed in a web browser even before you’ve added any CSS styles.

The next step is to look at the content in terms of related chunks of information thinking partly of how it will work with the structure of the visual design. Use div tags with semantic classnames or IDs to group and divide content into different sections such as “header”, “main-nav”, “sub-nav”, “main-content”, “footer”, etc.

Add any extra div or span tags needed to recreate fine details of the visual design such rounded corners. Use as few of these as necessary and try to use them in a semantic manner if possible. Use existing semantic tags for styling without adding extra markup simply for the design if you can. Also think in terms of creating standard reusable elements that can be used throughout the site rather than creating elements that will only be used once. Don’t give everything a classname. Style elements instead by selecting them by their semantic tags or by the div they reside within whenever possible.

Coding Your CSS

Code your CSS together with each step of coding your HTML. During the first step add background colors and add basic text styles such as fonts. For the second step you can code the rough layout of your different sections as well as adding more background colors and/or images. Finally, add in all the remaining fine details to recreate the finished design. (This assumes you are working from a design mockup created before you started writing any code.)

Semantic Coding Summarized

  1. Add content to HTML and mark up with basic semantic tags.
  2. Use div tags with semantic class names / IDs to group together chunks of related content.
  3. Add any extra div tags or spans needed for the visual design details (as few as possible).
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s