Here we can see, “The HTML Essentials Cheat Sheet: Tags, Attributes, and More”
Get conversant in HTML tags and attributes in no time with this HTML essentials cheat sheet.
Building web pages begin with HTML. Beautifying them and making them interactive comes later. But to start out creating functional static websites, you would like an understanding of HTML. (Want a fast introduction to the present markup language? Read our HTML FAQ.)
As a part of learning the language, there is a long list of elements you would like to feature in your HTML vocabulary. And this task can seem daunting initially, which is why we’ve come up with the subsequent cheat sheet. It gives you a simple thanks to discovering/understanding/recall HTML elements whenever you like them.
The cheat sheet covers tags and attributes for structuring web pages, 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.
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. | |
Conclusion
I hope you found this guide useful. If you’ve got any questions or comments, don’t hesitate to use the shape below.
User Questions:
- What are the 4 HTML essentials?
Some of the essential tags for an HTML document are doctype, <html>, <head>, <title> and <body>. doctype is that the doctype declaration type. It’s used for specifying which version of HTML the document is using. The HTML <html> tag is that the container for all other HTML elements apart from the . you employ tags to make HTML elements, like paragraphs or links. Many elements have a gap tag and a closing tag — for instance, a p (paragraph) element features a tag, followed by the paragraph text, followed by a closing tag.
- Is HTML uses predefined tags?
HTML uses Pre-specified tags…for e.g.: <html> <head> <title> <body> . The anchor tag is additionally HTML tag. The anchor tag is employed for adding a hyperlink on an internet page.
- Feel stuck after learning HTML&CSS? Here’s the way to create websites on your own
Feel stuck after learning HTML&CSS? Here’s how to create websites on your own from web_design
- I have been interviewing candidates for an internet dev position. a significant lack of data in HTML/CSS.
Just an observation. I have been interviewing candidates for a web dev position. A serious lack of knowledge in HTML/CSS. from webdev
