Current Web Design Articles
Web Design, HTML, and XML Articles from the About.com Guide to Web Design and HTML
Related Resources Current Articles
See the most recent articles right when they are posted: Subscribe to this page
What is Microdata?
Microdata is a specification that defines how to add semantic metadata to your HTML documents so that the contents of the page are machine-readable as well as human-readable.
The Difference Between the HTML5 DATA Element and the CODE Element
HTML5 introduces a new element: DATA. This element appears, at first glance, to do nearly the same thing as the CODE element from HTML 4, but the DATA element also provides a machine-readable value.
The HTML DATA Element
The data tag is used to define content that is data with a computer-readable format in HTML5. It is not found in HTML 4.
Copyright Meta Tag
Learn more about the copyright meta tag. When should you use the copyright meta tag. How the copyright meta tag is used.
While there are many scientific ways to divide colors into groups, one simple way is to evaluate how warm or cool a color is. These color families can give you nice color palettes without having to learn the science of color.
How to Test Mobile Web Pages and Applications
Many of the things you should test when testing your mobile designs are the same as what you test for your standard designs. But there are some specific things you should be looking for when testing mobile websites.
Don’t Limit the Content on Your Mobile Sites, But Limit the Content
Redesigning your site for mobile users is a good idea, because it can help users who need specific information quickly to find it more easily. But if you're not careful, your mobile experience can drive your customers away rather than keep them coming back for more.
What is an IDE and Do You Need an IDE to Build Web Applications?
Many programmers who move from desktop software to web applications often use an IDE or integrated development environment to create their web applications. But is an IDE required to do web development? Find out what I think.
Book Review: HTML5 and CSS3 for the Real World
This is a book review of the SitePoint book HTML5 and CSS3 for the Real World. Find out what I think of this book that can help you learn HTML5.
Changing the Border Space in Tables
The border-spacing property of CSS2 is very rarely used, which is a shame, as this property can help you create much more effective HTML tables. This article shows you how to change your table borders using the border-spacing property.
The HTML5 DETAILS and SUMMARY Elements
These elements are not widely supported by browsers yet, but they add some great functionality. This article explains what they are for, how you can use them, and even fallback options so that you can use them right now.
The SUMMARY Element
A description of the HTML5 SUMMARY element including usage and browser support.
Ethics and Reviews
I feel that it is very important to be honest and up-front in my reviews of HTML editors (and books, and apps, and anything else I review). But some editor companies don’t want to see any negative reviews and are not shy about telling me so.
Learn how the HTML5 outliner algorithm works and how you can ensure that your HTML5 documents are well organized and have a clear outline.
Understanding the HTML5 MARK Element
More than just an HTML element for those designers named Mark, the HTML5 MARK element helps you indicate content that has some special meaning beyond what is defined in the text itself. Learn more about the HTML5 MARK element.
BlueGriffon HTML Editor Profile
This is a free WYSIWYG web editor based on the Nvu and Kompozer code base.
Sams Teach Yourself HTML and CSS in 24 Hours
Beginners will like this book that takes you through learning HTML and CSS in just 24 hour-long chapters. There are exercises and quizes to help you retain what you learned.
Pricing Web Designs in a Recession
In a down economy it can be tempting to simply drop your rates in hopes that that will attract more clients to your business and keep the existing ones from disappearing. But there are lots of ways to keep your prices high and not lose business in a recession. Learn how to price web design work even in a down economy.
10/13/2011 - Book Review: Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day by Lemay and Colburn
A comprehensive book on web publishing. Read my review to find out what I liked and what I thought was missing.
10/10/2011 - Review of Flux version 3
Flux is an interesting WYSIWYG web editor for Macintosh. Find out more about what I think of this editor. Read my full review of version 3.
10/09/2011 - Multiple Backgrounds in CSS3
CSS3 makes it possible to layer background images on top of one another on the same element.
10/07/2011 - Delivering Sites to Customers
Once you’ve built a site for your client, how do you get the files to them so that the site can go live? There are several different options you can choose. This article explains some of the most common ways designers deliver their designs to clients.
10/05/2011 - Flux - Web Editor Profile
Flux is a text editor and WYSIWYG editor for Macintosh . It is best suited to Professional Web Designers or Small Business Owners.
10/03/2011 - Adobe Muse - Web Editor Profile
Adobe Muse is a WYSIWYG editor for Windows Macintosh . It is best suited to Small Business Owners.
10/01/2011 - Adobe Edge - Web Editor Profile
Adobe Edge is a WYSIWYG editor for Windows Macintosh. It is best suited to Web Designers.
09/28/2011 - Hype HTML5 Web Editor Review
Hype is a new web page editor that creates HTML5 pages with animation. This is a review of the Hype editor and how well it is suited to professional web designers and web developers.
09/28/2011 - Hype - Web Editor Profile
Hype is a WYSIWYG editor for Macintosh. It is best suited to Small Business Owners.
09/23/2011 - Editor for Chrome - Web Editor Profile
Editor for Chrome is a text editor for Windows, Macintosh, and Linux. It is best suited to Small Business Owners or Professional Web Designers.
How to Set Justified Text with CSS
Justified text is a block of text that has no rag on the right or left sides. The block of text is written with the words lining up evenly on both sides, with the extra spacing added to between the words in the text on the line. This article explains how to justify your text with CSS.
Image Over Compression
Learn about what can happen if your images are over compressed. They may be small, but they don’t look good.
CSS3 brings in a new color model called HSL or hue-saturation-lightness. This model is often easier for artists to understand because it relies on the qualities of the colors themselves to determine their codes rather than arbitrary numbers developed for computers. Learn how to use HSL colors in your web designs.
CSS3 Linear Gradients
Gradients are a color technique where one color gradually fades into another color. Before CSS3 if you wanted a gradient, you needed to create a tileable graphic to use as the background for your element. But now you can use a CSS3 style property (and appropriate browser extension properties) to get gradients that work in Chrome, Firefox, Internet Explorer, Opera, and Safari. This article will show you how.
Multi-column Layout with CSS3
You will be surprised how easy multi-column layouts are with CSS3. This article explains how to use CSS3 to create multiple columns, adjust the space between them, and even add rule lines separating the columns.
HTML5 Canvas by Steve Fulton and Jeff Fulton
This is a review of the book HTML5 Canvas by Steve Fulton and Jeff Fulton.
CSS3 for Web Designers by Dan Cederholm
There are many books on CSS3, but this small book by Dan Cederholm is both fun to read and has good coverage of relevant CSS3 features. Read my full review to learn what I thought of CSS3 for Web Designers.
How to Add Sound to an HTML5 Web Page
Adding sound with HTML5 is very easy. You just save your sound file in a few formats and then use the AUDIO element to play it. This article will teach you how to do it.
What Can You Do with HTML?
HTML is the language of the web, but many people are not sure they should learn it. Find out why you want to learn HTML and what it’s good for.
New HTML5 Attributes of the IFRAME Element
There are three new attributes of the IFRAME element in HTML5: srcdoc, sandbox, and seamless. Learn the purpose of these attributes and how to use them in your HTML.
Iframes and CSS
Learn how to use CSS with iframes. You can style both the iframe itself or the contents within it. This article explains how to use CSS to style iframes.
Learn HTML Tables
HTML tables are an important part of the HTML specification. They allow you to display tabular data on web pages in a very clear and uniform way. This document will teach you how to build an HTML table from scratch, standard uses for tables, the table tags and attributes, and ways in which HTML tables are misused. If you want to learn HTML tables, this is a great place to start.
HTML5 and Tables for Layout
HTML5 changes the specification to allow tables be used for layout and presentation. Learn how you can define your table as a layout table or a data table.
Testing Web Applications in Internet Explorer
Internet Explorer 6sp2 introduced a security feature to prevent malicious web developers from gaining access to local hard drives, but in the process made it more difficult to test web pages locally. Learn how to find out if the blocked content messages you are getting are caused by the IE security feature and how you can resolve it.
WOFF - Web Open Font Format
The Web Open Font Format is a file format for fonts that can be embedded in web pages. This article explains how to use the WOFF file format with the @font-face property.
When to Use the HTML5 SECTION Element
The new HTML5 SECTION element has some people confused as to when to use it. Some people use it instead of the DIV element, others use it as a container, while still others avoid using it at all. Learn when it’s appropriate to use the HTML5 SECTION element and when you should use other elements instead.
CSS Transparency in Nearly All Browsers
CSS can help you add transparency to your web pages with the opacity property. But while opacity support has been in browsers since IE 5 and other old browsers, the trick is getting it to work. Learn the browser extensions you need to add transparency to nearly every browser.
Meta Charset Tag in HTML5
HTML5 made a bunch of changes to make things easier for web designers building web pages, and the meta charset tag is no different. This is a case where the browsers were already supporting it, so HTML5 made it valid in the specification. Learn more about character encoding and the meta charset tag in HTML5.
Rel=author Authorship Markup in HTML5
The rel attribute has been around for a while, but with HTML5 Google and other groups are using the rel=author attribute to more effectively identify the authors of articles on the internet. Learn how to use rel=author on links to your author pages to identify the articles you write to search engines.
Links are a critical part of any web page, and there are some significant changes to links in HTML5. Learn about how HTML5 changes the A, AREA, and LINK elements.
WebSockets API is a technology that lets web servers and user agents connect in bi-directional, full-duplex communication, unlike standard HTTP connectivity which can only connect one direction at a time.
How to Use HTML5 Right Now
There are many parts of HTML5 that can be used right now without any adverse effects to your website, your clients, or your users. Find out what parts of HTML5 you can use right now.
Ignore 2014 - Start Building HTML5 Now
HTML5 is the latest version of HTML, and the W3C estimates that it will be a recommended standard around 2014. This has caused many people to feel that they can and should just ignore it until then. But smart designers will start using it now, so that when there is full browser support they aren’t left behind.
Data URLs Can Help Speed Up Your Site
Learn how to use data URLs to embed images directly in your HTML. Using data URLs can help speed up your web pages because there are fewer HTTP requests. You also don’t have to upload any images.
Uses for Definition Lists
Definition lists are a great tool in HTML that are often overlooked. Learn several ways you can use definition lists to create more effective web pages.
How to Indent Paragraphs with CSS
Indenting paragraphs isn’t difficult with CSS. Plus with the adjacent sibling selector, you can indent paragraphs more specifically.
Should we forget columns?
Many websites use columns for the layout, but should we avoid them when converting a site for mobile?
Collect Speech Input with HTML5 on Google Chrome
HTML5 speech input lets you set up speech-enabled forms. Learn how to use the speech input feature of HTML5 to collect form data from your readers. This demonstration will show you how to search Google using voice input. And best of all it works right now in Chrome.
CSS padding adds space around the edges of the inside of your HTML boxes. Learn how CSS padding works, how you can affect the CSS padding, and how CSS padding interacts with the CSS box model.
HTML5 Placeholder Links
HTML5 adds a new feature to the anchor (a) tag: the ability to create placeholder links by simply removing the href attribute. But what are they for? Find out how to use HTML5 placeholder links.
CSS3 Media Queries
CSS3 media queries make it possible to define very precisely the devices you want to receive the styles in your style sheets. This means that you can design a style sheet to handle small devices like smart phones, a second style sheet for tablet devices, and a third for web browsers on large and small monitors.
Understanding HTML5 Video Formats
When you are working with HTML5 video there are a number of things you need to be aware of, not least of which is what video format you are going to encode your video in. There are essentially three video codecs you should be aware of, not including Flash: WebM, H.264, and ogg/Theora. Find out the differences between the three and how to choose which ones to use.
How do you set the height of an element to 100%?
When you set a relative height on an element, it doesn’t always change the height. For example, you might want a layout element to take up the full height of the browser window, but if you make this simple mistake, the height will only be as long as the text inside it. Find out why.
Why Use Semantic HTML?
Semantic HTML tags are tags that convey meaning beyond the simple presenational value that they provide in a browser. This means that a web page marked up with semantic HTML could convey meaning in scenarios beyond just visual web page renderings. Learn why using semantic HTML and using it correctly is important.
How to Convert a Word Doc to HTML
If you have a Word document that you would like to put on a web page, you have a number of different options for getting it from Word to HTML. Learn how to put a Word doc on the web and convert DOC files to HTML.
What is HTML5 Sectioning Content
HTML5 sectioning content is a category of HTML5 tags that provide structure to the HTML document and allow for more accurate outlining of the document. This article explains what HTML5 sectioning content is, how it is used, and the elements that are included in the category.
Closing Tags Not Required
Many HTML tags in HTML4 and HTML5 do not require end tags. They are not technically singleton or void elements because they do have contents, but their end tags are implied and can thus be omitted and still have valid HTML.
Working with HTML Paragraphs
Paragraphs make up the bulk of web page text, and yet most people ignore the paragraph tag. They just slap it around their blocks of text and move on. Learn how to style paragraphs, align them, work with typography inside paragraphs, and the correct use of the P tag. The links and resources in this article will help you get the most out of your web page paragraphs.
What is HTML
HTML stands for HyperText Markup Language, but what does that really mean? Find out the basics about HTML and what it is and how the various versions of HTML differ from one another. Learn what HTML is.
What You Need to Write HTML
One of the best things about learning to write HTML is that you don’t need much more than a computer to begin writing HTML and building your own web pages. Learn the few things you need to start writing HTML.
What is Local Storage and the localstorage Attribute in HTML5?
The ability to store information on the hard drive of a customer is a critical difference between web applications and computer applications. But HTML5 has a feature that is supported even in IE 8 that allows web developers to store data locally without using cookies.
Designing Web Pages with Internet Explorer
Internet Explorer is one of the most commonly used browsers on the internet. And designers who ignore it do so at their peril. Luckily IE is getting more and more standards compliant and there are ways to design pages that take IE’s quirks into account. Learn how to design pages for Internet Explorer that still look good in other, more standards compliant browsers.
What is Internet Explorer Compatibility View?
Compatibility view is the Internet Explorer 8 solution to moving from Internet Explorer 7 and 6 focused web designs to a more standards compliant design that IE 8 supports. Learn more about compatibility view and how it works.
HTML Singleton Tags
HTML void elements are elements that do not have a required closing tag to end them. These elements are usually elements that either stand alone on the page, or where the end of their contents is obvious from the context of the page itself.
Dating Web Page Content
Dates on web pages seem like a useful thing, especially to students who need them for their citations. But dates can cause more problems for websites because, like buying a new car, a dated web page depreciates in value the day after it goes live. By not putting a date on content, and instead keeping all content up-to-date, your site will have more value to readers.
Will My New Web Page Editor Be Able to Edit My Current Website?
If you have an existing website it can be scary to switch to a new tool, because what if that new web editor won’t edit the old pages. Find out whether it is something you should be worried about or not.
Publicity for Web Pages
A description of good and bad publicity opportunities for web designers to get word of their site out to the world. Find out about opportunities that are good and ones that are bad and how to tell the difference.
How to Design Your Own Website
Learn how to create a great website. The most critical piece of designing a website is planning. Once you’ve planned your site, then the design part comes easily. Learn how to design your own website.
How to Use Long Tail Keywords for Website Marketing
Learn how to use long tail keyword phrases to improve your SEO marketing efforts for your website.
Why Use Long Tail Keywords for SEO
Learn the benefits of long tail keyword phrases and why you might want to focus on them in your SEO marketing efforts.
HTML Scroll Box
CSS makes it easy to take a large box of text and place it in a smaller box with scroll bars. Learn how to set up scroll bars on text, tables, and even images.
5 Great Tools for Converting PDF to HTML
If you have a PDF document that you want to put on a web page, you can post it to the web as a PDF, but sometimes you want it to be a real HTML web page. These PDF to HTML converters will help.
Writing HTML for newsletters is difficult because there are so many different email clients and all of them are wildly different in what HTML and CSS they support. Learn some techniques for creating HTML newsletters.
Review Online Web Design Courses
There are many different schools, companies, and individuals that offer online courses in web design. How do you know that you’re signing up for a good one? Find out what other people think about various online courses that teach web design and HTML, and share your thoughts on the classes you have taken.
How to Set Up Multiple Servers for Diverse Workflows in Dreamweaver CS5
Dreamweaver CS5 adds the ability to add multiple servers to one site definition. This allows you to do testing of your website in one location and the load the finalized files to the live server in another location. Dreamweaver CS5 allows web designers to use more complex workflows right within the editor.
Watch Your Security Get Probed in Your Server Logs
Websites are a more and more common thing for hackers to exploit. There are so many scripts and tools out there that are not extensively tested, that it becomes simple for a hacker or script kiddie to find a site with exploits and then exploit it. Learn how to protect your site by being watchful and vigilant.
Web Servers and Workflow
Web servers often play a critical role in the workflow of building a website. While most small and medium sized websites have only one web server (the production server), larger companies may have many more than that for building and maintaining their website. Learn what different types of servers might appear in a web design workflow.
Spaces in HTML
Adding spaces in HTML doesn’t always result in spaces added to the web page. Learn how to add spaces in HTML that show up in your web designs.
HTML 5 Event Attributes
Event attributes make it easier to trigger scripts on your web pages and web applications in many different situations. Learn about some of the interesting event attributes coming with HTML5.
WebMatrix is a text editor for Windows. It is best suited to Professional Web Developers or Small Business Owners.
What is Web Design
An introduction to the basics of web design and the various aspects of web design. Learn what web design is.