HTML stands for Hypertext Markup Language. It is the standard language used to create web pages. HTML documents consist of elements and tags, which are used to create the structure and content of a webpage.
HTML consists of a series of tags, which are used to define the structure and content of a web page. The most basic HTML tags include the <html>, <head>, <title>, <body>, and <p> tags.
An HTML element is a block of content, such as a paragraph, heading, or image. Elements are surrounded by tags, which are used to define the type of element and provide additional information about it. For example, the <p>
tag is used to create a paragraph element, while the <img>
tag is used to create an image element.
The basic structure of an HTML document consists of a head and a body. The head contains information about the document, such as the title and meta data, while the body contains the actual content of the webpage.
The <!DOCTYPE>
tag is used to specify the version of HTML that the document is written in. The <html>
tag surrounds the entire document, and within it, the <head>
and <body>
tags are used to define the head and body sections of the document.
The <head>
section contains information about the document, such as the title, which is displayed in the browser's title bar or tab, and metadata, which provides information about the document to search engines and other web crawlers. The <title>
tag is used to define the title of the document, while the <meta>
tag is used to provide additional information such as keywords and a description.
In addition to these basic tags, there are many other tags that can be used to create more complex web pages. These include tags for headings, lists, links, images, and more.
For example, headings are defined using the <h1> to <h6> tags, with <h1> being the highest level heading and <h6> being the lowest. Lists can be created using the <ul> (unordered list) and <ol> (ordered list) tags, along with the <li> tag for each list item.
The <body>
section contains the actual content of the webpage. The content is divided into elements, such as HTML headings, HTML paragraphs, and images, which are defined using tags. Common tags used in the body include:
<h1>
to<h6>
: headings<p>
: paragraphs<img>
: images<a>
: links<ul>
: unordered lists<ol>
: ordered lists<li>
: list items<div>
: divisions or sections of the page, often used for layout and styling purposes<span>
: a small piece of content, often used for styling purposes
Images can be added to a web page using the <img> tag. The "src" attribute is used to specify the URL of the image file, while the "alt" attribute is used to provide a text description of the image for accessibility purposes.
HTML also includes several attributes, which are used to provide additional information about an element. For example, the src
the attribute is used to specify the source of an image or script and the href
the attribute is used to specify the link of an anchor tag.
HTML also includes tags for creating tables, forms, and other types of content. The <table> tag is used to create tables, with <tr> (table row), <th> (table header), and <td> (table data) tags used to define the rows, headers, and cells of the table, respectively. Forms can be created using the <form> tag, along with various input types such as text fields, checkboxes, and radio buttons, which are defined using the <input> tag.
HTML5 is the latest version of the HTML language and it was published in October 2014. HTML5 introduced new tags and attributes that can be used to create more interactive and multimedia-rich web pages. Some of the new tags in HTML5 include:
- <article> – used to represent a self-contained composition in a document, such as a forum post, a magazine or newspaper article, or a blog entry
- <aside> – used to represent a section of a page that contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content
- <audio> – used to embed audio files, such as music or sound effects, into a web page
- <canvas> – used to create graphics and animations on the fly using JavaScript
- <figcaption> – used to provide a caption for a <figure> element
- <figure> – used to represent a piece of self-contained flow content, typically with a caption, that is typically referenced as a single unit from the main flow of the document
- <footer> – used to represent a container for the footer of a document or section
It is used in conjunction with other languages such as JavaScript and CSS to create dynamic, interactive websites.
Cascading Style Sheets (CSS) is a separate language that is used to control the layout and style of an HTML document. CSS can be used to change the font, color, & size, etc. spacing of elements, as well as to control the layout of the page. CSS can be added to an HTML document in several ways, including:
- using the
style
attribute within an HTML element - using a
<style>
tag in the head of the document - linking to an external CSS file using the
link
tag
JavaScript is another language that is often used in conjunction with HTML and CSS. JavaScript is a programming language that can be used to add interactivity and dynamic content to a webpage. JavaScript can be added to an HTML document in several ways, including:
- using the
script
tag within the body of the document - linking to an external JavaScript file using the
script
tag
There are more HTML element that described below:
- <html> - Defines the start and end of an HTML document
- <head> - Contains meta information about the document, such as the title
- <title> - Defines the title of the document, which is displayed in the browser's title bar
- <body> - Contains the main content of the web page
- <p> - Defines a paragraph of text
- <h1> to <h6> - Defines headings, with <h1> being the highest level and <h6> being the lowest
- <ul> and <ol> - Defines unordered and ordered lists, respectively
- <li> - Defines a list item
- <a> - Defines a hyperlink
- <img> - Defines an image
- <div> - Defines a section of the document as a block-level element
- <span> - Defines a section of the document as an inline element
- <header> - Defines a header section of a document or a section
- <nav> - Defines navigation links
- <main> - Defines the main content of a document
- <article> - Defines a self-contained composition in a document
- <section> - Defines a section of a document
- <aside> - Defines a section of a page that contains content related to the main content
- <footer> - Defines a container for the footer of a document or section
- <form> - Defines a form for user input
- <input> - Defines various types of input fields, such as text, radio buttons, and checkboxes
- <select> - Defines a drop-down list
- <textarea> - Defines a multiline input field
- <label> - Defines a label for an input element
- <fieldset> - Groups related elements in a form
- <legend> - Defines a caption for a fieldset
- <button> - Defines a clickable button
- <table> - Defines a table
- <tr> - Defines a table row
- <th> - Defines a table header cell
- <td> - Defines a table data cell
- <thead> - Defines a container for the header content in a table
- <tbody> - Defines a container for the body content in a table
- <tfoot> - Defines a container for the footer content in a table
- <colgroup> - Specifies groups of columns in a table for formatting
- <col> - Specifies properties for a column in a table
- <caption> - Defines a caption for a table
- <style> - Defines a section for CSS styles
- <script> - Defines a section for JavaScript code
- <link> - Defines a link to an external resource
- <meta> - Defines metadata about the document
- <base> - Defines the base URL for all relative URLs in a document
- <audio> - Defines an audio player
- <video> - Defines a video player
There are many more which will be explored in upcoming articles. Meanwhile, stay tuned with us on Progrramers. We will see you again soon.
Thank You and Have a nice learning experience.