Welcome to learn the Basics of HTML✨
First of all, let me highlight this 👉. Even though the title has been mentioned as a Beginners guide, ‘ This is not solely for the absolute beginners. This is an article for anyone and everyone who loves to gain knowledge, improve their skillset, who felt like they forgot some stuff and need a pinch of a reminder, as well as for anyone who loves to read tech stuff.🔥
So when comes to this topic, this topic has been broken down into digestible, easy to understand pieces. With highlighting that, let me walk you through what will include in this article.👇
This article would give a thorough knowledge of the Fundamentals of HTML, which will start off with the introduction, then moves to the layout, with that knowledge we’ll move to basic syntax, attributes, elements etc.. and last but not least this article would end with a small practical session.
LET’S BEGIN
With that introduction, I hope you are ready now?💪
Put your left foot forward to walk through the knowledge transfer in fundamentals of HTML 😉
LET’S BEGIN WITH THE INTRODUCTION 🔥
What is HTML? 🤔
- HTML stands for ‘ Hypertext Markup Language ‘, it allows web users to create and structure sections, paragraphs, and links using elements, tags, attributes etc.
- In other words, this is a startup language that use to describe the structure when creating a web page. Moreover, HTML consists of a series of elements that will tell the browser how to display the content.
- Note:- HTML is not considered a programming language as it can’t create dynamic functionality.
What is HTML Layout?
When come to the layout it is what defines the appearance of a website.
When you explain it in a descriptive manner, you can say HTML layout is a structure that helps the user navigate through web pages easily. It is a way in which you can design web pages using simple HTML tags.
Let's roll up our sleeves and, take a closer look at what has just been explained🧐👇
- <header>:- Defines a header for a document or a section
- <nav>:- Defines a set of navigation links
- <section>:- Defines a section in a document
- <article>:- Defines an independent, self-contained content
- <aside>:- Defines content aside from the content (like a sidebar)
- <footer>:- Defines a footer for a document or a section
- <details> :- Defines additional details that the user can open and close on demand
- <summary> :- Defines a heading for the <details> element
Now you know what is HTML with that knowledge we’ll dig deep into the fundamentals of HTML
Basic Tags of HTML
You might be asking what are HTML tags? 👉 Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets.
Following are the Basic Tags of HTML
🟠Head Tag <head>
- It’s the element of the HTML document and the collection of metadata for the Document.
- The HTML <head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets
<html lang="en">
<head>
<title>
Document
</title>
</head>
</html>🟠Link Tag <link>
- The HTML <link> element specifies relationships between the current document and an external resource.
- Possible uses for this element include defining a relational framework for navigation.
- This Element is most used to link to style sheets
<link href="style.css" rel="stylesheet">🟠Meta Tag <meta>
- The HTML <meta> element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>, <style> or <title>).
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
</head>Depending on the attributes set, the kind of metadata can be one of the following:
- If http-equiv is set, it is a pragma directive, i.e. information normally given by the webserver about how the web page should be served.
- If charset is set, it is a charset declaration, i.e. the charset used for the serialized form of the webpage.
- If the name is set, it is document-level metadata, applying to the whole page.
- Important Note 💥:- Setting the meta name as follows will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling. In a simple format, it will create a responsive website
Here is a small instance of a web page without the viewport meta tag, and the same web page with the viewport meta tag for your greater understanding 👇
🟠Title Tag <title>
- The HTML <title> element defines the title of the document, shown in a browser’s title bar or on the page’s tab. Simply means the Document title or name.
- Note:- It can only contain text, and any contained tags are ignored
<title> Fundamental of HTML </title>🟠Body Tag <body>
- The HTML <body> Element represents the content of an HTML document or in other words main content of the document.
- ***There can be only one element in a document.
<body>
<div class="main">
<h1>
Fundamentals of HTML
</h1>
<p>
Learning always makes you a better man
<span class="insta_image">
<img src="../images/Instagram.svg" alt="insta image">
</span>
</p>
</div>
</body>🟠Footer Tag <footer>
- The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element.
- A footer typically contains information about the author of the section, copyright data or links to related documents.
<footer> Some copyright info goes here </footer>🟠Style Tag <style>
- The HTML <style> element contains style information for a document, or part of a document or in other words style tag embed style information in the documents.
- By default, the style instructions written inside that element are expected to be CSS.
<head>
<style type="text/css">
body {
font-family: "Avenir Heavy";
}
</style>
</head>🟠Div Tag <div>
- The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything.
- It can be used to group elements for styling purposes (using the class or id attributes).
<div class="main">
<h1>
Fundamentals of HTML
</h1>
</div>🟠Span Tag <span>
- The HTML element is a generic inline container for phrasing content, which does not inherently represent anything.
- Same as div tag It can be used to group elements for styling purposes (using the class or id attributes),
<p>
Learning always makes you a better man
<span class="insta_image">
<img src="../images/Instagram.svg" alt="insta image">
</span>
</p>Likewise, <span> is very much like a <div> element, BUT <div> element is used for block-level organization and styling of page elements <span> element is used for inline organization and styling. Check follow for further understanding👇
What’s the exact difference between ‘block-level element and inline element’? 🤔
- Block-level elements begin on a new line, stacking one on top of the other, and occupying any available width. Block-level elements may be nested inside one another and may wrap inline-level elements.
- Inline-level elements do not begin on a new line. They fall into the normal flow of a document, lining up one after the other, and only maintain the width of their content. Inline-level elements may be nested inside one another; however, they cannot wrap block-level elements.
🟠Heading Tag <h1> — <h6>
- Using <h1> to <h6> for the heading tags will show the headings for the current section.
- As mentioned above Heading elements implement six levels of document headings, <h1> is the most important and the largest and <h6> is the least important and the smallest heading.
<body>
<!-- largest heading -->
<h1> Lorem ipsum </h1> <h2> Lorem ipsum </h2> <h3> Lorem ipsum </h3> <h4> Lorem ipsum </h4> <h5> Lorem ipsum </h5> <!-- smallest heading -->
<h6> Lorem ipsum </h6>
</body>
🟠Paragraph Tag <p>
- The HTML <p> element (or HTML Paragraph Element) represents a paragraph of text.
- Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.
- Paragraphs are block-level elements.
<p> Learning always makes you a better man </p>🟠Anchor Tag <a>
- The HTML Anchor Element (<a> tag) defines a hyperlink to a location on the same page or any other page on the Web.
<a href="https://www.w3schools.com">Visit W3Schools </a>🟠Header Tag <header>
- The HTML <header> element represents a group of introductory or navigational aids.
- It may contain some heading elements but also other elements like a logo, wrapped section’s header, a search form, and so on.
<header>
<h1>Main Page Title</h1>
<img src="logo-sm.png" alt="logo">
</header>hmm.. now you might be thinking What is the Difference between <header> and <head> ?🤔 Let me explain it to you
- The <header> element is a structural element that outlines the heading of a segment of a page. It falls within the <body> element.
- The <head> element is not displayed on a page and is used to outline metadata, including the document title, and links to external files. It falls directly within the <html> element.
🟠Article Tag <article>
- The <article> element is used to identify a section of independent, self-contained content that may be independently distributed or reused.
- We’ll often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and the like.
<article class="ureview">
<p>I love this tool.</p>
<footer>
<p> Posted on
<time datetime="2022-03-25 19:00">March</time>
by Matt.
</p>
</footer>
</article🟠Section Tag <section>
- The <section> element is commonly used to break up and provide hierarchy to a page.
- The grouping of content within the <section> element may be generic in nature, but it’s useful to identify all of the content as related.
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>🟠Button Tag <button>
- The HTML <button> Element represents a clickable button.
<button name="button"> I am a button. Click me! </button>🟠Line breaking Tag <br>
- The HTML element line break <br> produces a line break in the text, or in other words, it provides empty elements without a closing tag ( HTML elements with no content ).
<p>
Review Squirrel
<br> 99 Elizabeth Street
<br> Australia
</p>
Phew… 😅 this will be the ending of Basic tags. These are the most often used basic tags, but apart from these, there are a lot more tags in HTML. If you did a bit of research, you’ll be able to learn lot more tags in addition to these.
Basic Attributes of HTML
Attributes define additional characteristics or properties of the element and are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name=” value”. Moreover, Attribute values should always be enclosed in quotation marks.
🔴 The href attribute
- As mentioned in the Basic tags the <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
<a href="https://www.w3schools.com">Visit W3Schools</a>🔴 The src attribute
- The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed
<img src="img_girl.jpg">🔴 The width and the height attribute
- The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels).
<img src="img_girl.jpg" width="500" height="600">🔴 The alt attribute
- The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.
<img src="img_girl.jpg" alt="Girl with a jacket">🔴 The style attribute
- The style attribute is used to add styles to an element, such as color, font, size, and so on.
<p style="color:red;">This is a red paragraph.</p>🔴 The title attribute
- The title attribute defines some extra information about an element.
- The value of the title attribute will be displayed as a tooltip when you mouse over the element
<p title="I'm a tooltip">This is a paragraph.</p>🔴 The lang attribute
- You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>HTML Formatting Elements
HTML Formatting is a process of formatting text for a better look and feel. HTML provides usability to format text without using CSS. There are many formatting tags in HTML, but these tags are used to make text bold, italicized, or underlined and so on.
Furthermore, in HTML the formatting tags are divided into two categories:
- Physical tag: These tags are used to provide a visual appearance to the text.
- Logical tag: These tags are used to add some logical or semantic value to the text
Here are the HTML Formatting Elements
🔹<b> — Bold text
- This is a physical tag, which is used to bold the text written between it.
<p> <b> Write Your First Paragraph in bold text.</b> </p>🔹<strong> — Important text
- This is a logical tag, which tells the browser that the text is important.
<p> <strong> Write the Second Paragraph in Strong </strong>, text</p>🔹<i> — Italic text
- This is a physical tag that is used to make the text italic.
<p> <i> Write Your Third Paragraph in italic text.</i> </p>🔹<em> — Emphasized text
- This is a logical tag that is used to display content in italic.
<p> <em> This is an Fourth content </em>, which displayed in italic font.</p>🔹<mark> — Marked text
- This tag is used to highlight text.
<h2> Fifth Sentence would <mark> Mark </mark> as done </h2>🔹<small> — Smaller text
- This tag is used to decrease the font size by one unit from the base font size.
<p>Hello <small> Write the tenth paragraph in smaller font.</small></p>🔹<del> — Deleted text
- This tag is used to display the deleted content
<p>Hello <del> Delete your Eigth paragraph.</del> </p>🔹<ins> — Inserted text
- This tag displays the content which is added
<p> <del> Delete your Eigth paragraph.</del> <ins> Write your Ninth paragraph.</ins> </p>🔹<sub> — Subscript text
- It displays the content slightly below the normal line.
<p>Hello <sub> Write Your Seventh Paragraph in subscript.</sub> </p>🔹<sup> — Superscript text
- It displays the content slightly above the normal line.
<p>Hello <sup> Write Your Sixth Paragraph in superscript.</sup> </p>
NEXT UP🔥
As Steve Jobs said 👇
Learn Continually There’s always ‘One More Thing’ to learn.
So if you feel like you are bored, why not make a cup of coffee☕️, energize yourself 💪 and let’s get back on track💻. There are a few more things for us to learn before ending this.
HTML Links
HTML links are hyperlinks. You can click on a link and jump to another document. And when you move the mouse over a link, the mouse arrow will turn into a little hand.
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
For further knowledge, there are two types of URLs called Absolute URL and Relative Url, some of you might have heard it some of you might not. So let me walk you through the difference between Absolute URL and Relative URL
Absolute URL
<h2>Absolute URLs</h2>
<p><a href="https://www.google.com/">Google</a></p>When you are using a full web address in the href attribute as mentioned in the above code snippet, it’s called Absolute URL
Relative URL
<h2>Relative URLs</h2>
<p><a href="/css/default.asp">CSS Tutorial</a></p>When you are using a local link ( a link to a page within the same website ) inside href attribute, is specified with the Relative URL.
Now let’s move to the ways of using links in HTML
🔸Use an Image as a link
- To use an image as a link, just put the <img> tag inside the <a> tag.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>🔸Link to an Email Address
- Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
<a href="mailto:someone@example.com">Send email</a>🔸Link to a phone number
- Use tel: inside the href attribute to create a HTML phone number
<a href="tel:+15555551212">555-555-1212</a>🔸Button as a link
- To use an HTML button as a link, you have to add some JavaScript code.
<button onclick="document.location='default.asp'">
HTML Tutorial
</button>🔸Link to Titles
- The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">
Visit our HTML Tutorial
</a>HTML List
HTML lists are used to present a list of information in a well-formed and semantic way.
Simple Example
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Nesting a List
<ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li> <!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
There are three different types of lists in HTML and each one has a specific purpose and meaning.
- Unordered list — Used to create a list of related items, in no particular order.
- Ordered list — Used to create a list of related items, in a specific order.
- Description list — Used to create a list of terms and their descriptions.
🔸Unordered List
- An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default
- In other words unordered list = Simple list shown above
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>🔸Ordered List
- An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>🔸Description List
- A description list is a list of terms, with a description of each term.
- The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
</dl>HTML Favicon
At the beginning stages, I was really confused about how to add that small image which is located in the browser tab😁. So if you also confuse about how to that small image or logo if we say in the browser tab, let me walk you through how by first explaining what is meant by favicon.
What is Favicon?
A favicon is a small image displayed next to the page title in the browser tab.
How to add a favicon?
- To add a favicon to your site, create a folder in your project directory called images (if you don’t already have one) and save your desired favicon image in this folder.
- To add a favicon to your site, create a folder in your project directory called images (if you don’t already have one) and save your desired favicon image in this folder.
- Make sure to replace Favicon_Image_Location with the relative file path of your favicon image. Save the index.html file and reload it in your web browser. Your browser tab should now contain a favicon image
Basic Knowledge of HTML Table
HTML table is a structured set of data made up of rows and columns
Table can be created using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.
Basic Structure of the table
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
Defining a Table Header, Body, and Footer
HTML provides a series of tags <thead>, <tbody> and<tfoot> that helps you to create a more structured table, by defining header, body and footer regions, respectively.
- <thead> is used to enclose a group of rows in a table as a header.
- <tfoot> is used to enclose a group of rows in a table as a footer, such as the last row for the summary.
- <tbody> is for the main body of the table.
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot> </table>
PRACTICAL SESSION🔥
Last but not least, as promised since you have been reading this for a few minutes, you might have already felt fed up and bored by now, to get rid of that let us do a small practical session together and end this article with a thorough knowledge of HTML.😎💪
01) We’ll begin by making our “Styles Conference” text inside the <h1> element within our <header> element link to the index.html page.
02) Then we’ll add ‘August 24–26th — Chicago, I’, sentence inside a <h3> tag
03) In order to navigate across all of the different pages, we’re going to add in a navigation menu, using the <nav> element, within our <header> element. We’ll be creating Speakers, Schedule, Venue, and Register pages to go with our home page, so we should create links for all of them.
04) Just below our header tag, we’ll include a section for the registration option.
05) Inside that Section we’ll include a <h2> tag mentioning the ‘Dedicated to the Craft of Building Websites’ heading and a <p> tag mentioning ‘Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!’.
06) And place a link for the registration below the paragraph. The text of the link should be mentioned as ‘Registration Now’
07) Finally, let’s also add the same navigation menu from our <header> element to our <footer> element for convenience.
ARE YOU DONE????
Feel free to check the following code snippets as the answers to Practical Session...
<body> <!-- Header -->
<header>
<h1>
<a href="index.html">Styles Conference</a>
</h1>
<h3>August 24–26th — Chicago, IL</h3>
<nav>
<a href="index.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav>
</header> <!-- Registration -->
<section>
<h2>Dedicated to the Craft of Building Websites</h2>
<p>
Every year the brightest web designers and front-end
developers descend on Chicago to discuss the latest
technologies. Join us this August!
</p>
<a href="register.html">Register Now</a>
</section> <!-- Footer -->
<footer>
<small>© Styles Conference</small>
<nav>
<a href="index.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav>
</footer></body>
SUMMARY
Let me end this article with a small metaphor that describes how components of HTML and CSS work together. ‘ If a web page is like a house, HTML is the blueprint and CSS is the interior decorating scheme’.
As this article contains the knowledge of ‘Fundamentals of HTML’, which included the Introduction to HTML, Basic Syntax, Attributes, Formatting Elements, HTML links, table and favicon. I suppose that we have done with the blueprint👍.
Now be ready to do the interior decoration in the upcoming article by learning the Fundamentals Of CSS😆.
I hope this article has been helpful to you, if so hit a clap👏 and let me know. As well as feel free to leave your thoughts and feedback on the comment section.
Thank you for checking this out and checkout my other articles by clicking the following link 👇
