Semantic elements give the page meaning.
HTML
Hypertext Markup Language consists of tags that make up elements. Elements can be broken into categories based on purpose:
- Page: page structure
- Layout: page layout
- Table: tabular data
- Form: data entry
- Text: formatted text documents
- List: ordered/unordered lists, data items
- Media: multimedia experiences
Elements
| Element | Description |
|---|---|
| <a> | creates a link (hyperlink) to another page |
| <abbr> | abbreviation or acronym |
| <address> | contact information |
| <area> | map area for an image |
| <article> | container for independent and self-contained text |
| <aside> | content area that is related to the primary content on a page |
| <audio> | player for sound |
| <b> | bold text |
| <base> | sets the base URL for all relative URLs on a page |
| <blockquote> | quote from an outside source |
| <body> | container for the page's content with text, links, images, etc. |
| <br> | line break |
| <button> | clickable button that can contain text or an image |
| <canvas> | graphics container where Javascript can draw |
| <caption> | caption of a table |
| <cite> | title of a work |
| <code> | used to display computer code |
| <col> | column properties for a table |
| <colgroup> | one or more columns for table formatting |
| <data> | links content to a machine-readable set of related data |
| <datalist> | list of options for a textfield (<input>) element |
| <dd> | description of a term or name to a <dl> element |
| <del> | deleted text |
| <details> | a control that can show and hide additional details |
| <div> | division or section |
| <dl> | description list |
| <dt> | term or name to a <dl> element |
| <em> | text that shows emphasis |
| <embed> | container for an external resource or plug-in |
| <fieldset> | related form elements and displays a box with a legend around |
| <figcaption> | caption to a <figure> |
| <figure> | self-contained content |
| <footer> | footer section on a page or a section of a page |
| <form> | data entry area that contains input elements |
| <h1>-<h6> | headers 1-6 |
| <head> | holds metadata elements |
| <header> | header section on a page or a section of a page |
| <hr> | horizontal rule representing a thematic change in content |
| <html> | root container for an HTML document |
| <i> | italic text |
| <iframe> | a frame in which another web page can be embedded |
| <img> | image |
| <input> | input field in which data can be entered |
| <ins> | inserted text |
| <kbd> | keyboard input often with CTRL SHIFT or ALT |
| <label> | label or brief description before input elements |
| <legend> | caption for <fieldset> |
| <li> | list item used in <ol><ul> |
| <link> | link to an external source |
| <main> | a container for the main content of the page |
| <map> | a client-side image map |
| <mark> | marks or highlights text |
| <meta> | metadata about the web page |
| <meter> | measurement control like a gauge |
| <nav> | container for navigation links |
| <object> | Embeds external objects in a page such as audio, video, image, or PDF |
| <ol> | numerically or alphabetically ordered list of items |
| <optgroup> | related options in a <select> |
| <option> | adds item to a <select> |
| <output> | output results of a calculation |
| <p> | paragraph or body text |
| <picture> | Adds images with a bit more flexibility than the <img> |
| <pre> | preformatted text in fixed-width font -- usually computer code |
| <progress> | control that displays progress of a task |
| <q> | short quotation in with quotation marks |
| <ruby> | Represents a small annotation with pronunciation of text |
| <samp> | displays sample output from computer code |
| <script> | adds JavaScript to a page server-side or client-side |
| <section> | piece of content that can stand on its own |
| <select> | dropdown control |
| <source> | adds a media source for a <video> <audio><picture> |
| <span> | container for one or more inline text elements |
| <strong> | important text |
| <style> | adds CSS style elements to a page |
| <sub> | subscript text; characters display lower and in smaller font |
| <summary> | heading that toggles <details> |
| <sup> | superscript text; characters display higher and in smaller font |
| <svg> | vector image |
| <table> | used to display tabular data with rows and columns |
| <tbody> | table body |
| <td> | table cell of data |
| <template> | hidden content holder that can be copied by JavaScript |
| <textarea> | multi-line text input |
| <tfoot> | table footer |
| <th> | table header cell |
| <thead> | header rows in a table |
| <time> | human-readable date/time item |
| <title> | page title that will display in the browser's tab |
| <tr> | table row with <th> or <td> elements |
| <track> | adds a text track such as subtitles or captions for media |
| <u> | underlined text |
| <ul> | unordered bulleted list of list items |
| <var> | defines its contents as a variable |
| <video> | video player |
| <wbr> | line-breaking |
| <!DOCTYPE> | defines the version of HTML; first line of an HTML document |
Block and Inline Elements
Block Elements
Block elements start on a new line and span across the width of the page
<address>
<article>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1-h6>
<hr>
<header>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elements
Inline elements start anywhere on a line and can share the width with other elements.
<a>
<abbr>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<sub>
<sup>
<strong>
<textarea>
<time>
<var>
HTML Attributes
- Global
- Multi-tag
- Single-tag