/html_cheatsheet

This repository contains the cheat sheet for HTML. Fork it and you are good to go đź’» !

Primary LanguageHTMLMIT LicenseMIT

Getting Started With Web Development Cheatsheet day-2

HTML Cheatsheet

This repository contains the cheat sheet for HTML. Fork it and you are good to go đź’» !

Some Points to be noted:

  • 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 .html and you can open your .html file on any browser.

Some commonly used HTML tags:

  • !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.

Tags used in between the head 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.

Tags used in between the body tags:

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
  • <h1>......</h1>
  • <h2>......</h2>
  • <h3>......</h3>
  • <h4>......</h4>
  • <h5>......</h5>
  • <h6>......</h6>
 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:

HTML form cheatsheet is provided with example in form.html.