HTML Intoduction

What is HTML?

HTML stand for 'Hyper Text Markup Language' and is the standard markup language for creating web pages. It describes the structure of a web page using a series of elements and tags and tells the browser how to display the content on the page.

A Simple HTML Document Example


                        <!DOCTYPE html>

                        <html>

                        <head>

                        <title>Page Title</title>

                        </head>

                        <body>

                        <h1>My First Heading</h1>

                        <p>My first paragraph.</p>

                        </body>

                        </html>

Example Explained

<!DOCTYPE html> tells the browser that this is an HTML5 document
The element <html> is the root element of the page
The element <head> contains meta information about the page
The element <title> holds the title of the page which is shown in the browsers title bar or tab and on the task bar
The element <body> is a container for all the visible content on the page
The element <h1> defines and contains the content of a large heading
The element <p> defines and contains the content of a paragraph

What is an HTML Element

An HTML element is defined by a start tag, content, and an end tag. For example:

<tagname>content goes here</tagname>

So if the above example is true (which it is) then the following is also true:

Everything between the html tags makes up the html element
Everything between the body tags makes up the body element
etc. etc.

Some HTML elements have no content and are called empty elements. For example:


                            <tagname />
                            
                            <br />
                            

                            <hr />

The br element inserts a line break and contains no content and the hr element creates a horizontal line and also contains no content. Some elements such as the img element are empty elements that contain attributes. For example:

<img src="img.jpg" alt="My Image" />

The img tag isn't always an empty element. For example:

<img src="img.jpg" alt="My Image">My Image</img>

This might seem a little confusing at first but the img tag is a little different from the other tags. Don't worry about it for now. We will get in to this later. And it will all make perfectly good sense.

On a final note, notice that !DOCTYPE has no closing tag. That is because this is a special tag used to tell the browser how to decode and execute the contents of the document. CSS (cascading style sheets), java script and things like php etc. are not HTML and will be handled differently but are used to make up the HTML page, giving it a unique look and functionality. We will get in to all this later after we actually know HTML and how documents are laid out. This will become very important later when we get in to SEO (search engine optimization) to increase your site's search engine ratings.

In conclusion, HTML is a markup language that is used to create web pages. It is the backbone of all web pages and is used to structure the content on the page. HTML elements are defined by tags and attributes. HTML documents are structured with a head and body section. The head section contains metadata, title, and links to stylesheets and scripts. The body section contains the content of the web page, including text, images, and links. HTML uses attributes to provide additional information about elements. Common HTML elements include headings, paragraphs, lists, links, images, and forms. HTML5 introduced new semantic elements like <header>, <footer>, <article>, and <section>. HTML is often used in conjunction with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity. HTML is a powerful and flexible language that is easy to learn and use. It is the foundation of all web development and is essential for anyone who wants to create web pages or web applications. With all that said, if you are ready to learn HTML, you are in the right place. This is the first step in your journey to becoming a web developer. So let's get started!

The Basics