Horje
Getting Started with HTML Coding

HTML (Hypertext Markup Language) is the standard language for creating web pages and applications. It uses tags to structure content, such as text, images, and links, enabling browsers to interpret and display information accurately, forming the backbone of the World Wide Web. It was developed in the early 1990s by the British Computer Scientist Tim Berners-Lee who was also credited for the development of the World Wide Web(WWW).

The W3C (The current developer of HTML since the early 2000s) released HTML5, the latest version of HTML in the year 2014. HTML5 includes many new features and enhancements, such as improved multimedia support, new semantic elements for better document structure, and better support for mobile devices. HTML5 is now widely used for creating web pages and applications and is supported by all major web browsers and local editors.

Getting Started with HTML Coding

Getting started with HTML coding is not as difficult as it may seem. HTML is just a simple markup language, learning it just needs some reading and consistent practice. So before you start coding, it is recommended to learn the basic HTML syntax, tags, elements, semantics, links, and images.

Table of Content

Role of HTML in Web Development

HTML (Hypertext Markup Language) serves as the foundation of web development. It structures content using tags to create elements such as headings, paragraphs, images, and links. HTML provides the skeleton of a webpage, forming the structure that CSS styles and JavaScript enhances. It facilitates accessibility, SEO optimization, and compatibility across browsers, making it essential for building functional and visually appealing websites and applications.

How Do I Write HTML Code?

Writing HTML involves understanding HTML tags, which are enclosed within angle brackets. Each tag consists of an opening and closing part, serving as building blocks that define the structure of a webpage. These tags function as the bricks and mortar of web development, and comprehending their roles is fundamental for effective webpage creation.

HTML Code Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML structure Page</title>
</head>
<body>
    <h1>Hello, GeeksforGeeks!</h1>
    <p>A computer science portal.</p>
</body>
</html>

Explanation:

  • In the above example we Declares the HTML version being used.
  • Defines the basic structure of the webpage.
  • Contains metadata such as character encoding and title.
  • Contains visible content like headings and paragraphs displayed in the browser.

How to Create a Website Using HTML?

To create a website using HTML, start by designing its structure with tags like <html>, <head>, and <body>, and adding content using appropriate tags for text, images, and links. Save files with a .html extension and open them in a browser for local testing. To publish online, obtain web hosting services, and a domain name for accessibility. Additionally, enhance the website’s appearance and functionality further using CSS and JavaScript.

How to Start HTML Code?

Here are some important step to follow

  • Text Editor Selection: Choose a suitable text editor like Notepad, Sublime Text, or Visual Studio Code to write and edit HTML code comfortably, offering features like syntax highlighting and auto-completion for efficient coding.
  • HTML5 Declaration: Begin your HTML document with <!DOCTYPE html> to signify its HTML5 standard, ensuring compatibility and proper rendering across modern web browsers.
  • Building the Structure: Utilize essential HTML tags such as <html>, <head>, and <body> to create the fundamental structure of your webpage, delineating its content and metadata.
  • Adding Metadata: Enhance accessibility and search engine optimization by incorporating metadata like the <title> tag for page titles and <meta> tags for specifying character encoding, viewport settings, and other relevant information.
  • Save Your HTML File: Ensure to save your HTML file with a .html extension to designate it as a web page, facilitating easy identification and opening in web browsers.
  • Double-Click to Open: Simply double-click the saved HTML file to open it in your default web browser, allowing you to instantly preview the webpage and assess its appearance and functionality.
  • Alternative Browsers: Test your HTML code across different web browsers such as Chrome, Firefox, or Edge to ensure consistent rendering and functionality, considering the varying interpretations and implementations of web standards.
  • Inspect and Debug: Utilize built-in browser developer tools to inspect and debug your HTML code, enabling you to identify and rectify any errors or issues affecting the webpage’s performance or appearance.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML</title>
</head>
<body>
    <p>Hello</p>
</body>
</html>

Explanation:

  • Here we Specifies HTML5 as the document type.
  • Contains metadata, such as the title of the webpage.
  • Holds the content visible in the browser.
  • Displays a paragraph with the text “Hello”.

How to Create an HTML File with an Example?

  • Choose a Text Editor: Select a text editor like Notepad, Sublime Text, or Visual Studio Code for writing HTML code, offering features like syntax highlighting and auto-completion to enhance coding efficiency.
  • Structure Your HTML: Begin with <!DOCTYPE html> and define the document structure using tags like <html>, <head>, and <body>.
  • Add Content: Insert content using appropriate HTML tags such as <h1>, <p>, <img>, and <a> to represent headings, paragraphs, images, and links respectively.
  • Save with .html Extension: Save your file with a .html extension, ensuring it’s recognized as an HTML document.
  • Preview Locally: Open the HTML file in a web browser to preview how it renders and ensure everything appears as intended.
  • Introducing CSS for Styling: Enhance the appearance of your HTML content by introducing CSS (Cascading Style Sheets) for styling elements, adding colors, fonts, layout adjustments, and more to create visually appealing web pages.

In this, you will learn the basic tags of HTML which are commonly used in HTML coding.

Check this article for HTML Tags – A to Z List

HTML Tags

Tags are the type of keywords that tells the web browser how to display or format the content written inside those tags. Tags have basically three parts opening tag, content, and closing tag.

HTML Tags Syntax:

<tag> Content... </tag>

Note: There are few HTML tags that are not closed like <br> tag, <hr> tag, etc.

HTML links are hyperlinks that allow users to go from one web page to another web page by just clicking on that link.

Links Tag Syntax:

<a href="URL"> Link Text</a>
HTML Link:  www.horje.org/html-links/

HTML Images Tag

HTML images are used to embed the images in your web pages to make them attractive and more resourceful.

Images Tag Syntax:

<img src="URL" alt="alternative Image Text">

HTML Semantics Tag

Semantic elements are the elements that clearly classify the meaning of that element to the web browser and developer 

HTML Semantic Elements:

<article>, <form>, <table>, <header>, <footer>, <time>, etc. all these elements clearly describe the meanings.

HTML Non-Semantic Elements

HTML non-semantic elements are tags that convey no inherent meaning or structure to web content. They’re used for styling and layout purposes only, without indicating the significance of their enclosed content. Examples include <div> and <span>.

Now, since you can now write the HTML code you must need an HTML editor so, let’s begin by setting up your HTML editor.

Setting the HTML editor

HTML text editors are used to create and modify web pages created using HTML. There are many online and offline/local text editors available that you can use.

Using Online Text Editor

There are many online HTML text editors on which you can write HTML code and instantly see how your web page will look so it makes it very easy to edit the text also there is no need for setting up a local editors 

GeeksforGeeks Online HTML Editor

HTML

<!-- DOCTYPE defines the information to the
    browser about the type of document -->
<!DOCTYPE html>
 
<!-- <html> tag tells the browser that
    it is an HTML code -->
<html>
   
    <!-- head tag is a container which
        stores metadata -->
<head>
   
    <!-- title tag is used to give a title
        to your document -->
    <title>Example</title>
   
</head>
    <!-- body tag contains all the content
        of your HTML document -->
   
<body>
    <!-- Heading declaration of type 2 -->
    <h2>Welcome To GFG</h2>
   
    <!-- paragraph of the document -->
    <p>The Computer Science Portal for Geeks</p>
</body>
   
</html>

Output:

The output of the above code

Using Local Text Editors

There are many local/offline text editors available for getting started with coding you need to have one of them. Some text editors are mentioned below:

  • Visual Studio Code 
  • Notepad
  • Notepad++
  • Sublime text

Now, Since you must have chosen your text editor, let’s begin by writing a simple HTML code.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>My Web Page</title>
</head>
 
<body>
    <h1>My First HTML Document</h1>
    <h2>Defination of HTML</h2>
 
    <p>
        HTML stands for Hyper Text Markup
        Language it is a standard markup
        Language for the documents designed
        to be displayed in the web browser.
        The supported web browsers are
        Chrome, Edge, Safari, Opera and
        Firefox. For styling the HTML
        document we use CSS(Cascading
        Style Sheet)
    </p>
</body>
 
</html>

Output:

The output of the above code

Conclusion

getting started with HTML coding is straightforward. Begin by understanding basic concepts like document structure and tags. Choose a suitable text editor and start writing HTML code to create the structure and content of your webpage. Utilize tags for headings, paragraphs, images, and links. Remember to save your file with a .html extension and preview it in a browser for testing. With practice, HTML coding becomes intuitive and rewarding.


 


Reffered: https://www.geeksforgeeks.org

HTML

Related
How to Get the Content of an HTML Comment using JavaScript ? How to Get the Content of an HTML Comment using JavaScript ?
Can we Create a Nested Form in HTML ? Can we Create a Nested Form in HTML ?
How to Prevent the Display of “Getting Framed&quot; in HTML ? How to Prevent the Display of “Getting Framed&quot; in HTML ?
How to Escape Ampersands in XML to Rendered as Entities ? How to Escape Ampersands in XML to Rendered as Entities ?
Can I Add Multiple &lt;tbody&gt; Elements in Same Table in HTML ? Can I Add Multiple &lt;tbody&gt; Elements in Same Table in HTML ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje