Building webpages begins with HTML. Beautifying them and making them interactive comes later. But to start creating functional static websites, you need an understanding of HTML. (Want a quick introduction to this markup language? Read our HTML FAQ.)
As part of learning the language, there’s a long list of elements you need to add to your HTML vocabulary. And this task can seem daunting at first, which is why we have come up with the following cheat sheet. It gives you an easy way to discover/understand/recall HTML elements any time you need them.
The cheat sheet covers tags and attributes for structuring webpages, formatting text, adding forms, images, lists, links, and tables. It also includes tags that were introduced in HTML5 and HTML codes for commonly used special characters.
FREE DOWNLOAD: This cheat sheet is available as a downloadable PDF from our distribution partner, TradePub. You will have to complete a short form to access it for the first time only. Download The HTML Essentials Cheat Sheet.
The HTML Essentials Cheat Sheet
| Shortcut | Action |
|---|---|
| Basic Tags | |
| <html> ... </html> | The first and last tag of an HTML document. All other tags lie between these opening and closing tags. |
| <head> ... </head> | Specifies the collection of metadata for the document. |
| <title> ... </title> | Describes the title for the page and shows up in the browser’s title bar. |
| <body> ... </body> | Includes all content that will be displayed on the webpage. |
| Document Information | |
| <base/> | Mentions the base URL and all relative links to the document. |
| <meta/> | For extra information about the page like author, publish date, etc. |
| <link/> | Links to external elements like style sheets. |
| <style> ... </style> | Contains document style information like CSS (Cascading Style Sheets). |
| <script> ... </script> | Contains links to external scripts. |
| Text Formatting | |
| <strong> ... </strong> OR <b> ... </b> |
Makes text bold. |
| <em> ... </em> | Italicizes text and makes it bold. |
| <i> ... </i> | Italicizes text but does not make it bold. |
| <strike> ... </strike> | Strikethrough text. |
| <cite> ... </cite> | Cites an author of a quote. |
| <del> ... </del> | Labels a deleted portion of a text. |
| <ins> ... </ins> | Shows a section that has been inserted into the content. |
| <blockquote> ... </blockquote> |
For displaying quotes. Often used with the <cite> tag. |
| <q> ... </q> | For shorter quotes. |
| <abbr> ... </abbr> | For abbreviations and full-forms. |
| <address> ... </address> | Specifies contact details. |
| <dfn> ... </dfn> | For definitions. |
| <code> ... </code> | For code snippets. |
| <sub> ... </sub> | For writing subscripts |
| <sup> ... </sup> | For writing superscripts. |
| <small> ... </small> | For reducing the text size and marking redundant information in HTML5. |
| Document Structure | |
| <h1..h6> ... </h1..h6> | Different levels of headings. H1 is the largest and H6 is the smallest. |
| <div> ... </div> |
For dividing content into blocks. |
| <span> ... </span> | Includes inline elements, like an image, icon, emoticon, without ruining the formatting of the page. |
| <p> ... </p> | Contains plain text. |
| <br/> | Creates a new line. |
| <hr/> | Draws a horizontal bar to show end of the section. |
| Lists | |
| <ol> ... </ol> | For ordered list of items. |
| <ul> ... </ul> | For unordered list of items. |
| <li> ... </li> | For individual items in a list. |
| <dl> ... </dl> | List of items with definitions. |
| <dt> ... </dt> | The definition of a single term inline with body content. |
| <dd> ... </dd> | The description for the defined term. |
| Links | |
| <a href=””> ... </a> | Anchor tag for hyperlinks. |
| <a href=”mailto:”> ... </a> | Tag for linking to email addresses. |
| <a href=”tel://###-###”> ... </a> | Anchor tag for listing contact numbers. |
| <a name=”name”> ... </a> | Anchor tag for linking to another part of the same page. |
| <a href=”#name”> ... </a> | Navigates to a div section of the webpage. (Variation of the above tag) |
| Images | |
| <img /> |
For displaying image files. |
| Attributes for the <img> tag | |
| src=”url” | Link to the source path of the image. |
| alt=”text” | The text displayed when a mouse is hovered over the image. |
| height=” ” | Image height in pixels or percentages. |
| width=” ” | Image width in pixels or percentages. |
| align=” ” | Relative alignment of the image on the page. |
| border=” ” | Border thickness of the image. |
| <map> ... </map> | Link to a clickable map. |
| <map name=””> ... </map> |
Name of the map image. |
| <area /> | The image area of an image map. |
| Attributes for the <area> tag | |
| shape=” " | Shape of the image area. |
| coords=” ” | Coordinates of the map image area. |
| Forms | |
| <form> ... </form> | The parent tag for an HTML form. |
| Attributes for the <form> tag | |
| action=”url” | The URL where form data is submitted. |
| method=” ” | Specifies the form submission protocol (POST or GET). |
| enctype=” ” | The data encoding scheme for POST submissions. |
| autocomplete | Specifies if form autocomplete is on or off. |
| novalidate | Specifies whether the form should be validated before submission. |
| accept-charsets | Specifies character encoding for form submissions. |
| target | Shows where the form submission response will be displayed. |
| <fieldset> ... </fieldset> | Groups related elements in the form/ |
| <label> ... </label> | Specifies what the user should enter in each form field. |
| <legend> ... </legend> | A caption for the fieldset element. |
| <input /> | Specifies what type of input to take from the user. |
| Attributes for the <input> tag | |
| type=”” | Determines the type of input (text, dates, password). |
| name=”” | Specifies the name of the input field. |
| value=”” | Specifies the value in the input field. |
| size=”” | Sets the number of characters for the input field. |
| maxlength=”” | Sets the limit of input characters allowed. |
| required | Makes an input field compulsory. |
| width=”” | Sets width of the input field in pixels. |
| height=”” | Sets height of the input field in pixels. |
| placeholder=”” | Describes expected field value. |
| pattern=”” | Specifies a regular expression, which can be used to look for patterns in the user’s text. |
| min=”” | The minimum value allowed for an input element. |
| max=”” | The maximum value allowed for an input element. |
| disabled | Disables the input element. |
| <textarea> ... </textarea> | For capturing longer strings of data from the user. |
| <select> ... </select> | Specifies a list of options which the user can choose from. |
| Attributes for the <select> tag | |
| name=”” | Specifies name for a dropdown list. |
| size=”” | Number of options given to the user. |
| multiple | Sets whether the user can choose multiple options from the list. |
| required | Specifies whether choosing an option/s is necessary for form submission. |
| autofocus | Specifies that a drop-down list automatically comes into focus after a page loads. |
| <option> ... </option> | Defines items in a dropdown list. |
| value=”” |
Displays the text for any given option. |
| selected | Sets default option that is displayed. |
| <button> ... </button> | Tag for creating a button for form submission. |
| Objects and iFrames | |
| <object> ... </object> | Describes the embedded filetype. |
| Attributes for the <object> tag | |
| height=”” | The height of the object. |
| width=”” | The width of the object. |
| type=”” | The type of media the object contains. |
| <iframe> ... </iframe> | An inline frame for embedding external information. |
| name=”” | The name of the iFrame. |
| src=”” | The source URL for the content inside the frame. |
| srcdoc=”” | The HTML content within the frame. |
| height=”” | The height of the iFrame. |
| width=” ” | The width of the iFrame. |
| <param /> | Adds extra parameters to customize the iFrame. |
| <embed> ... </embed> | Embeds external application or plugin. |
| Attributes for the <object> tag | |
| height=” “ | Sets the height of the embed. |
| width=” “ | Sets the width of the embed. |
| type=”” | The type or format of the embed. |
| src=”” | The source path of the embedded file. |
| Tables | |
| <table> ... </table> | Defines all content for a table. |
| <caption> ... </caption> |
A description of the table. |
| <thead> ... </thead> | Headers for each column in the table. |
| <tbody> ... </tbody> | Defines the body data for the table. |
| <tfoot> ... </tfoot> | Describes the content for the table’s footer. |
| <tr> ... </tr> | Content for a single row. |
| <th> ... </th> | The data in a single header item. |
| <td> ... </td> | Content within a single table cell. |
| <colgroup> ... </colgroup> |
Groups columns for formatting. |
| <col> | A single column of information. |
| HTML5 New Tags | |
| <header> ... </header> | Specifies the webpage header. |
| <footer> ... </footer> | Specifies the webpage footer. |
| <main>...</main> | Marks main content of the webpage. |
| <article>...</article> | Specifies an article. |
| <aside> ... </aside> | Specifies sidebar content of a page. |
| <section>...</section> | Specifies a particular section in the webpage. |
| <details> ... </details> | For describing extra information. |
| <summary> ... </summary> | Used as a heading for the above tag. Is always visible to the user. |
| <dialog>...</dialog> | Creates a dialog box. |
| <figure>...</figure> | Used for including charts and figures. |
| <figcaption> ... </figcaption> | Describes a <figure> element. |
| <mark>...</mark> | Highlights a specific part of the text. |
| <nav>...</nav> | Set of navigation links on a webpage. |
| <menuitem>...</menuitem> | A particular item from a list or a menu. |
| <meter>...</meter> | Measures data within a given range. |
| <progress>...</progress> | Places a progress bar and tracks progress. |
| <rp>...</rp> | Displays text that do not support Ruby annotations. |
| <rt>...</rt> | Displays East Asia typography character details. |
| <ruby>...</ruby> | A Ruby annotation for East Asian typography. |
| <time>...</time> | Identifies time and date. |
| <wbr> | A line break within the content. |
| ¹HTML5 Character Objects | |
| " ; OR " ; |
Quotation marks |
| < ; OR < ; |
Lesser than sign (<) |
| > ; OR > ; |
Greater than sign (>) |
|   ; OR   ; |
Non-breaking space |
| © ; OR © ; |
Copyright symbol |
| ™ ; OR û ; |
Trademark symbol |
| @ ; OR Ü ; |
“at” symbol (@) |
| & ; OR & ; |
Ampersand symbol (&) |
| • ; OR ö ; |
Small bullet |
| ¹Ignore space before semicolon while typing HTML character. | |
Build a Website for Hands-On Experience
Once you have understood the basics of HTML code and have a working knowledge of CSS and JavaScript, try your hand at building a website. Also, be sure to save our CSS3 properties cheat sheet and JavaScript cheat sheet for future use!
Read the full article: The HTML Essentials Cheat Sheet: Tags, Attributes, and More
from MakeUseOf https://ift.tt/395d4LX
No comments:
Post a Comment