Hyper Text Markup Language is used to create web pages that will be displayed online. All web pages communicate in this language. This is an independent language. This can be used on any platform like Windows, Linux, Macintosh, and so on. Its collection of "tags" used to create web documents are displayed using browsers on the Internet.
The latest version of Hyper Text Marking Language is HTML5 provided below.

You should code in HTML5 because it is a future investment. Within a few years, it will become a standard that almost all websites rely on. Enables clean, easy-to-write code.Web page technology has grown exponentially and seamlessly, mainly due to increased human Internet speed, but also because users, designers, and editors increasingly want more functionality on their Web pages, such as precise font control and layout, better delivery on devices that vary in size from mobile to monitor. Larger desktops, better images, more connections, video, audio, animation, and better support for various image formats and files. Because most people have instant connections, they do not have to wait long for downloaded pages to contain large audio and video files, meaning that more and more sites are engaging audio and video content.HTML was not originally designed to complicate the delivery of multimedia content, so high-tech sites have migrated to other languages and technology piggyback to HTML to deliver that content, such as JavaScript, Java, and Active Server Pages (ASP).HTML5 adds some important new tags to make the integration of audio, video, and application smooth and reliable. HTML5 removes support for some older tags. For example, the old (pre-HTML4) way to specify a font was a tag. Today, most people use cascading style sheets to define fonts, so the tag has not been used by many web developers for a long time anyway. HTML5 officially removes it from the language. One of the great things about HTML5 is the ability to create multi-layered websites with instructions. You can still create Websites that have multiple components, but are best managed using tables or partitions. a new method, preferred by many Web design experters. The table is still the accepted method, and is preferred by many web page producers who are familiar with tables from programs such as Word.Ad Link

There are no minimum system requirements for HTML5 development; you can do it in any text editing program with any type of computer and any other application. That's the beauty of HTML! you can use any editor you like. To test your work, you will need a HTML5-compatible Web browser application. The latest versions of Google Chrome and Firefox (both free online) will work best for this.

< header >…< /header > Identifies the header block for an individual section or a document.
< footer > …< /footer > Shows the footer block for the individual section or document.
< main >…< /main >. Details the main content of a document.
< article > …< /article > Indicates an article inside a document.
< aside >…< /aside > Defines the content that is contained in a document sidebar.
< section >…< section > Defines the section block in a document.
< details >…< details > Details additional facts or information the user can either view or hide.
< dialog >…< dialog > Refers to a dialog box or window.
< figcaption > …< /figcaption > This element is a caption that details the figure.
< figure > … < figure > This tag represents an independent content block that includes diagrams, photos, illustrations, and more.
< mark > …< /mark > Shows the highlighted portion of text within the content of the page.
< nav >…< nav >Refers to navigation links that can be used in the document.
< menuitem >…< menuitem > Identifies the specific menu item that a user can get from a pop-up menu.
< meter >…< meter > Details the scalar measurement of a known array.
< progress > … < progress >Shows the progress of a task that is usually presented in a progress bar.
< rp >… < rp >Shows the text within browsers that do not support ruby annotations.
< rt > …< rt > Shows details of East Asian typography characters.
< ruby >…< ruby > Details a ruby annotation for East Asian typography.
< summary > …< summary > Includes a visible heading for a element.
< bdi > …< bdi > Allows you to format part of the text in a different direction from other text.
< time > …< time > Shows the time and date.
< wbr > Shows a line-break within the content.

Prerequisites

  • Basic understanding of HTML and its tags
  • Tools: Notepad ( Windows ), Notepad++, Sublime Text 3, TextEdit ( Mac )
  • A Computer and Internet connection
  • Passion for learning!!!

Core code

< ! -- Communicates the html version to the browser -- > < !DOCTYPE html > < ! -- The lang sets the language for all the text on the page -- > < html lang = " en-US " > < ! -- Head tag contains title, meta, script, noscript, link, base, style -- > < head > < ! -- Configures the character encoding -- > < meta charset = " UTF-8 " > < ! -- Include meta tag to ensure proper rendering and touch zooming -- > < meta name = " viewport " content = " width = device-width, initial-scale = 1 "> < ! -- Wright your page title here -- > < title > < /title > < ! -- Linking HTML and CSS -- >
< ! -- rel attributes specifies the relationship between the HTML document and an external resource -- >
< ! -- href defines the destination of the link -- >
< ! -- style/style.css [Folder/File Name] -- > < link rel = " stylesheet " type = " text/css " href = " style/style.css " > < ! -- End of the head -- > < /head > < ! -- All the viewable content will be here in the body tag -- > < body > < ! -- Linking HTML and JS -- >
< ! – src - Source attribute tells the browser where to find the file -- >
< ! – js/ script.js [Folder/File Name] -- > < script src = " js/script.js " >< /script> < ! -- Ending the body tag -- > < /body > < ! -- Ending the container -- > < /html>

