HTML
Elements and Structure
| Element | Example Code | Notes |
|---|---|---|
| <video> Video Element | <video src="test-video.mp4" controls>Video not supported </video> | The <video> element embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player.
Note: The content inside the opening and closing tag is shown as a fallback in browsers that don't support the element. |
| <img> Image Element | <img src="url" alt="text" /> | HTML image <img> elements embed images in documents. The src attribute contains the image URL and is mandatory. <img> is an empty element meaning it should not have a closing tag. The alternative text will be displayed if an image fails to render. |
| <body> Body Element | The <body> element represents the content of an HTML document. Content inside <body> tags are rendered on the web browsers. Note: There can be only one <body> element in a document. | |
| <a> Anchor Element | <a href="url" title="click here!">Visit this site</a> <a href="url"> <img src="logo.jpg">Click this image </a> |
The <a> anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via href attribute. The title attribute is used to display additional text when you hover over the link. |
| <head> Head Element | <!DOCTYPE html> <html> <head> <!-- Metadata is contained in this element--> </head> </html> |
The <head> element contains general information about an HTML page that isn't displayed on the page itself. This information is called metadata and includes things like the title of the HTML document and links to stylesheets. |
| <target> Target Attribute | <a href="url" target = "_blank">This anchor element links to google and will open in a new tab or window.</a> | The target attribute on an <a> anchor element specifies where a hyperlink should be opened. A target value of "_blank" will tell the browser to open the hyperlink in a new tab in modern browsers, or in a new window in older browsers or if the browser has had settings changed to open hyperlinks in a new window. |
| Link to a Different Part of the Page # | <div> <p id="#id - of - element">A different part of the page!</p> </div> <a href="#id - of - element">Take me to a different part of the page</a> |
The anchor element <a> can create hyperlinks to different parts of the same HTML document using the href attribute to point to the desired location with # followed by the id of the element to link to. |
| <title> Title Element | <!DOCTYPE html> <html> <head> <title>Title of the HTML page</title> </head> </html> |
The <title> element contains a text that defines the title of an HTML document. The title is displayed in the browser's title bar or tab in which the HTML page is displayed. The <title> element can only be contained inside a document's <head> element. |
| File Path | <a href="url">The URL for this anchor element is an absolute file path.</a>
<a href=". /about. html ">The URL for this anchor element is a relative file path.</a> |
URL paths in HTML can be absolute paths, like a full URL, for example: https://url or a relative file path that links to a local file in the same folder or on the same server, for example: ./style.css. Relative file paths begin with ./ followed by a path to the local file. ./ tells the browser to look for the file path from the current folder. |
Tables
| Element | Example Code | Notes |
|---|---|---|
| <tbody> Table Body Element | <table> <tbody> <tr> <td>row 1</td> </tr> <tr> <td>row 2</td> </tr> <tr> <td>row 3</td> </tr> </tbody> </table> |
The table body element, <tbody>, is a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children. |
| <thead> Table Head Element | <table> <thead> <tr> <th>heading 1</th> <th>heading 2</th> </tr> </thead> <tbody> <tr> <td>col 1</td> <td>col 2</td> </tr> </tbody> </table> |
The table head element, <thead>, defines the headings of table columns encapsulated in table rows. The table heading element, <th>, is used to add titles to rows and columns of a table and must be enclosed in a table row element, <tr>. |
| rowspan Attribute | <table> <tr> <th>row 1:</th> <td>col 1</td> <td>col 2</td> </tr> <tr> <th rowspan="2">row 2 (this row will span 2 rows):</th> <td>col 1</td> <td>col 2</td> </tr> <tr> <td>col 1</td> <td>col 2</td> </tr> <tr> <th>row 3:</th> <td>col 1</td> <td>col 2</td> </tr> </table> |
Similar to colspan, the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table. The rowspan value is set to 1 by default and will take any positive integer up to 65534. |
| colspan Attribute | <table> <tr> <th>row 1:</th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <th>row 2:</th> <td colspan="2">col 1 (will span 2 columns)</td> <td>col 2</td> <td>col 3</td> </tr> </table> |
The colspan attribute on a table header <th> or table data <td> element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000. |
| <tfoot> Table Footer Element | <table> <thead> <tr> <th>heading 1</th> <th>heading 2</th> </tr> </thead> <tbody> <tr> <td>col 1</td> <td>col 2</td> </tr> </tbody> <tfoot> <tr> <td>summary of col 1</td> <td>summary of col 2</td> </tr> </tfoot> </table> |
The table footer element, <tfoot>, uses table rows to give footer content or to summarize content at the end of a table. |
Organization and Notation
Design to Website
| Element | Example Code | Notes |
|---|---|---|
| HTML Comments | HTML <!--...--> Tag | Use Comments in HTML to explain your code/sections as a visual aid for you and others working on a website. HTML Comments |