This repository contains the cheat sheet for HTML. Fork it and you are good to go 💻 !
- HTML : HyperText Markup Language
- We are working with the most recent version of HTML i.e. HTML5
- No such compiler needed. Can work with Notepad or can go for IDE platforms like VSCode, Atom, Sublime, etc.
- Always remember to save your html file with
.htmland you can open your.htmlfile on any browser.
- !DOCTYPE html : present at the outermost part of HTML document.
- <html>.....</html> : present at the outermost part of the HTML document, below <!DOCTYPE html>.
- <head>......</head> : the head of the document and remains in between the html tags. Contains the title, logo, meta tags, script and style tags.
- <header>.....</header> : mostly written after closing the head tag, i.e. after the head section and before the start of the body section. It is not a necessary tag to be used in your webpage, but can be used for inserting a navigation bar or for anything to display at the top portion of the webpage.
- <body>.....</body> : represents the main body of the webpage. Whatever you want to present in the body of the webpage, you have to write in between the opening and closing tags of the body tag. The body tag also hosts other tags.
- <title>......</title> : used for giving title to your webpage. The title of the webpage appears in the tab bar of the page when it is opened in the browser. If you don’t specify the title tag, then in the app bar of the browser, (your_filename).html will appear as the title of your webpage.
- <meta>......</meta> : present in between the head tags; helps in making your page responsive and also properly displayable on different devices. It also includes tags for SEO management. If you don’t use it, your webpage will be displayed , but it might not be responsive or SEO-friendly. All well-maintained websites contain meta tags.
- <script>......</script> : in between the head tags, this tag is used for importing external JS packages or external JS code. These tags can also be used for inline JS too. It is not mandatory to use these tags only in the head section; it can be used in the body section too.
- <style>......</style> : in between the head tags, this tag is used for importing external CSS packages or external CSS . These tags can also be used for inline CSS too. It is not mandatory to use these tags only in the head section; it can be used in the body section too.
| Tag Name | Information about the tag | Inline/Block level element |
|---|---|---|
| <section>......</section> | Represents a particular section of the body of your webpage | Block-level |
| <article>......</article> | Represents a particular portion of the webpage body. Used for the 'article-type' look. | Block-level |
| <p>......</p> | Represents paragraphs in the webpage body. | Block-level |
| <span>......</span> | used to focus a particular element in your paragraph, section or article tags. Also used without the before-mentioned tags. | Inline |
| <div>......</div> | used to focus a particular 'division' or portion in your webpage. The div tag may contain p,article, section tags and many other tags as well. | Block-level |
| <b>......</b> | used for making text bold. Text written in between these two tags will apppear bold in the webpage. | Inline |
| <i>......</i> | used for making text italic. Text written in between these two tags will apppear italic in the webpage. | Inline |
| <u>......</u> | used for underlining text. Text written in between these two tags will apppear underlined in the webpage. | Inline |
| <button>......</button> | HTML button | Inline |
| <code>......</code> | for putting piece of code in HTML | Inline |
| <pre>......</pre> | preformatted text | Block-level |
| <a href=”(source)” target=”_blank”(if you want the open the page in a new tab or you can leave it blank if you want to show it in the same tab)>......</a> | used to anchor a webpage with another webpage (i.e. forming a passage between the two pages). You can navigate from one page to another with the help of the anchor tag. But the anchor page needs an address and that address is provided by the href within the anchor tag. | Inline |
| <img src="(source)" alt="alternative_text">......</img> | can be used with or without its closing tag. Used to include image in your webpage.You specify the image path in the src part.Both height and width specified must have the same units. | Inline |
| <br> | used for line breaks. | Block-level |
| <ul>......</ul> | used for unordered list. The tag used to assign elements in the list as list-items is the <li>......</li> tag. | Block-level |
| <ol>......</ol> | used for ordered list. The tag used to assign elements in the list as list-items is the <li>......</li> tag. | Block-level |
Header tags
|
mainly used to represent something as headers or headings. | Block-level |
| <sup>......</sup> | used for superscripting a text. | Inline |
| <sub>......</sub> | used for subscripting a text. | Inline |
| <table>
<tr> <th>......</th> </tr> <tr> <td>....</td> </tr> </table> |
HTML table struture | Block-level |
HTML form cheatsheet is provided with example in form.html.