Individuals learning the basics of web design may want to keep a list of HTML codes on hand for reference and to understand what the tags are designed to accomplish. Knowing their purpose will help you create a SEO-friendly structure for your site.
HTML Codes Used in Web Design
When learning to design a web page, it is simpler if you understand basic HTML, even if you are using an editor or website builder. Knowing the basics will help you understand how the page is read by browsers.
If you need help downloading the printable list, check out these helpful tips.
All web pages have this basic code:
<!DOCTYPE html>: This tag has been simplified in HTML5 since the multiple <doctype> declarations were eliminated -- leaving just one: html. In HTML 4.01 <doctype> declarations include: strict, transitional, frameset and the XHTML 1.0 declarations of strict, transitional, frameset and XHTML 1.1.
<HTML>: Begins your document
<HEAD>: Contains information about the page such as META tags and title; this is not rendered in the web browser
<TITLE>: Your page title -- visible in the browser tab
</TITLE>: Closes <TITLE> tag
</HEAD>: Closes <HEAD> tag
<BODY>: This is the content area of your web page -- where you will include text, images, graphs, etc.
Everything inside the <body> tag is visible in the browser. At the end of your HTML page, you need to close open tags by using:
</BODY> to close the <BODY> tag and
</HTML> to close the <HTML> tag.
List of Tags Introduced in HTML5
Most of the tags introduced in HTML5 are designed to address content that was not prevalent when HTML 4.01 was created. These new tags deal with content like media or the tags are a better ways to define page structure. Here are the tags introduced in HTML5.
- <!DOCTYPE HTML> Defines document type -- html is the only type in HTML5
- <article> </article> Defines an article
- <aside> </aside> Defines a sidebar -- or aside -- to an article
- <audio> </audio> Designates sound files
- <bdi> </bdi> Isolates a part of text that might be formatted in a different direction than text outside of it.
- <canvas> </canvas> This is the container that holds any scripting language used to draw graphics on the fly
- <command> </command> Defines a command button users can click -- inside a form
- <datalist> </datalist> Used in a form. It designates a list of pre-defined options for input
- <details> </details> Defines additional information that a user can view or hide
- <dialog> </dialog> Defines a dialog box or window.
- <embed> </embed> This is a container for an external (non-HTML) application -- like a video
- <figcaption> <figcaption> The caption for <figure> content
- <figure> </figure> Specifies self-contained content like an image
- <header> </header> Defines the header portion of the document or a section inside the document
- <keygen> </keygen> Used to define a key-pair generator field in forms
- <mark> </mark> Defines highlighted -- or marked -- text
- <meter> </meter> Defines a scalar measurement within a known range (a gauge) -- for example 2 out of 10
- <nav> </nav> Navigation links
- <output> </output> Specifies output of calculation
- <progress> </progress> Represents progress of a task
- <rp> </rp> Defines what to show in browsers that do not support ruby annotations
- <rt> </rt> Defines an explanation/pronunciation of characters (for East Asian typography)
- <ruby> </ruby> Defines a ruby annotation (for East Asian typography)
- <section> </section> Defines a specific section inside a document
- <source> </source> Defines multiple media resources for media elements like <video> or <audio>
- <summary> </summary> Defines a visible heading for a <details> element
- <time> </time> Date and time
- <track> </track> Defines text tracks for media elements like <video> or <audio>
- <video> </video> A movie or video
- <wbr> </wbr> Defines possible line break
List of HTML 4.01 Tags Not Supported in HTML5
A handful of tags were removed in HTML5 due to their lack of use -- or because they were being used in a manner other than their intended purpose.
- <acronym> <acronym> Defines an acronym
- <basefont> </basefont> Designates default color, size and font for the document's text
- <big></big> Makes text larger
- <center></center> Centers text
- <dir> </dir> Directory List
- <font> </font> Used to define color, size and font inside a document
- <frame> </frame> Defines a frame inside a frameset
- <frameset> </frameset> Specifies a set of frames
- <noframes> </noframes> Defines an alternate content for users that do not support frames
- <strike> </strike> Strike-through text
- <tt> </tt> Teletype text
List of HTML Codes Compatible in HTML 4.01 and HTML5
The following is a list of HTML 4.01 tags that are also part of the HTML5 standard:
- <!--...--> Defines a comment
- <a> </a> Hyperlink
- <abbr> </abbr> Abbreviation
- <address> </address> Defines address information of document owner
- <applet> </applet> Defines an embedded applet
- <area> </area> Defines an area inside an image-map
- <base> </base> Base URL/target for all relative URLs in a document
- <bdo> </bdo> Overrides current directionof text
- <blockquote> </blockquote> Section quoted from another source
- <body> </body> Defines document's body
- <br> Line break
- <button> </button> Defines a clickable button
- <caption> </caption> Defines a table's caption
- <cite> </cite> Title of a work
- <code> </code> Computer coding
- <col> </col> Columns in a table
- <colgroup> </colgroup> Group of one or more columns in a table
- <dd></dd> Definition description
- <del> </del> Text deleted from document
- <dfn> </dfn> Definition term
- <dl></dl> Definition list
- <div> </div> Section in a document
- <dt><dt> Definition term
- <em></em> Emphasis
- <embed></embed> Embed an item
- <fieldset> </fieldset> Groups related elements in a form
- <form></form> Form
- <a name=""></a> anchor
- <h1></h1> Heading 1; use 2, 3, 4, etc. for different sizes
- <hr> Horizontal rule
- <i></i> Italics
- <img src=""> Image
- <ol></ol> Ordered list
- <ul></ul> Unordered list
- <li></li> List item
- <marquee></marquee> Scrolling text
- <meta> Used to specify page description, keywords, author and other relevant information about the page
- <p></p> Paragraph
- <small></small> Makes text smaller
- <table></table> Table
Helpful <html> Snippets
Possibly one of the most commonly used HTML tags is <table>. Most tables use three main tags: one for the container, one for the information inside the table, and one to designate a row inside the table.
To build a table with two rows and two columns you use all three tags. Although you can style from inside the tag, for example, <table border="1">, the preferred method is to control the look with CSS.
< td>This is the first box in Row 1</td>
< td> This is the second box in Row 1</td>
< td>This is the first box in Row 2</td>
< td> This is the second box in Row 2</td>
The same table with a header column that spans both columns would look like this.
<th colspan="2">This row stretches across both rows below it.</th> The <th> -- table header -- bolds and centers the text.
< td>This is the first box in Row 1</td>
< td>This is the second box in Row 1</td>
< td>This is the first box in Row 2</td>
< td>This is the second box in Row 2</td>
To Do List
By taking advantage of local storage, the latest version of Google Chrome and other browsers, allow you to create a list that can be edited from inside the user's browser. To set it up, you need to associate the attribute contenteditable with the list.
<h2>My editable List</h2>
<li>Go to grocery store </li>
<li>Drop paperwork off at office</li>
When users access the above coding from new browsers (not Internet Explorer), they can edit and change the list as they choose.
How CSS Interacts With HTML
HTML is a markup language and its role is to structure the page. Since the markup language is read top to bottom by the browser, the more important information should be at the top of the page -- and be wrapped inside the appropriate tag.The top headline should always be a <h > tag -- usually a <h1> or <h2>, paragraphs go inside <p>, etc. this way the browser (and search engines) can validate the hierarchy of importance for the text on the page.
Because HTML should be used only for the structure of a document, CSS is used for the design and look. Although, some HTML tags can be minimally styled without CSS, the best practice is to control your site's design with CSS. CSS works by creating names for the various types of content on your page. When the browser reads a CSS 'name' -- it applies the style -- associated with that name -- to the content.
Can't Remember All The Tags?
The good thing is you don't need to -- you can use a reference list like this to double-check what a tag is designed for -- or use an HTML editor with a built-in reference like HTML-Kit. What is more important than memorizing all the tags is to design pages with current and future browsers in mind. By doing this, when users catch up and install the most current browser, the new tags will already be in place -- and work as designed.