How to Write HTML Code?

To write HTML code, you need to understand the basic structure and elements involved. HTML, or Hypertext Markup Language, is the foundation of web pages, structuring content that browsers then interpret and display.

Basic HTML Structure

An HTML document consists of specific tags that create the structure and organize the content. Here's a breakdown:

Document Type Declaration: Every HTML document should start with a doctype declaration, which specifies the HTML version being used. For HTML5, you use <!DOCTYPE html>. This is the first line of an HTML document.
HTML Root Element: Following the doctype declaration, you have the root HTML element which contains all other elements. You write the opening tag, <html> on the second line of the document. This tag indicates to the browser that the code that follows is in HTML format.
Head Section: Inside the <html> tag, the <head> section contains meta-information about the HTML document. This may include:
- The title of the page using the <title> tag, which appears in the browser's title bar or tab.
- Links to external stylesheets using the <link> tag.
- Metadata using the <meta> tag, such as character sets and viewport settings.
Body Section: The <body> section contains all of the visible content of the HTML document, such as text, images, videos, links, and more.

Common HTML Tags

Here are some commonly used HTML tags:

Headings: Use <h1> to <h6> tags to create headings of different levels. <h1> is the main heading and <h6> is the least significant heading.
```
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
```
Paragraphs: Use the <p> tag to create paragraphs of text.
```
<p>This is a paragraph of text.</p>
```
Links: Create hyperlinks using the <a> tag with the href attribute to specify the URL.
```
<a href="https://www.example.com">Visit Example</a>
```
Images: Insert images with the <img> tag and the src attribute pointing to the image file.
```
<img src="image.jpg" alt="Description of image">
```

Lists: Create ordered lists with <ol> and list items with <li>, or unordered lists with <ul> and <li>.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Bold and Italic: Use <strong> for bold text and <em> for italic text.

<p>This is <strong>important</strong> text.</p>
 <p>This is <em>emphasized</em> text.</p>

Practical Steps

Start with the doctype: The first line of your HTML file should always be <!DOCTYPE html>.
Open the <html> tag: Add <html> on the second line, as the reference states.
Add the head: Add the <head> tag which includes elements like the title.
Add the body: Include the <body> tag, where you add the elements like headings, paragraphs, lists, and more.
Close the tags: Make sure to close all the tags appropriately (e.g., </html>, </body>, </head>).

Here's an example of a basic HTML file using the information above:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.google.com">Visit Google</a>
</body>
</html>

Step	Action	Code Example
1	Start with the doctype declaration	`<!DOCTYPE html>`
2	Open the HTML tag	`<html>`
3	Add the head section	`<head></head>`
4	Add the body section	`<body></body>`
5	Add content to body section	`<h1>Hello</h1>`
6	Close all tags	`</html>`

Remember, HTML provides the structure and content; you will need CSS for styling and JavaScript for interactivity.