Display text

Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.

Div tag

< ! -- div- Divide content into logical sections -- > < div name = " value" > Lalmonirhat < /div > OR < div class = "outer-div" > Hello < div class = "inner-div" > Bangladesh < /div > < /div >

Figure tag

< ! -- figure- Contains one or more images, graphics, code samples -- > < figure name = "value" > < put here link >< figcaption > Image < / figcaption > < /figure>

Main

< ! -- Alternative solution for the wrapper or container -- > < main > < /main >

Input

< ! -- Input type can be text, email, number, radio, checkbox, hidden, submit -- > < form action = " " method = " get " > First Name: < input type = " text " name = " first-name " value = " " maxlength = " 100 " style = " width: 120px;" spellcheck = " false "
autocomplete = " off " placeholder = " Rasel " autofocus required > Last Name: < input type = " text " name = " last-name " value = " " maxlength = " 100 " style = " width: 120px;" spellcheck = " false "
autocomplete = " off " placeholder = " Mia " autofocus required > < /form >

Output

< ! -- A output has oninput value , output name and type. here is input type is number -- >
< ! -- Take two id and type with numbers and give oninput value in the form -- >
< ! -- form oninput="bangladesh.value = rasel.valueAsNumber * mia.valueAsNumber" -- >
< ! -- input type="number" id="rasel" * -- >
< ! -- input type="number" id="mia" = -- >
< ! -- output name="bangladesh" for="rasel mia" -- >
< ! -- /form -- >

* =

Page structure

Here you will find header tag, nav tag, main tag, article tag, section tag, aside tag, address tag, footer tag.


The header appears at the top of each page on the site. Contains relevant information for all pages (such as site name or logo) and an easy-to-use navigation system.

< header > < div id = " logo" > HTML < /div > < nav > < ul > < li >< a href = " /" > Home < /a >< /li > < li >< a href = " /link" > Page < /a >< /li > < /ul > < /nav > < /header >

Main is the largest region, containing different content on the current page.
Stuff on the side:
1) Information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. In fact, not all of the page's main content is absolutely necessary.

< main role = " main " > < article > < h2 > Title < /h2 > < p > Content < /p > < /article > < article > < h2 > Title2 < /h2 > < p > Content2 < /p > < /article > < /main > < section > A group of related content < /section > < aside > Sidebar < /aside >

The footer is visible at the bottom of all the pages on the site. As a subject, it contains less-known global information such as legal notices or contact details.

< footer > < p >©HTML Sheet < /p> < address > Content < a href = " mailto: me@gmail.com" > Me < /a > < /address > < /footer >

Offline Storage – Cache Manifest

Work without a connection
1. Create cache manifest file
2. Set server to allow for manifest file type
3. Link to manifest file in HTML
An application cache offers the following benefits:
Offline browsing:
Users can navigate the site even when they are offline.
Speed:
Cached resources are local, so they load faster.
Reduced server load:
The browser only downloads resources that have changed from the server.

CACHE MANIFEST # v.1 CACHE: index.html index.css style.css index.js images/logo.png 26.mp3 FALLBACK: index.html NETWORK: *

A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.
CACHE:

This is the default section for entries in the cache manifest file. Files listed under the cache header or (immediately after the cache expression line) are clearly stored after they have been downloaded for the first time.


NETWORK:

The files listed in the network header directory in the cache manifest file are white-written resources that require a connection to the server. All app requests exceed the repository, even if the user is offline. The wildcard * character can only be used once. Most sites require *.


FALLBACK:

The back up section specifies the back pages the browser should use if the app is not accessible. Each entry in this category includes two URIs - the first is the resource, the second is the fallback. Both URIs must be related and come from the same source as the expression file. Wild cards can be used. The CACHE, NETWORK, and FALLBACK sections can be written in any order in the cache manifest file, and each section may appear multiple times in one manifest.