Brief overview of some basic HTML tags

Some basic HTML tags developers/designers use regularly explained below.

<blockquote> – you can use it for longer, multi-lines quotations from a different source than the rest of the content. They are usually indented by browsers
<cite> – the text within a cite tag should be the name of a third-party work such as a literary work, opera, play, etc.
<div> – this tag can hold any content; it is a block-level element so upon adding it, the content inside it will be on a new line, separated from the surrounding elements and the content inside could take the entire horizontal/vertical space, restricted only by its own container/parent tags
<span> – this tag is an inline-element and does not change the layout of the content inside it; it is useful for enclosing text that would be later processed with JavaScript, amongst other uses.
<b> – This inline element is usually rendered in bold by browsers
<em> – use this inline element for emphasized text
<small> – enclose text that should be in a smaller font size in the tag; such as legal information
<strong> – this tag can be used to denote important text that is still not considered a heading
<h1>, <h2>,<h3>,<h4>,<h5>,<h6> – Those are the headings of the document; the most important pieces for the audience. Their importance decreases the higher the number is – thus, <h1> is the most important title of the given webpage.
<form> – This block-level element represents the beginning of a form where users can perform action. You can use the action= attribute to pinpoint what webpage would process the form. Inside the form, you can put tags which require user input and those would be passed down to the webpage in the action attribute or to the same page, if action is empty or blank.
<textarea> – this is a multi-line user input box where users could type. There are numerous useful attributes for it such as required (to submit the parent form, users need to type something in the textarea), placeholder (a text that is shown when the textarea is empty and the user is not typing in it), rows (how many rows the textarea should take by default), cols (how many horizontal cells the textarea should consist of by default), autocomplete (whether the browser should try to autocomplete the textarea with previous user inputs and suggestions) and more that can be checked out at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
<input> – this tag is also used to require user input but has numerous forms. Using its type attribute, you can require different types of inputs – type=’text’ would be a simple text input (which is used by default), type=’checkbox’ would force the browser to render it as a box that can be ticked and so on. All available input types can be seen at: http://www.w3schools.com/tags/tag_input.asp
<select> – This tag is typically used for creating dropdowns. You nest <option> tags within it for each dropdown item that you want it to have.
<a> – The anchor inline element is quite important; it takes a href attribute that creates links in the web possible. <a href=’http://site.com’> would create a link that takes visitors to site.com when clicked.
<table> – tables contain <tr> tags (table row), which themselves contain <th> tags (table heading) and <td> (table data) tags to achieve an ordinary-looking table. There are also other tags and attributes that can come to play with tables
<img> – this good old tag is used to add an image to the document using its src attribute, it can take an absolute (http://site.com/img.jpg) or relative path (relative to the page’s location on the server – /img.jpg) like this: <img src=’/img.jpg’>
<code> – you can nest computer code inside this tag
<pre> – this tag is used for preformatted text; text inside it will be formatted as it appears within the document and not according to the HTML syntax (for example, 5 spaces between words in the <pre> tag would still appear as 5 spaces instead of being trimmed down to 1 space)