HTML FUNDAMENTAL TAGS

BASIC TAGS

In this post (HTML Fundamental Tags) we will analyze together some of the most common HTML tags, with which every Web Developer should be very familiar. Tags (labels) allow us to assign a role and a disposition to the contents of our pages, for example we can distinguish the title from the paragraphs. Each HTML element has a default display value, depending on the element type which can be block and inline.

• Block Level elements

1. Always start on a new line.
2. It always occupies the entire available width (extends from left to right as much as possible).
3. It has a top and bottom margin, while an inline element does not.

• Inline elements

1. 1. It does not start on a new line.
   2. It only occupies the necessary width.

The Block Level elements that we will see in this post are the headers or headers from <h1> to <h6> the paragraphs tag <p> and i <div>. Examples of inline elements are: <span>, <em>, <strong>, <br>.

DESCRIPTION OF THE TAGS USED IN THE ARTICLE

I give you a brief description on the tags we will analyze.

• The <h1> – <h6> tags are used to define HTML headers. <h1> defines the most important title while <h6> defines the least important header, use only one <h1> per page this should represent the main header / object for the whole page. Also, don’t skip header levels – start with <h1>, then use <h2> and so on.
• <p> represents an HTML paragraph. Browsers automatically add a single blank line before and after each paragraph.
• <strong> inline element that formats text in bold. Preferred in HTML5 to the deprecated <b> tag.
• <em> is used to define emphasized text. The content inside is usually displayed in italics. Preferred to the <i> tag as it is deprecated.
• The <div> tag defines a division or section in an HTML document, is used as a container for HTML elements, which are then styled with CSS or manipulated with JavaScript. It can be easily stylized using the class or id attribute. Any type of content can be placed inside the <div> tag, and by default, browsers always insert a line break before and after the element.
• The <span> tag is an inline container used to mark a part of a text or a part of a document, it can be easily stylized by CSS or manipulated with JavaScript, using the class or id attribute. The <span> tag is very similar to the <div> element, but <div> is a block-level element and <span> is an inline element.
• <br> Break Line is for going to head.

Although the sample code will be available on GitHub I recommend that you open your favorite editor and write the code. This will help you memorize the various tags used in the post, and once you open the document in the Chrome browser, keep half of the editor window open while the other half of the screen keeps the browser open. For each change made to the HTML document, just refresh the browser to view the changes immediately.

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB