| Boilerplate | |||
|---|---|---|---|
| <!DOCTYPE html>
<html> <head> <title></title> <link href="style.css" rel="stylesheet"> </head> <body> <h1></h1> </body> </html> |
Description | ||
| This boilerplate is a basic template that includes all the must-have tags needed for a good HTML project. Plug this template into a new project to get started! |
|||
| Boilerplate Tags | |||
|---|---|---|---|
| Tag | Attributes | Name | Description |
| <!DOCTYPE html> | Doctype | A required preamble that lets the browser know what type of document to expect. Self closing tag. | |
| <html> | lang | HTML | This element wraps all the content on the entire page and is sometimes known as the root element. |
| <head> | Head | This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. | |
| <title> | Title | This tag is used within the head of the document to define a title in the browser toolbar. | |
| <body> | Body | This contains all the content that you want to show to web users when they visit your page | |
| Basic HTML Tags | |||
|---|---|---|---|
| Tag | Attributes | Name | Description |
| <h1> to <h6> | Headings 1-6 | Denotes different levels of headings. Block-level element with automatic spacing before and after. Notes:
|
|
| <p> | Paragraph | Denotes a paragraph. Block-level element with automatic spacing before and after. | |
| <a> | href | Anchor | creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. |
| <br> | Break | Self closing tag. Creates vertical whitespace between elements. | |
| <em> | Emphasize | Marks text that has stress emphasis. Displayed in italic type. | |
| <strong> | Strong | Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. | |
| List Tags | |||
|---|---|---|---|
| Tag | Attributes | Name | Description |
| <ul> | Unordered List | Denotes an unordered list, typically rendered as a bulleted list. | |
| <ol> | Ordered List | Denotes an ordered list, typically rendered as a numbered list. | |
| <li> | List Item | Used to add a list item to unordered or ordered lists. | |
| Semantic Tags | |||
|---|---|---|---|
| Semantic tags clearly describe the content to both the browser and the developer. They are an important tool for accessibility. | |||
| Tag | Attributes | Name | Description |
| <header> | Header | Defines a header. | |
| <footer> | lang | Footer | Defines a footer. |
| <nav> | Navigation | Defines a menu. | |
| <main> | Main | The dominant content of a document. | |
| <article> | Article | Content that makes sense on its own. | |
| <section> | Section | Content with the same theme. | |
| <aside> | Aside | Additional information. | |
| <figure> | Figure | Encapsulates media. | |
| <figcaption> | Figure Caption | Used inside the figure element to provide a caption to media. | |
| Non-Semantic Tags | |||
|---|---|---|---|
| Non-semantic tags do not inherently represent anything. They can be used to group elements for styling purposes (using the class or id attributes). They should be used only when no other semantic element is appropriate. | |||
| Tag | Attributes | Name | Description |
| <div> | Content Division | The generic container for flow content. It's often used to group content so it can be easily styled using the class or id attributes. | |
| <span> | lang | Footer | A generic inline container for phrasing content. It is often used to style words within semantic text tags using the class or id attributes. It differs from <div> because content within stays inline. |
| Multimedia Tags | |||
|---|---|---|---|
| Tag | Attributes | Name | Description |
| <img> | src, alt | Image | Denotes an image. Self closing tab. |
| <video> | src, controls, loop, autoplay | Video | Denotes a video. Content between tags will be displayed if video not visible. |
| <audio> | controls, autoplay | Audio | Inserts an audio file. |
| <source> | src, type | Source | Used to add a source to video or audio elements. Goes between opening/closing tags. If multiple sources are added, the first supported source will display. |
| <embed> | src | Embed | Embeds any external content. Deprecated tag — avoid using. |
| Table Tags | |||
|---|---|---|---|
| Tag | Attributes | Name | Description |
| <table> | Table | The wrapper element for all HTML tables. | |
| <thead> | Table Head | The set of rows defining the column headers in a table. | |
| <tbody> | Table Body | The set of rows containing actual table data. | |
| <tr> | Table Row | The table row container. | |
| <th> | rowspan, colspan | Table Header | A table row container used for headers. Bold and centered. |
| <td> | rowspan, colspan | Table Data | The table row container. |
| <tfoot> | Table Foot | The set of rows defining the footer in a table. | |