Programming

HTML Tutorial for Beginners

Markus

Jan 8, 2024 — 7 min read

HTML stands for HyperText Markup Language. It is the standard language for creating web pages and web applications. HTML describes the structure and content of a web page using tags and attributes. Tags are keywords that define different elements in a web page, such as headings, paragraphs, images, links, etc. Attributes are additional information that modify the behavior or appearance of an element, such as size, color, alignment, etc.

HTML Syntax

An HTML document consists of two main parts: the head and the body. The head contains information about the document, such as the title, meta data, style sheets, scripts, etc. The body contains the actual content of the document, such as text, images, links, etc.

An HTML document starts with a doctype declaration that tells the browser what version of HTML the document is using. The most common doctype declaration for HTML5 is <!DOCTYPE html>.

An HTML document also has a root element that encloses the whole document. The root element is <html>.

An HTML element usually has a start tag and an end tag, with some content in between. For example, <p>This is a paragraph.</p>. Some elements are self-closing, which means they do not have an end tag. For example, <img src="image.jpg" alt="Image">.

An HTML attribute usually has a name and a value, separated by an equal sign. The value is enclosed by double or single quotes. For example, <p style="color:red;">This is a red paragraph.</p>.

Here is an example of a simple HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first web page.</p>
  <img src="image.jpg" alt="Image">
  <a href="https://www.bing.com">Visit Bing</a>
</body>
</html>

HTML Elements

There are many HTML elements that you can use to create different types of content in your web page. Here are some of the most common ones:

<h1> to <h6>: These are heading elements that define the titles and subtitles of your web page. The numbers indicate the level of importance, with <h1> being the most important and <h6> being the least important.
<p>: This is the paragraph element that defines a block of text. You can use it to write sentences and paragraphs in your web page.
<img>: This is the image element that displays an image in your web page. You need to specify the source of the image using the src attribute. You can also provide an alternative text for the image using the alt attribute, which is useful for accessibility and SEO purposes.
<a>: This is the anchor element that creates a hyperlink to another web page or resource. You need to specify the destination of the link using the href attribute. You can also provide a text for the link using the content of the element.
<ul> and <ol>: These are the unordered list and ordered list elements that create a list of items in your web page. You need to use the <li> element to define each item in the list. An unordered list displays the items with bullet points, while an ordered list displays the items with numbers or letters.
<div> and <span>: These are the division and span elements that create generic containers for other elements or content. You can use them to group or separate different parts of your web page. You can also use them to apply styles or scripts to specific sections of your web page.
<table>: This is the table element that creates a table of data in your web page. You need to use the <tr> element to define each row in the table, the <th> element to define each header cell in the table, and the <td> element to define each data cell in the table. You can also use the <thead>, <tbody>, and <tfoot> elements to define the head, body, and foot sections of the table.

There are many more HTML elements that you can use to create different types of content in your web page. You can find a complete list of HTML elements and their descriptions on W3Schools.

HTML Tips and Tricks

Here are some tips and tricks that can help you create better web pages with HTML:

Use comments to add notes or explanations to your HTML code. Comments are ignored by the browser and do not affect the output of your web page. You can create a comment by using the syntax .
Use indentation and whitespace to make your HTML code more readable and organized. Indentation means adding spaces or tabs before the start of an element to show its level of nesting. Whitespace means adding spaces, tabs, or line breaks between elements or content to create gaps or separation. Indentation and whitespace do not affect the output of your web page, unless you use the <pre> element, which preserves the formatting of the content.
Use semantic elements to give meaning and structure to your web page. Semantic elements are elements that describe the content or function of the element, rather than the appearance or presentation. For example, use the <header>, <nav>, <main>, <section>, <article>, <footer> elements to define the different parts of your web page. Use the <strong>, <em>, <mark>, <del>, <ins> elements to emphasize or modify the text in your web page. Use the <figure> and <figcaption> elements to add captions or descriptions to your images or other media in your web page. Semantic elements can help improve the accessibility and SEO of your web page, as well as make it easier to style and manipulate with CSS and JavaScript.
Use HTML entities to display special characters or symbols in your web page. HTML entities are codes that start with an ampersand (&) and end with a semicolon (;). For example, use & to display an ampersand (&), use < to display a less-than sign (<), use © to display a copy right sign (©). You can find a complete list of HTML entities and their codes on here.
Use HTML forms to collect user input or data in your web page. HTML forms are elements that allow the user to enter or select information, such as text, numbers, dates, files, checkboxes, radio buttons, etc. You need to use the <form> element to define the form, the <input> element to define the input fields, the <label> element to define the labels for the input fields, the <button> element to define the buttons for the form, and the <select>, <option>, <textarea>, <fieldset>, <legend> elements to define other types of input or grouping in the form. You also need to specify the action and method attributes for the form, which define where and how the form data is sent to the server. Learn more about HTML forms and their attributes.

The next steps

HTML is not the only language you need to create web pages and web applications. You also need to learn CSS and JavaScript. CSS stands for Cascading Style Sheets. It is the language that defines the style and layout of HTML elements, such as colors, fonts, borders, backgrounds, etc. JavaScript is the language that adds interactivity and functionality to HTML elements, such as animations, events, forms, etc. Together, HTML, CSS, and JavaScript form the core of web development.

Conclusion

This is the end of the HTML tutorial for beginners. I hope you learned something new and useful about HTML. HTML is a powerful and versatile language that can help you create amazing web pages and web applications. You can practice and experiment with HTML using online editors, such as CodePen or JSFiddle.

You can one day also learn more advanced topics and features of HTML, such as HTML5, multimedia, canvas, SVG, web storage, web workers, etc. Happy coding! 😊