What is HTML?
Hypertext Markup Language refers to a computer language used to create most web pages and online applications. A hypertext is a text that references other parts of a text, whereas a markup language is a set of symbols that tell web servers about a document’s style and structure. In addition, HTML is the foundation of the W3. In addition, hypertext can include tables, lists, forms, graphics, and other presentational features besides text. The latter format for sharing data through the Internet is adaptable, and it is also easy. Markup languages employ markup tags to characterize text elements inside a document, giving web browsers instructions on displaying the material.
Tim Berners-Lee created the HTML markup language in 1990. And is the “Father of the Internet.” The World Wide Web Consortium (W3C) took up HTML’s specifications maintenance in 1996. HTML officially became an international standard (ISO) in the year 2000. HTML5 is the most recent HTML version allowing a more efficient and reliable web development process.
Since HTML cannot develop dynamic functionality, it is not considered a programming language. Instead, online users can utilize HTML elements, tags, and attributes to design and organize sections, paragraphs, and links.
This article will cover the fundamentals of HTML, such as how it works, its advantages and disadvantages, and how it interacts with CSS and JavaScript.
What can HTML do for you?
- Text, photos, lists, tables, and other types of documents can all be published online.
- Hyperlinks allow you to access web resources such as images, videos, and other HTML documents.
- You can use forms to collect information from users, such as their name, email address, and comments.
- Images, videos, sound clips, flash movies, programs, and other HTML documents can all be included right within an HTML document.
- You can make an offline version of your website that works even if you don’t have access to the Internet.
- You can save information in the user’s web browser and retrieve it later.
- You can determine the visitor’s current location on your website.
The list does not end there; HTML allows you to accomplish a variety of other intriguing things.
How does HTML operate?
A typical website has several separate HTML pages. The most common include home, about, and a contact page, each with their HTML files.
HTML documents are files with the extensions .html and .htm. The HTML file is read by a web browser, rendering the material for internet users to see.
Every HTML page has a set of HTML elements, which are a collection of tags and attributes. A web page’s building components are HTML elements. A tag is responsible for informing the web browser where an element starts and stops, whereas an attribute describes an element’s qualities.
An element’s three primary sections are:
- The opening tag specifies where an element begins to take effect. Angle brackets that open and close are wrapped around the tag. To make a paragraph, for example, use the start tag <p>.
- The output that other users see is called content.
- The closing tag has the name preceded by a forward slash. However, the opening tag does not. For example, to finish a paragraph, </p>.
When these three pieces are combined, you’ll get the following HTML element:
<p>In HTML, this is how you add a paragraph. </p>
The attribute of an HTML element, which has two sections – a name and an attribute value – is also essential. The attribute value specifies the additional information that a user wants to add, while the name indicates the other information that a user wants to add.
A style element with the color purple and the font family verdana, for example, will appear like this:
<p style="color:purple;font-family:verdana"> In HTML, this is how you add a paragraph. </p>
Although most elements have an opening and closing tag, some elements, such as empty elements, do not require closing tags to function. Because they don’t have any content, these components don’t have an end tag:
<img src="/" alt="Image">
The src attribute specifies the picture path, and the alt attribute, which determines the descriptive text, is presented in this image tag. It, however, lacks both content and an end tag.
HTML Tags and Elements Most Commonly Used
There are currently 142 HTML tags that can be used to create different elements. Even though some of these tags are no longer supported by newer browsers, understanding all of the distinct aspects accessible is still beneficial.
The most often used HTML tags and two main elements – block-level elements and inline elements – will be discussed in this section.
Elements at the Block Level
A block-level element takes up a page’s entire width. In the document, it always starts a new line. So a heading element, for example, will be on a different line than a paragraph element.
These three tags are used on every HTML page:
- The <html> tag is utterly the root element. Note that it defines the whole document.
- The <head> tag contains metadata like the page’s title and charset.
- The <body> tag encloses all of the text on the page.
<html>
<head>
<!-- CODEUNDERSCORED META INFORMATION -->
</head>
<body>
<!-- CODEUNDERSCORED PAGE CONTENT -->
</body>
</html>
The following are some more prominent block-level tags:
Heading tags – these range in size from <h1> to <h6>, with <h1> being the largest and <h6> being the smallest.
The Value of Headings
HTML headers provide helpful information by identifying essential subjects and the document’s structure; therefore, they should be optimized appropriately to enhance users’ experience. Because search engines like Google utilize headings to index the structure and content of web pages, make sure you use them appropriately in yours.
List tags come in a variety of shapes and sizes. For an ordered list, use the <ol> tag, and for an unordered list, use the <ul> tag. Then, using the <li> </li> tag, surround individual list items.
Elements that appear inline
The inner content of block-level components can be formatted with inline elements, such as adding links and emphasized strings. The most typical application of inline elements is to format text without interrupting the flow of the material.
A <strong> tag, for example, will make an element bold, whereas a <em> tag will make it italic. Inline elements with a <a> tag and a href property to identify the link’s destination are known as hyperlinks:
<a href="https://example.com/">Click me!</a>
What is the difference between HTML and HTML5?
There were 18 tags in the first version of HTML. Every successive version since then has added additional tags and properties to the markup. The introduction of HTML5 in 2014 was the most significant improvement to the language to date.
HTML5 supports new types of form controls, which is the fundamental distinction between HTML and HTML5. HTML5 also included additional semantic elements, such as <article>, <header> , and <footer>, that explicitly explain the content.
This article will cover an overview of the three core stages of being a pro in HTML. These steps include understanding the basics, mastering the fundamentals, and excelling in the advanced features of HTML 5.
Basics of HTML
The basics of HTML covers concepts of elements and attributes, how to format text using HTML tags, how to add style information to a document, how to insert images and tables, how to create lists and forms, and how to include other HTML documents inside the current document, and so on.
Before beginning coding in HTML, a simple text editor and a web browser are all you need to start coding HTML. There are numerous editors for you to choose from – Notepad++, Komodo Edit, Atom, Sublime Text 3, Visual Studio Code, or Webstorm. Either way, each one of them will get the task done.
Successively any HTML file you create should end in .html; for example, if the name of our document is the index, then the complete file name will be index.html. Finally, the latter is ready to run on the browser.
Now, we will proceed to cover the must-know basics for HTML. These include but are not limited to :
Tags and Elements in HTML
HTML is authored using HTML elements, which are made up of markup tags. HTML’s markup tags are its most essential feature. Every markup tag, such as <html>, <head>, <body>, <title>, <p>, and so on, is made up of a keyword enclosed by angle brackets.
HTML tags are usually used in pairs, such as <html> and </html>. The start tag in a pair is the beginning, while the closing tag is referred to as the end tag.
Syntax of HTML Elements
An HTML element is an HTML document’s component that is separate from the rest of the document. It is a symbol for semantics or meaning. The title element, for example, represents the document’s title.
A start tag (or opening tag) and an end tag (or closing tag) are used to write most HTML elements, with text in between. Elements can additionally have attributes attached to them that determine their additional properties. A paragraph, for example, is represented by the p element.
<p>An example syntax of HTML Elements </p>
An HTML element is a collection of start and end tags and their attributes and everything in between. In contrast, an HTML tag (either opening or closing) indicates the beginning or end of an element. However, the phrases HTML element and HTML tag are often used interchangeably.
Tag and attribute names in HTML are not case-sensitive (but most attribute values are case-sensitive). It means that the tags <P> and <p> in HTML both refer to the same thing: a paragraph. However, they are case-sensitive in XHTML, and the tag <P> is distinct from the tag <p>.
Stacking Elements in HTML
Most HTML elements (excluding empty elements) can contain any additional components made up of tags, attributes, content, or other elements.
The sample below illustrates some elements nested within the <p> element.
<p>Example of <em>italicized </em> text.</p>
Creating comments in HTML
The objective of adding comments is to make the source code easier to understand. It may aid other developers (or you in the future when editing the source code) in comprehending what you were attempting to do with the HTML. Unfortunately, the browser does not show the comments.
<!–, is the start of an HTML comment, and –> is the end. For instance,
<!-- An example of creating comments in HTML -->
What are HTML Attributes, and how do they work?
Additional features or properties of an element are defined through the attributes. These include the width and height of an image. Attributes are always supplied in the opening tag. They often comprise name/value pairs such as name=”value.”
Specific properties are also necessary, as well as other elements. A <img> tag, for example, must have src and alt properties.
<img src="images/codeunderscored_logo.jpg" alt="codeunderscored logo">
Creating a Paragraph in HTML
The <p> tag is a representation of a paragraph. It is the most basic and often the first tag you’ll need to publish content on the web pages. Here’s an illustration:
<p> Learning how to create a paragraph in HTML</p>
How to make Line Breaks
The <br> tag creates a line break. In addition, it does not require a corresponding closing tag because
<br> is an empty element.
<p>Paragraph before the first break<br> second paragraph after the break<br> & third paragraph.</p>
Creating a Horizontal Rule/Line
The <hr> tag can create a horizontal rule or line that visually separates content. It is also an empty element.
<p>paragraph before the line</p> <hr> <p>paragraph after the line.</p>
Preformatted Text
Use the <pre> tag to represent tabs, line breaks, spaces, and other elements precisely as they appear in the HTML file instead of using   and <br>. It’s instrumental when presenting content that requires many white spaces and line breaks, such as poetry or code.
<pre>
O holy night,
The stars are brightly shining!
Like a diamond in the sky.
</pre>
White Spaces in HTML
Use the   tag for the creation of consecutive spaces and the tag <br> to create line breaks on your web pages, as shown in the example below:
<p>show three consecutive spaces in html content.</p> <p>create<br>two<br> line breaks
Creating HTML Links
A link, often known as a hyperlink, is a connection between two web resources. Users can go quickly from one page to the next on any server on the web using links.
The HTML code to represent links is the tag <a>
<a href="https://thirdeyemedia.wpmudev.host/codeunderscored/">
Text Formatting in HTML
The tag <b> makes the text bold, the tag <i> makes the text italic, and the tag <mark> highlights the text. Additionally, the tag <code> displays a fragment of computer code. In contrast, the tags <ins> and <del> mark editorial insertions and deletions, and so on to make some text on your web pages appear differently than regular text.
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p> <p>This is <del>deleted text</del> and <mark>highlighted <mark/> text </p>
Quotation Formatting
With the HTML <blockquote> tag, you may quickly format quotation blocks from external sources.
Blockquotes are often formatted with left indentation and right margins with a little additional space above and below. Consider the following scenario:
<blockquote>
<p>how to express quotation formatting in HTML.</p>
<cite>— Codeunderscored</cite>
</blockquote>
Mark addresses of Contacts
Street or postal addresses are frequently included on web pages. For example, the HTML <address> tag is used to express physical and digital contact information for people, groups of people, or organizations.
This tag is best used to indicate contact information about the document itself, such as the article’s author. An address block is usually shown in italic in most browsers. Here’s an illustration:
<address> Test Codeunderscored<br> Test View, LA 94041, USA <br> </address>
Abbreviations in HTML
An abbreviation is a term, phrase, or name that has been shortened.
The <abbr> tag can be used to indicate an abbreviation. When the mouse pointer is held over the element, the complete name is displayed by browsers as a tooltip. Let’s have a look at an example:
<p>The <abbr title="HyperText Markup Language">HTML</abbr></p>
HTML Elements Styling
HTML is somewhat restrictive as far as page presentation is concerned. It was created to be a straightforward manner of presenting the information. CSS makes it easier to style HTML elements.
Size and typeface for fonts, colors for text and backgrounds, alignment of text and images, amount of space between components, border and outlines for elements, and various stylistic aspects are made much easier with CSS.
Incorporating Styles into HTML Elements
Style information can be provided as a separate document or incorporated directly into the HTML content. The three techniques for adding stylistic information to an HTML document are as follows.
- Use the style attribute in the HTML start element to create inline styles.
- Embedded style includes the <style> tag in the head section of the .html document.
- External style sheet — The <link> element is used to point to an external CSS file. As a result, this kind of styling can easily be applied to many other pages simultaneously.
Inline Examples
<p style="color:blue; font-size:10px;">This is an example of paragraph with inline style.</p>
Embedded style examples
<head>
<style>
body { background-color: purple; }
h1 { color: yellow; }
p { color: green; }
</style>
</head>
Another crucial property is the HTML class. The class’s attributes add style information applied to various items with the same class value.
We’ll use the same style for a header <h1> and a paragraph <p> , for example. Under the class.important, the style contains background color, text color, border, margin, and padding. After each start tag, add class=”important” to achieve the same style for <h1> and <p>:
<html>
<head>
<style>
.important {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>
external style linking examples
<head>
<link rel="stylesheet" href="css/external_linking_style.css">
</head>
Creating HTML Tables
You may use HTML tables to organize data into rows and columns. They’re frequently used to show tabular data such as product listings, school reports, and so on.
The <table> element can be used to construct a table. The <tr> elements can be used to construct rows within the <table> element, while the <td> elements can be used to generate columns within a row. The <th> element can also be used to define a cell as a header for a collection of table cells.
The table’s most basic structure is demonstrated in the following example.
<table>
<tr>
<th>Count.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Thomas</td>
<td>46</td>
</tr>
<tr>
<td>2</td>
<td>Jonathan</td>
<td>29</td>
</tr>
</table>
HTML Form
HTML Forms are required to collect many user inputs, such as contact information, e.g., name, email address, phone numbers, and financial information, such as credit card details.
Input boxes, checkboxes, radio buttons, submit buttons, and other controls can be found on forms. Users usually fill out a form by changing its controls, such as entering text, selecting items, and sending it to a web server for processing.
An HTML form is created with the <form> tag. For example:
<form>
<label>login name: <input type="text"></label>
<label>Enter Password: <input type="password"></label>
<input type="submit" value="Submit">
</form>
What is an iframe?
Display other web pages within a web page using an iframe or inline frame. An iframe is essentially a miniature web browser within a web browser. Furthermore, the material within an iframe exists independently of the surrounding elements. An example of this is:
<iframe src="test.html" style="width: 420px; height: 320px;"></iframe>
Intermediate HTML
Once you’ve mastered the fundamentals, you’ll progress to the next level, which covers the notion of doctype, methods for constructing web page layouts, the value of including meta information in web pages, adding scripts, displaying special characters, the architecture of a URL, and more.
Understanding the Doctype in HTML5
A DOCTYPE informs the web browser about the markup language version used to create a web page. In addition, a DOCTYPE declaration appears before all other items at the top of a web page. Therefore, according to the HTML specification or standards, every HTML document requires a proper document type declaration to ensure that your web pages are shown as intended.
Although the doctype declaration is generally the first thing declared in an HTML page (even before the opening <html> element), it is not an HTML tag in itself.
HTML5’s DOCTYPE is brief, to-the-point, and case-insensitive. Further, the doctype declaration is only required to allow the standard mode for HTML-formatted documents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><!-- codeunderscored title --></title>
</head>
<body>
<!-- codeunderscored content here -->
</body>
</html>
Layout Design for Websites
The process of putting the many elements that make up a web page in a well-structured manner to provide the website an appealing design is known as a website layout.
Most websites on the Internet display their material in numerous rows and columns, similar to a magazine or newspaper, to provide a better reading and writing environment for their visitors. This is simply accomplished by using HTML tags like <table>, <div>, <header>, <footer>, <section>, and so on, and applying CSS styles to them.
The Head Element in HTML
The <head> element embodies all head elements, giving additional information about the document (metadata) or linking to other resources required for the page to show or act correctly in a web browser.
The head elements explain the page’s features such as title, offer meta information such as character set, and tell the browser where to look for style sheets or scripts that allow you to extend the HTML document in very dynamic and interactive ways.
The <title>, <base>, <link>, <style>, <meta>, <script>, and <noscript> elements are all HTML elements that can be used inside the <head> element.
Metadata Definition
Typically, the <meta> tags give structured metadata like a document’s keywords, description, author name, character encoding, and other metadata. Any number of meta tags can be featured in HTML’s or XHTML’s head section.
Metadata will not be shown on the web page, but it will be machine parsable. Successively, web services, browsers, and search engines will be able to access it.
<head>
<title>Declaring Character Encoding</title>
<meta charset="utf-8">
</head>
Scripting on the Client Side
Client-side scripting is a term that describes the type of computer programs that are run by a user’s web browser. The most widely used client-side scripting language on the Internet is JavaScript (JS).
The <script> element embeds or references JavaScript within an HTML document to improve user experience by adding interactivity to web pages.
Form validation, producing alert messages, constructing picture galleries, show or hide content, DOM manipulation, and many other things are some of the most prevalent uses of JavaScript.
<body>
<div id="viewinfo"></div>
<script>
document.getElementById("viewinfo").innerHTML = "Working in codeunderscored.com!";
</script>
</body>
What is an HTML Entity?
Some characters are reserved in HTML; for example, you cannot use the less than (<) or greater than (>) signs or angle brackets within your text because the browser may mistake them for code, and some letters, such as the copyright symbol, are not present on the keyboard.
These special characters must be substituted by character entities to be displayed. Character entity references, or entities for short, allow you to use characters that aren’t stated in the document’s character encoding or can’t be typed in using a keyboard.
URL
The URL is the global address for documents and other resources on the Internet. Its primary purpose is to identify the location of a document and other online resources and the technique for accessing them using a web browser.
What is URL Encoding, and how does it work?
The characters in a URL are only confined to a predetermined set of reserved and unreserved US-ASCII characters, according to RFC 3986. Therefore, a URL cannot contain any additional characters. However, because URLs frequently have characters that are not part of the US-ASCII character set, they must be transformed to a valid US-ASCII format to ensure global interoperability. URL encoding, often called percent-encoding, is encoding URL data for safe transmission over the Internet.
A two-step approach is utilized to map the enormous diversity of characters used around the world:
The data is initially encoded using the UTF-8 character encoding.
Only bytes that do not correspond to characters in the unreserved set should be percent-encoded as %HH, where HH is the byte’s hexadecimal value. The string François, for example, would be encoded as Fran%C3%A7ois
Why Validate Your HTML Code?
You’ll likely make an error when writing your HTML code as a newbie. Incorrect or non-standard code might lead to unexpected effects in the way your page appears and functions in browsers.
To avoid this, test or verify your HTML code to the Wide Web Consortium’s (W3C) established principles and standards for HTML/XHTML web pages.
The World Wide Web Consortium offers an essential online tool (https://validator.w3.org/) that checks your HTML code and highlights any issues or errors, such as missing closing tags or missing quotes around attributes.
Advanced HTML
The final stage will see you do magic with HTML – you’ll look at some advanced HTML5 features like new input types, drawing graphics on the web page, including audio and videos in documents. In addition, there is storing data on the client-side using web storage, caching files, performing background work with web workers, getting user’s geographical coordinates, creating drag-and-drop applications, and more.
HTML5 New Input Types
Email, date, time, color, range, and other new <input> kinds are included in HTML5. To make the forms more dynamic and improve the user experience, If a browser cannot recognize these new input types, it will treat them as a standard text box.
Examples include the color date,datetime-local, email, month, number, range, search, tel, time, url, and week.
What is Canvas?
JavaScript can be used to draw images on the webpage using the HTML5 canvas element. Apple first launched the canvas in Mac OS X for dashboard widgets and to power visuals in the Safari web browser. Firefox, Google Chrome, and Opera all implemented it later. The canvas is now included in HTML5, the new specification for next-generation web technologies.
The <canvas> element has a width of 300px and a height of 150px by default, with no border or content. The CSS height and width properties, on the other hand, can be used to define custom width and height, while the CSS border property can be used to apply a border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Canvas to HTML</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("canvasid");
var context = canvas.getContext("2d");
// drawings here
};
</script>
</head>
<body>
<canvas id="canvasid" width="300" height="200"></canvas>
</body>
</html>
SVG
SVG is an XML-based picture format for defining two-dimensional vector graphics for the web. A vector image, unlike a raster image (e.g.,.jpg,.gif,.png, etc.). It can also be scaled vertically and horizontally without compromising picture quality.
SVG graphics are constructed using a series of statements that follow the XML syntax; as a result, they may be created and altered in any text editor, such as Notepad. In addition, SVG has several other advantages over other image formats such as JPEG, GIF, and PNG.
- Searching, indexing, scripting, and compressing SVG graphics are all possible.
- JavaScript may be used to produce and modify SVG pictures in real-time.
- SVG pictures can be reproduced in high resolution at any size.
- The built-in animation elements can be used to animate SVG content.
- Hyperlinks to other documents can be included in SVG images.
Audio Embedding in an HTML Document
Previously, embedding audio onto a web page was difficult due to the lack of a universal standard for describing embedded media assets like audio in web browsers. We can easily accomplish this now using HTML5 <audio> element.
Video Embedding in an HTML Document
Because web browsers did not have a standardized standard for describing embedded media files like video, embedding the video onto a web page was not easy. The latest HTML5 <video> element will make this effortless.
What is Web Storage, and how does it work?
Like cookies, HTML5’s web storage feature allows you to save certain information locally on the user’s machine, but it is faster and better. Web storage, on the other hand, is no more secure than cookies.
In contrast to cookies, which send data to the server with every request, the information kept in the web storage is not transferred to the webserver. Furthermore, unlike cookies, which only allow you to keep a tiny amount of data (about 4KB), web storage will enable you to store up to 5MB of data.
There are two forms of web storage, each with its own set of features and lifespan:
Local storage — The localStorage object is used to store data for your entire website on an ongoing basis. That means that until you delete the stored local data, it will be available the next day, week, or year.
Session storage — The sessionStorage object is used to store data for a single browser window or tab temporarily. When a session expires, i.e., when the user closes that browser window or tab, the data is deleted.
What is Application Cache, and how does it work?
Most web-based programs will only work if you are connected to the Internet. However, HTML5 provides an application cache mechanism that allows the browser to keep the HTML file and any other resources required to display it correctly on the local machine. It also allows the browser to retrieve the web page and its resources even if the internet connection is lost.
Benefits of utilizing the HTML5 application cache feature:
- Offline surfing – Users can use the application even if they are offline or if their network connection is disrupted unexpectedly.
- Improve performance – Because cached resources are loaded directly from the user’s workstation rather than from a remote server, web pages load more quickly and perform better.
- Reduce HTTP requests and server burden – The browser will only need to download the updated/changed resources from the remote server, reduce HTTP requests, and save bandwidth while also reducing server load.
What is a Web Worker?
Suppose you try to execute a time-consuming activity using JavaScript that requires many calculations. In that case, the browser will freeze and block the user from doing anything until the job is finished. Because JavaScript code is consistently executing in the foreground, this happens.
HTML5 offers a new feature called web worker, designed to execute background work independently of other user-interface scripts while maintaining page performance. Because the tasks are done in the background, unlike conventional JavaScript operations, web pages remain responsive since users are not interrupted by web workers.
What is a Server-Sent Event, and how does it work?
The HTML5 server-sent event introduces a new method for web pages to communicate with the server. It’s also feasible to use the XMLHttpRequest object, which allows your JavaScript code to send a request to the webserver, but it’s a one-to-one exchange, meaning the communication stops after the web server responds.
All Ajax activities revolve around the XMLHttpRequest object.
There are, however, some circumstances in which web pages require a more extended connection to the webserver. Stock quotes on finance websites, for example, are an example of automatic price updates. A news ticker, which may be found on a variety of media websites, is another example.
HTML5 server-sent events can be used to make such things. It allows a web page to maintain an open connection to a web server so that the web server can deliver a fresh answer automatically at any moment, eliminating the need to reconnect and rerun the same server script.
What is the definition of geolocation?
The HTML5 geolocation feature allows you to determine the geographic coordinates (latitude and longitude values) of your website’s visitor’s current location.
This feature helps give site visitors a better browsing experience. You can, for example, return search results that are physically near the user’s location.
Can Element be dragged and dropped?
The HTML5 drag and drop feature allows a user to move an element about the screen. The drop location may be a separate program. When dragging an element, the mouse pointer is followed by a transparent depiction of the element.
Creating Responsive HTML
The web design goal is to create web pages that look great on any device. A responsive web design adjusts to changing screen sizes and viewports automatically.
HTML and CSS automatically resize, hide, shrink, or grow a website to make it seem excellent on all platforms (desktops, tablets, and phones), known as responsive web design.
Choosing a Viewport
All of your web pages should have the following tag to make your website responsive:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It will configure your page’s viewport, instructing the browser on how to control the page’s dimensions and scaling.
Responsive images
Images that scale well to fit any browser size are known as responsive images – if the CSS width attribute is set to 100 percent:
<img src="address.jpg" style="width:100%%;">
Media Queries
In addition to resizing text and graphics, media queries are commonly used in responsive web pages.
You can set totally distinct styles for different browser widths using media queries. Resize the browser window to observe how the three div elements below will appear horizontally on large displays and stacked vertically on small devices when you resize it:
<style>
.left, .right {
float: left;
width: 20%%; /* The width is 20%%, by default */
}
.main {
float: left;
width: 60%%; /* The width is 60%%, by default */
}
/* media query adds a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%%; /* The width is 100%%, when the viewport is 800px or smaller */
}
}
</style>
Frameworks for Responsive Web Design
Responsive design is available in all common CSS Frameworks. In addition, they are both free and straightforward to use.
W3.CSS
W3.CSS is a modern CSS framework that by default supports desktop, tablet, and mobile design.
Other characteristics of w3.CSS include:
- smaller and speedier CSS framework than other CSS frameworks.
- created as a high-quality replacement for Bootstrap.
- intended to work without jQuery or any other JavaScript libraries.
Example:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
<h1>Codeunderscored</h1>
<p>Demo- Try to resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Html</h2>
<p>HTML5 is the latest release.</p>
<p>It is responsible for creating the structure of most web applications if not all.</p>
</div>
<div class="w3-third">
<h2>CSS</h2>
<p>Refers to Cacading Style Sheets</p>
<p>It is vital in style HTML components , create responsive components and to achieve the best look and feel- for
improved user-experience.</p>
</div>
<div class="w3-third">
<h2>JavaScript</h2>
<p>Vanilla JavaScript is the mother to core frameworks including Angular,Vue & React </p>
<p>It is responsible for the dynamic look and feel of your website for instance popups and notifications.</p>
</div>
</div>
</body>
</html>
Bootstrap
Bootstrap is another prominent CSS framework. To create responsive web pages, Bootstrap employs HTML, CSS, and jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codeunderscored </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Codeunderscored.com-Bootstrap Responsive</h1>
</div>
<div class="row">
<div class="col-sm-4">
<h2>Html</h2>
<p>HTML5 is the latest release.</p>
<p>It is responsible for creating the structure of most web applications if not all.</p>
</div>
<div class="col-sm-4">
<h2>CSS</h2>
<p>Refers to Cacading Style Sheets</p>
<p>It is vital in style HTML components , create responsive components and to achieve the best look and feel- for
improved user-experience.</p>
</div>
<div class="col-sm-4">
<h2>JavaScript</h2>
<p>Vanilla JavaScript is the mother to core frameworks including Angular,Vue & React </p>
<p>It is responsible for the dynamic look and feel of your website for instance popups and notifications.</p>
</div>
</div>
</div>
</body>
</html>
HTML’s Advantages and Disadvantages
HTML, like every other computer language, has its advantages and disadvantages.
Pros:
- Beginner-friendly- HTML has a simple learning curve and uses clean and consistent markup.
- Support- The language is widely used, with a strong community and a wealth of resources.
- Accessible- It’s entirely free and open-source. All web browsers support HTML.
- Flexible- Backend languages like Python, PHP, and Node.js are easy to integrate with HTML.
Cons:
- Static – Static web pages are the primary application of the language. You may need to employ JavaScript or a backend language like PHP for dynamic functionality.
- A separate HTML page is required. Even if the elements are the same, users must construct individual web pages for HTML.
- Compatibility with different browsers. Some browsers are sluggish to incorporate new functionality. Older browsers don’t always render more unique tags correctly.
How do HTML, CSS, and Javascript work together?
HTML is used to construct the content structure and add text elements. However, creating a professional and fully responsive website isn’t enough. To build the vast bulk of website content, HTML requires the assistance of Cascading Style Sheets (CSS) and JavaScript.
Backgrounds, colors, layouts, spacing, and animations are all controlled by CSS. JavaScript, on the other hand, offers dynamic features like sliders, pop-ups, and photo galleries. The fundamentals of front-end programming are these three languages.
Conclusion
Every HTML page has a set of elements that make up the web page or application’s content structure.
HTML is primarily used for static internet pages and is a beginner-friendly language with a lot of support. It is best used in conjunction with CSS for styling and JavaScript for functionality.
In this article, we have covered the basics of HTML. These include the concept of elements and attributes, how to format text using HTML tags, how to add style information to a document, how to insert images and tables, how to create lists and forms, and how to include other HTML documents inside the current document, and so on.
Once you’ve mastered the fundamentals, you’ll progress to the next level, which covers the notion of doctype, methods for constructing web page layouts, the value of include meta information in web pages, adding scripts, displaying special characters, the architecture of a URL, and more.
Finally, we’ve looked at some advanced HTML5 features. These comprise new input types, drawing graphics on the webpage, including audios and videos in documents, and storing data on the client-side using web storage. Further, it covers caching files, performing background work with web workers, getting user’s geographical coordinates, creating drag-and-drop applications, and more.
We’ve also given you some of the best advice to either help you increase your HTML skills or provide you a basic comprehension of the language.
