A beginner's guide to HTML
Hi, I'm an undergraduate student majoring in computer science and engineering. I'm learning full stack development right now and trying to share my learnings here. I'm enthusiastic about exploring new technologies. Apart from that, I am a sports enthusiast and enjoy watching test cricket.
Block-level Elements vs Inline-level Elements
This is an important concept to understand. Most of the elements or tags in HTML are either block-level or inline-level elements.
Block-level elements: In simplest words, we can say that these are the ones that occupy an entire block or line, i.e. entire width of the page. We cannot have 2 block elements in the same line (we can override the default behaviour using CSS). Examples of the most common block-level elements are given below in the HTML elements section in detail.
Inline-level elements: As the name goes, these elements are the ones that occupy only a little space in a line, not the entire width of the page. We can have 2 or more inline-level elements in the same line (again we can alter default behaviour using CSS). Examples of the most common inline-level elements are given below in the HTML elements section.
div and span elements: These are 2 very useful tags. They don't have any specific meaning, they are just used when we don't have any of the other appropriate tags for the purpose and want to store some chunks of text. For storing in a bigger space, we use <div> ...content </div> as it is a block-level element. For storing in a smaller space, we use <span> ...content </span> as it is a inline-level element.
// using div, a block-level element
<div> My </div>
<div> name </div>
<div> is Jake </div>
// output will look like
/* My
name
is Jake */
// in the same example above, if we use span instead of div, output will be
// My name is Jake
// this is because span is a inline-level element
Class and id attribute: The difference between these two is that id is a unique identifier, whereas class is used to identify multiple elements with the same class name. They both are generally used by CSS files and JavaScript files. id is used as <element id="idName"> and it is identified by a # and id name. Class is used as <element class="className"> and it is identified by a . (dot) and class name.
Knowledge of these above topics helps us while learning CSS, you can check my blog on CSS basics here.
HTML elements/tags
There are a lot of elements in HTML. We are going to see the most common and useful ones:
Structure-based elements:
Note: All of the following tags are block-level elements.
- HTML: This is the main and outermost tag in which all other tags are contained. It is used as
<html> ...content... </html>.</html>has to be the last line of the file. This is also called the root element. - Head: This is a tag that contains the title of the webpage and metadata which contains information about the page and links to the styles page. It is used as
<head> ...content... </head>. - Body: This is the tag where we put in all of our main content whatever is to be displayed on the webpage. Every other tag below this is inside this tag only. It is used as
<body> ...content... </body>. must be the 2nd last line of the line. - Header: It is to be used for all the content that needs to be put at the topmost part of the page. It is used as
<header> ...content... </header>. - Navigation: It is used just below the heading of the page, it can be used inside the header (preferably as navigation to different pages is usually at the top). It is used as
<nav> ...content... </nav>. - Section: This element is used to break all related content in sections, so that we can even style them accordingly. It is used as
<section> ...content... </section>. - Footer: As the name suggests, this tag must be at the bottom of the page, as we need all content in the footer like social-media links to be displayed after the main content. It is used as
<footer> ...content... </footer>.
Text-based elements:
Note: These are usually used inside the structure-based elements. Again, all of the following tags are block-level elements.
- Headings: There are 6 different heading tags h1, h2, h3, h4, h5, h6 available based on their sizes.
<h1>being the biggest and<h6>being the smallest. For example, h1 is used as<h1> ...content... </h1>. - Paragraphs: While writing some text, we generally use paragraphs after the heading, for that purpose we have this tag. It is used as
<p> ...content... </p>. - Unordered lists (ul): Used to make a list when sequence of the list items (li) does not matter. Using
<ul>tag tells the browser that it is an unordered list. It is used as<ul><li>List item 1</li></ul>. The<li>tag is used to represent each list item, we use multiple<li>tags inside the<ul>tag. - Ordered (ol): Used to make a list when sequence of the list items (li) matters. It is used as
<ol><li>List item 1</li></ol>. The<li>tag is used to represent each list item, we use multiple<li>tags inside the<ol>tag. The difference between<ol>and<ul>is important for browsers. It is a good practise to use<ol>tags when we know that order of list items is important.
Few more important elements:
Note: All of the following are inline-level elements.
- Anchor tag: One of the most important tags is the anchor tag, we all know how important it is to be able to link pages, to move from one source to another. In the anchor tag
href(hyperlink reference) attribute is used to create hyperlinks. To open a link in a new tab we use attributetarget="_blank". It is used as<a href="the link you want" target="_blank"> text or image </a>. - Button: It is an element that tells us whether the user has interacted with the webpage. As the user clicks on the button, the browser sends information that a click event has happened, we need to process and provide the output. It is used as
<button>Button content</button>. Whenever we want the user to be directed to a new page on clicking a button, we can use the button tag, inside the anchor tag.
The script tag
Why is it needed? Long answer short, to use the JavaScript language in an HTML page. We saw the basics of JavaScript in the previous blog, you can check it here.
We use this tag in the <body> tag of HTML, and it is important to use it at the end part of the <body>, because if we use it at the start it will show us an error as we try to access inputs, and other HTML elements required in the code that the HTML file has not even rendered on the page yet.
Now, coming to the attributes of <script>, we have the type, language and src attributes. In HTML5 which is used now, we don't need to use the type attribute anymore. Also, the language attribute, which tells the language of the code is not needed as the default language of <script> tag is JavaScript. We will talk about the src attribute below.
We can use the <script> tag either like a normal HTML tag, by putting the code content between the opening and closing tag, this is called an internal script. This is not recommended when the JavaScript code is too long, for that purpose we use an external script. External script means we code JavaScript in a different file and link the code source in the <script> tag. Here's where the src attribute is needed. There are 2 ways which I am aware of, see the syntax below to understand.
// method 1 - when code file is present in same folder as HTML file
<script src="code.js"></script>
// code.js must be present in the same folder
// method 2 - when code file is not present in the same folder as HTML file
<script src="/path/to/code.js"></script>
// give the path of the folder where code.js is present
Note: Never use both internal and external scripts together as the internal one will get ignored only external script will be processed. If we need to import multiple code files, we need to use the script tag multiple times...
<script src="code1.js"> </script>
<script src="code2.js"> </script>
It is a good practice to use external scripts, as we can reuse the code files and another reason being that since it will be a different file, the browser will download it and store it in the cache, other pages that use it will not download the file again, making the process faster.
