 |
VOOZH | about |
|
VOOZH | about |
HTML (HyperText Markup Language) is the core language of the web, structuring content and defining how web pages display and interact across all platforms.
The <html> element represents the root (top-level element) of an HTML document also called the document element. All other elements must be descendants of this element.
<html> … </html>HTML heading tags (<h1> to <h6>) are used to define headings and subheadings on your webpage.
The <h1> tag is typically reserved for the page’s main title, while the others denote subheadings in descending order of importance.
| Heading Tags | Description | Syntax |
|---|---|---|
| <h1> | Used for title generally once per page and has a font size of 2em. | <h1>....</h1> |
| <h2> | Used for medium sized titles and has a font size of 1.5em. | <h2>....</h2> |
| <h3> | Used for subsections and has a font size of 1.17em. | <h3>....</h3> |
| <h4> | Used for highlighting text with font size of 1em. | <h4>....</h4> |
| <h5> | Fifth level heading with font size of .83em. | <h5>....</h5> |
| <h6> | Displays least significant details and has a font size of .67em | <h6>....</h6> |
Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at once. The several container tags in HTML are:
| Tags | Description | Syntax |
|---|---|---|
| <div> | Block element that defines a division in HTML document. | <div>... </div> |
| <span> | Inline element used to mark up a part of a text or document. | <span>...</span> |
| <p> | Used to represent a paragraph. | <p>...</p> |
| <pre> | Represents pre-formatted text to present exactly as written in the HTML file. | <pre>...</pre> |
| <code> | Used to represent source codes | <code>...</code> |
This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.
| Tags | Description | Syntax |
|---|---|---|
| <head> | Container for metadata which is data about data. | <head>...</head> |
| <link> | Used to link external style sheets or documents. | <link> |
| <meta> | Defines metadata about HTML document. | <meta/> |
| <title> | Defines the document's title | <title>...</title> |
| <style> | Used to define style information (CSS) for a document. | <style>...</style> |
Semantic Element in HTML are elements that clearly describe their meaning in terms of content and function, both to the browser and the developer.
| Tags | Description | Syntax |
|---|---|---|
| <header> | Used to give introductory content about the document. | <header>... </header> |
| <main> | Represents the main dominant content of a document. | <main>... </main> |
| <section> | Structural HTML element used to group together related elements. | <section>... </section> |
| <nav> | Represents a section of a page to provide navigation links | <nav>...</nav> |
| <article> | Represents a self-contained composition which is independently distributable or reusable. | <article>... </article> |
| <aside> | Defines some content aside from the content it is placed in. | <aside>... </aside> |
| <footer> | Represents a footer for its sectioning root element | <footer>... </footer> |
| <address> | Provides contact information for a person, people, or an organization. | <address>..</address> |
Text formatting tags in HTML, are used to format text in different ways, like making text bold, italicized, or monospaced. The HTML inline text semantics is used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
| Tags | Description | Syntax |
|---|---|---|
| <em> | Used to put stress on some text or show some degree of emphasis. | <em>...</em> |
| <strong> | Indicates that the content has strong importance. | <strong>...</strong> |
| <sub> | Writes the text as subscript. | <sub>...</sub> |
| <sup> | Writes the text as superscript. | <sup>...</sup> |
| <abbr> | Represents an abbreviation or acronym. | <abbr>... </abbr> |
| <mark> | Highlights important text for reference or notation purposes. | <mark>...</mark> |
| <cite> | Describes the title of a creative work. | <cite>...</cite> |
| <time> | Used to represent a specific period of time. | <time>...</time> |
List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be either numerical, alphabetic, bullet, or other symbols. There are three list types in HTML:
| Tags | Description | Syntax |
|---|---|---|
| <ul> | Represents an unordered list of items list. | <ul>...</ul> |
| <ol> | The HTML <ol> element represents an ordered list of items. | <ol>...</ol> |
| <li> | Represents an item in a list. | <li>...</li> |
| <dl> | Represents a description list. | <dl>...</dl> |
| <dd> | Used to describe a term/name in a description list. | <dd>...</dd> |
| <dt> | Specifies a term in a description. | <dt>...</dt> |
Table tags in HTML, such as <table>, <tr>, <td>, and <th>, are used to create and structure tables in HTML. They allow you to present data in rows and columns.
| Tags | Description | Syntax |
|---|---|---|
| <caption> | Specifies caption of a table. | <caption>…</caption> |
| <table> | Represents data in a two-dimensional table. | <table>…</table> |
| <thead> | Used to provide a header to the group of content in an HTML table | <thead>…</thead> |
| <tbody> | Used to group primary content of an HTML table. | <tbody>…</tbody> |
| <th> | Defines a cell as header of a group of cells of the table. | <th>…</th> |
| <td> | Defines a cell of a table. | <td>…</td> |
| <tr> | Defines a row in an HTML table. | <tr>…</tr> |
| <tfoot> | Defines a set of rows summarizing the columns of the table. | <tfoot>…</tfoot> |
An HTML form is a section of a document that acts as a container for different types of input elements, such as text fields, passwords, menus, checkboxes, radio buttons, submit buttons, etc.
Generally, Form tags in HTML, like <form>, <input>, <textarea>, and <button>, are used to create forms for user input.
| Tags | Description | Syntax |
|---|---|---|
| <form> | Represents a section containing controls for submitting information. | <form>...</form> |
| <input> | Creates interactive controls for forms to accept data. | <input>...</input> |
| <textarea> | Create a multi-line plain-text editing control | <textarea>...</textarea> |
| <select> | Represents a control that provides a menu of options to select from. | <select>...</select> |
| <option> | Defines an option in a select list. | <option>...</option> |
| <optgroup> | Creates a grouping of options within a <select> element. | <optgroup>.</optgroup> |
| <progress> | Displays an indicator showing the degree of completion of a task. | <progress>...</progress> |
| <datalist> | Used to give predefined options for an <input> element and adds an autocomplete feature to it. | <datalist>...</datalist> |
| <button> | Represents a clickable button. | <button>...</button> |
| <label> | Specifies a label for an <input> element. | <label>...</label> |
Multimedia tags in HTML, such as <img>, <audio>, and <video>, are used to embed multimedia content like images, audio files, and videos into your webpage.
| Tags | Description | Syntax |
|---|---|---|
| <img> | Used to link images to web pages. | <img /> |
| <audio> | Used to include sound content in documents. | <audio>...</audio> |
| <video> | Embeds a media player which supports video files in the document. | <video>...</video> |
| <figure> | Groups various diagrams, images, illustrations, and code snippets into the document. | <figure>...</figure> |
| <figcaption> | Used to provide the caption of the content. | <figcaption>...</figcaption> |
| <embed> | Embeds multimedia on a Web page | <embed>...</embed> |
| <object> | Includes objects, such as images, audio, videos, and Portable Document Format (PDF) on a Web page. | <object>...</object> |
Special characters and symbols in HTML, like & for an ampersand or < for a less-than sign, are used to display characters that have special meaning in HTML. Some of the most commonly used ones are:
| Symbol | Description | Entity Name | Number Code |
|---|---|---|---|
| © | Copyright | © | © |
| & | Ampersand | & | & |
| > | Greater than | > | > |
| < | Less than | < | < |
| $ | Dollar | $ | $ |
| " | Quotation mark | " | " |
| ' | Apostrophe | ' | ' |
Attributes in HTML are used to provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like name="value". The name is the property you want to set and the value is the desired value of the attribute.
| Attributes | Description | Syntax |
|---|---|---|
| alt | Used in the image tag to specify the alternative text of the image | < tag_name alt ="..." > |
| href | Used to define a hyperlink. | < tag_name href ="..." > |
| src | Specifies URL of the image to be used. | < tag_name src ="..." > |
| width | Specifies the width of the image in pixels. | < tag_name width ="..." > |
| height | Specifies the height of the image in pixels. | < tag_name height ="..." > |
| style | Helps to change the look and feel of the document. | < tag_name style ="..." > |
| id | Unique identifier used to specify an area of a webpage. | < tag_name id ="..." > |
| class | Specifies one or more class names for an element. | < tag_name class ="..." > |
| title | Specifies extra information about an element. | < tag_name title ="..." > |
| Placeholder | Specifies a short hint that describes the expected value of an input field/text area | <tag_name placeholder=" "> |
Link tags are used to define hyperlinks, which allow users to navigate between pages or sections within a webpage.
Tag | Description | Syntax |
|---|---|---|
Defines a hyperlink (used for linking to other pages or sections). | <a href="URL">Link Text</a> | |
Defines the relationship between the document and an external resource (usually for stylesheets) | <link rel="stylesheet" href="style.css"> |
HTML events are used to execute code when certain actions or user interactions occur. These can be applied to most HTML tags.
Event | Description | Syntax |
|---|---|---|
Occurs when an element is clicked. | <button onclick="alert('Clicked!')">Click Me</button> | |
Occurs when the mouse pointer is moved over an element. | <div onmouseover="changeColor()">Hover Me</div> | |
Occurs when the value of an element changes. | <input type="text" onchange="alert('Changed!')"> | |
Occurs when a page or image has loaded. | <img src="image.jpg" onload="alert('Loaded!')"> | |
Occurs when a key is pressed down. | <input type="text" onkeydown="checkKey()"> | |
Occurs when an element gains focus. | <input type="text" onfocus="this.style.background='yellow'"> |
An HTML Cheat Sheet is a handy tool that makes creating websites faster and easier, helps your site show up in search results, and lets you build web pages that everyone can use and enjoy.