What is HTML?
HTML stands for HyperText Markup Language, and it is a standard markup language used to create web pages. It consists of a series of tags and attributes that define the structure and content of a webpage. HTML is the foundation of the World Wide Web, and it allows developers to add text, images, videos, audio, and other types of media to a web page.
HTML tags are used to mark up the different elements of a webpage, such as headings, paragraphs, images, links, and lists. These tags are enclosed in angle brackets, and they can include attributes that provide additional information about the element, such as the source of an image or the destination of a link.
When a web browser renders an HTML page, it reads the HTML code and displays the content according to the instructions given by the tags and attributes. HTML is often used in conjunction with other web development technologies, such as CSS (Cascading Style Sheets) and JavaScript, to create dynamic and visually appealing web pages.
HTML Tags
HTML tags are used to define the structure and content of a webpage. They are enclosed in angle brackets and consist of a tag name and, in some cases, attributes that provide additional information about the element. Here are some commonly used HTML tags:
- `<html>`: Defines the beginning and end of an HTML document.
- `<head>`: Contains information about the document, such as the title and metadata.
- `<title>`: Defines the title of the document, which is displayed in the browser’s title bar.
- `<body>`: Contains the main content of the document.
- `<h1>` to `<h6>`: Defines headings of different levels of importance, with `<h1>` being the most important and `<h6>` being the least important.
- `<p>`: Defines a paragraph of text.
- `<a>`: Defines a hyperlink, which can be used to link to other pages or resources.
- `<img>`: Defines an image to be displayed on the page.
- `<ul>`: Defines an unordered list.
- `<ol>`: Defines an ordered list.
- `<li>`: Defines a list item.
- `<div>`: Defines a section of the page that can be styled with CSS.
- `<span>`: Defines a small section of the page that can be styled with CSS.
- `<table>`: Defines a table to display tabular data.
- `<tr>`: Defines a table row.
- `<td>`: Defines a table cell.
- `<form>`: Defines a form to collect user input.
- `<input>`: Defines an input field, such as a text box or radio button.
- `<button>`: Defines a clickable button.
- `<select>`: Defines a drop-down list.
- `<option>`: Defines an option in a drop-down list.
These are just a few examples of the many HTML tags available for web developers to use in creating web pages.
HTML Elements
HTML elements are building blocks of web pages, and they are created using HTML tags. An HTML element consists of a starting tag, content, and an ending tag. Here are some commonly used HTML elements:
- Paragraph element: `<p>` – Used to define a paragraph of text.
<p>This is a paragraph.</p>
- Heading elements: `<h1>` to `<h6>` – Used to define headings of different levels of importance.
<h1>This is a level 1 heading.</h1>
<h2>This is a level 2 heading.</h2>
- Anchor element: `<a>` – Used to define a hyperlink to another webpage or resource.
<a href=”https://www.example.com”>Visit Example</a>
- Image element: `<img>` – Used to display an image on the webpage.
<img src=”example.jpg” alt=”An example image”>
- List elements: `<ul>` and `<ol>` – Used to define unordered and ordered lists respectively.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
- Table element: `<table>` – Used to define a table to display tabular data.
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
</table>
- Form element: `<form>` – Used to define a form to collect user input.
<form action=”/submit” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<br>
<input type=”submit” value=”Submit”>
</form>
These are just a few examples of the many HTML elements available for web developers to use in creating web pages.
HTML Attributes
HTML attributes are used to provide additional information about an HTML element. They are added to the start tag of an element and are typically used to define the behavior or appearance of the element. Here are some commonly used HTML attributes:
- `id` – Used to give an element a unique identifier that can be used in CSS or JavaScript.
<div id=”example”>This is an example.</div>
- `class` – Used to give an element a class name that can be used in CSS to style multiple elements at once.
<div class=”example”>This is an example.</div>
- `style` – Used to add inline CSS styling to an element.
<div style=”color: red;”>This is red text.</div>
- `href` – Used in the `a` element to specify the URL of the linked page or resource.
<a href=”https://www.example.com”>Visit Example</a>
- `src` – Used in the `img` element to specify the URL of the image file.
<img src=”example.jpg” alt=”An example image”>
- `alt` – Used in the `img` element to provide alternative text for screen readers and for when the image cannot be displayed.
<img src=”example.jpg” alt=”An example image”>
- `title` – Used to provide additional information about an element, which is displayed when the mouse hovers over the element.
<a href=”https://www.example.com” title=”Visit Example”>Example</a>
- `type` – Used in the `input` element to specify the type of input field, such as `text`, `email`, or `password`.
<input type=”text” name=”username”>
- `name` – Used in the `input` element to specify the name of the input field, which is used to identify the input when the form is submitted.
<input type=”text” name=”username”>
- `value` – Used in the `input` element to specify the default value of the input field.
<input type=”text” name=”username” value=”John”>
These are just a few examples of the many HTML attributes available for web developers to use in creating web pages.
What is Semantic HTML?
Semantic HTML is the use of HTML markup to reinforce the meaning and structure of the content on a web page. It involves using HTML tags that have a specific meaning and convey information about the content they contain, rather than just using generic container tags like `<div>` or `<span>`.
By using semantic HTML, web developers can make their web pages more accessible to people using screen readers or other assistive technologies, as well as improve the search engine optimization (SEO) of their web pages. Some common examples of semantic HTML tags include:
- `<header>` – Used to define the header of a section or a page.
- `<nav>` – Used to define the navigation links of a page.
- `<main>` – Used to define the main content area of a page.
- `<section>` – Used to define a section of a page, such as a chapter or a subsection.
- `<article>` – Used to define an article or blog post.
- `<aside>` – Used to define a sidebar or a section containing supplementary content.
- `<footer>` – Used to define the footer of a section or a page.
By using these and other semantic HTML tags appropriately, web developers can create more meaningful, structured, and accessible web pages that are easier to understand and navigate for all users.
The Bottom Line
In summary, HTML is a markup language used to create web pages that are displayed on the internet. HTML uses tags to define the structure and content of a web page, with elements and attributes used to further refine and describe the content. HTML also allows for the creation of semantic web pages, which use specific tags to reinforce the meaning and structure of the content, making it more accessible and easier to understand for all users. By understanding the fundamentals of HTML, web developers can create compelling and accessible web pages that can be accessed and enjoyed by people around the world.