Common HTML Elements
<a> elements to link text, images (or wrapping elements) to a particular URL or HTML element. The “href” attribute specifies the URL (or element ID) that the text (or elements) between the opening and closing anchor tags should direct to. The optional “target” attribute can be set to “_blank” to force the link to open in a new tab or window (depending on how the user’s browser is configured).
You can insert comments into a web page to make notes, quickly hiding elements for debugging, etc. Anything wrapped between the opening
<!-- and closing
--> tags will not be rendered visibly in a web browser.
Pro tip: although comments are not rendered visibly on a page, they can still be viewed in the page source so never include something that should be private or secure in a comment!
<div> elements can be used as containers to group or separate HTML elements.
Pro tip: division elements do not have semantic meaning, so use other elements such as
<section>, etc. if those elements are more appropriate for the content.
<em> tags should be used when you want to add emphasis to text. It’s a staple for the sarcastic and hyperbolic alike. The elements carry semantic meaning, so use them in cases where you want to really add significance to text or drive a point home.
The default styling of emphasis elements is to make the text they the opening and closing tags wrap be italic.
Pro tip: do not use emphasis elements if you merely want add italic styling to text. Use CSS if you only want to change the style, use emphasis tags if you want to convey extra meaning.
<h6> provide section headings for a web page. Heading elements are semantic, that is, they have meaning associated with them. Headings help form the structure of a page, like headings in an outline.
Headings are ordered in greatest significance (and size) from
<h1> down to
<h6>. Headings can be nested beneath each other, as long as the correct order is used. By default heading elements have a bold font weight.
Pro tip: don’t skip heading sizes! Headings should proceed in logical order since they help form the page outline, which is essential for web crawlers and users using screen readers to understand the page. Use CSS to style a heading element if it does not initially have the size or font weight you desire.
Images can be embedded in a page with the
<div> element. The “src” attribute of an image is mandatory; it denotes the location of the image (it is usually a URL but could also be a local file path).
Pro tip: images should always feature the “alt” (alternative text description) attribute for accessibility and for cases where the image does not load. The “alt” text should be a description of the image itself and should not feature the words “photo”, “image”, etc. In some cases, as when an image is used purely for decorative purposes, the alt text can be left blank (e.g. alt=””).
Lists come in a couple varieties.
<ol> should be used when the sequential arrangement of items in a list essential (for example, the order of steps in a recipe. By default a number is placed before each list item
<ul> should be used when the order of list items
<li> does not matter. The default list item style is a bullet point.
<p> elements to logically separate or organize text content. Paragraphs elements in HTML do not necessarily correspond to paragraphs in a literary context, such as a book or magazine article.
<span> are inline containers that are often used to group/wrap elements for styling purposes. Span elements should only be used when there are no other semantic elements that would be appropriate.
<table> should be used to present tabular data on a web page. Tables are built out by adding table rows
<tr>, then adding table data cells
<td> to hold the data content. Table headers
<th> should be used to note a relationship with table cells.