How is HTML Written?

HTML is written using a specific structure of elements and tags to define the content and structure of a webpage. Writing HTML requires tags to be used correctly to create the author's vision. The tags are what separate normal text from HTML code.

Understanding HTML Structure

HTML documents are structured using elements, which are defined by start tags, content, and end tags. These tags tell the browser how to display the content.

Tags: Keywords enclosed in angle brackets (< >). For example, <html>, <head>, <body>, <h1>, <p>.
Elements: A start tag, an end tag, and the content in between. For example, <p>This is a paragraph.</p>.
Attributes: Provide additional information about an element. They are specified in the start tag. For example, <img src="image.jpg" alt="An image">.

The Basic HTML Structure

A basic HTML document follows a consistent structure:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

Let's break down this structure:

<!DOCTYPE html>: This declaration defines the document type as HTML5.
<html>: The root element of the HTML page.
<head>: Contains meta-information about the HTML page, such as the title, character set, and linked stylesheets.
- <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or tab).
<body>: Contains the visible page content.
- <h1>: Defines a large heading.
- <p>: Defines a paragraph.

Key HTML Tags and Their Functions

Different tags perform different functions. Here's a table summarizing some key HTML tags:

Tag	Description	Example
`<h1> - <h6>`	Defines headings of different sizes (h1 being the largest, h6 being the smallest).	`<h1>Main Heading</h1>`
`<p>`	Defines a paragraph of text.	`<p>This is a paragraph.</p>`
`<a>`	Defines a hyperlink to another page.	`<a href="https://example.com">Link</a>`
`<img>`	Embeds an image into the page. Requires a `src` attribute to specify the image source.	`<img src="image.jpg" alt="Image">`
`<ul>`	Defines an unordered (bulleted) list.	`<ul><li>Item 1</li><li>Item 2</li></ul>`
`<ol>`	Defines an ordered (numbered) list.	`<ol><li>Item 1</li><li>Item 2</li></ol>`
`<li>`	Defines a list item (used within `<ul>` or `<ol>` lists).	`<li>List Item</li>`
`<div>`	Defines a division or section in an HTML document, often used for styling and layout.	`<div>Content here</div>`
`<span>`	An inline container used to mark up a part of a text, or a part of a document. Often used for styling.	`<span>Styled text</span>`

Practical Insights for Writing Effective HTML

Semantic HTML: Use HTML elements that accurately describe the content they contain. For example, use <article>, <nav>, <aside>, and <footer> to structure your page semantically.
Validation: Validate your HTML code to ensure it is error-free and adheres to web standards. This helps with cross-browser compatibility and SEO. Use a validator like the W3C Markup Validation Service.
Accessibility: Write HTML that is accessible to all users, including those with disabilities. Use semantic HTML, provide alternative text for images (using the alt attribute), and ensure sufficient color contrast.
Proper Nesting: Ensure all HTML elements are properly nested. Incorrect nesting can lead to unexpected rendering and validation errors.

Graphics, Images, and Tables in HTML

As the reference states, tags allow graphics, images, and tables to appear on the webpage. Here's how:

Images: The <img> tag is used to embed images. The src attribute specifies the path to the image file.
Tables: The <table> tag is used to create tables, with <tr> for rows, <th> for header cells, and <td> for data cells.

Example of an image:

<img src="myimage.png" alt="Description of my image">

Example of a simple table:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

askvity