Common HTML tags

From Knowledge Kitchen
Jump to navigation Jump to search

Text editors

HTML code is text. To create an HTML document, you use a text editor.

There are many Integrated Development Environments (IDEs) used by professional developers that include text editors. An IDE usually contains a text editor, in addition to other tools that are useful to developers, such as debugging tools, file management tools, testing tools, etc.

WYSIWYG editors

"What You See Is What You Get" editors (WYSIWYG editors) allow people to generate code visually, by dragging and dropping GUI components to design the web page they want. Behind the scenes, these tools then create the code. So the user of these programs does not need to write code by hand. The most famous and most maligned of these tools is Dreamweaver.

Generally-speaking, these tools create code that is difficult to maintain, difficult to customize, and generally considered garbage by professional developers. In order to make commercial quality websites using today's technology, you will need to know how to write HTML and CSS code by hand.

Bare minimum HTML 5 code necessary to make a web page

The fundamental code necessary for a valid HTML 5 page:

<!DOCTYPE html>
<html lang="en">
          <meta charset="utf-8" />
          <title>Insert the title of your page here</title>
          Insert the contents of your page here

HTML syntax and style

Basic elements

  • section
  • article
  • aside
  • nav
  • header
  • footer

Text formatting

  • h1 to h6
  • p
  • br
  • ul
  • li
  • a
  • strong

Some text-formatting tags of secondary importance

Not so commonly used:

  • em
  • cite
  • q
  • blockquote
  • address
  • time


  • img
  • figure
  • figcaption

Audio & Video

  • audio
  • video
  • source


  • form
  • input type="text"
  • input type="radio"
  • input type="checkbox"
  • input type="submit"
  • textarea
  • select
  • option

Image compression formats

There are three common web-based raster image compression formats supported by most web browsers: GIF, PNG, and JPG.

Images can be optimized in image editing tools like Photoshop. Optimization involves finding a balance between the need for small image file sizes and the need for high fidelity.

What links here