Contents:
What is this language
HTML is a language for creating websites. If you compare a web page to a house, HTML will be its frame and walls.
The language appeared in 1991 thanks to Tim Berners-Lee. The scientist needed a way to share scientific documents over the Internet. This is how HTML was born - a simple way of marking up text with special commands - tags.
Browsers understand HTML as instructions: where to place text, pictures, and other objects on the page. For example, the command <h1>Hello!</h1> will tell the browser to show the text "Hello!" as the main heading.
HTML is used to:
- Create a site structure;
- Insert images;
- Adding links;
- Text formatting;
- Video posting.
Websites cannot exist without HTML—it is the foundation of the World Wide Web.
Learn how to write websites and software on the "Frontend Developer" course
Learn moreWhat is in HTML
HTML stands for HyperText Markup Language. With the help of language, the browser understands where on the site there should be text, pictures, and links.
A simple example: when you read the news on the Internet, you see:
- Heading;
- Text;
- Photos;
- Buttons for navigating to other articles.
All of this is placed on the page using HTML. It works as the skeleton of the site - it determines the structure and order of elements.
Structure
An HTML document is like a constructor - it consists of several required blocks. Here are the main parts of an HTML document:
- <!DOCTYPE html> — the first line of the document. It tells the browser that it is an HTML file.
- <html> — the main tag, inside which all the rest of the code is located.
- <head> — a section with technical information. Here the page settings are stored: title, encoding, connection of styles.
- <body> — the main part of the document. Everything the user sees is located here: text, images, buttons.
- <footer> — the bottom final block of each web resource.
Here is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Basic Tags
HTML has many tags — the basic structural units of a web page. We'll talk about the main ones.
- Headings. Tags from <h1> to <h6> are used to create headings. <h1> is the main and largest heading on the page, and <h6> is the most insignificant and smallest. Tags structure and format the text according to importance and facilitate navigation.
- Paragraphs. The <p> tag defines a regular paragraph of text. It separates one block of text information from another, making the text readable.
- Links. The <a> tag creates links. It is needed to connect the current page with others. This is important for navigation and communication.
- Images. The <img> tag is used to insert images into the page. It requires the path to the image file and may contain additional information. For example, alternative text.
- ListsThe <ul> and <ol> tags create bulleted and numbered lists, respectively. They help structure information into points, making it easier to perceive.
We'll show you how tags work with an example. Try running this code in your editor:
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Title</title>
</head>
<body>
<h1>Main Heading</h1>
<p>Main Text</p>
<h2>Subheading</h2>
<p>Subtitle text</p>
<h3>Subtitle</h3>
<p>Subtitle text</p>
<h4>Link</h4>
<p>Link Description</p>
<p>Link Example: <a href=»https://www.example.com»>Link</a></p>
<h5>Image</h5>
<p>Image Description</p>
<p>Image Example: <img src=»https://via.placeholder.com/150″ alt=»Image»></p>
<h6>List</h6>
<p>List Description</p>
<p>Example of bulleted list: </p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Example of a numbered list: </p>
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</body>
</html>
Attributes
Attributes in HTML are special "hints" for tags. They add details to elements so that they work as intended. For example, they help set the address of a link or indicate the path to an image.
Attributes make elements flexible. Without them, many HTML features would be unavailable.
- href is used in the link tag. The attribute specifies the address of the site to which the link leads. For example, this code creates blue clickable text: <p>Example link: <a href=»https://www.example.com«>Link</a></p>
- src specifies the path to the image. Example of use in code: <img src=»image.jpg» alt=»Image description»>
Attributes are always included in the opening tag and are written in the format name = "value". They help make page elements interactive and informative, which is important for user experience.
Block and Inline Models
HTML allows you to control the layout of elements on a web page using the box and inline models. These models determine how exactly different blocks of content interact with each other.
Block elements are elements that occupy the entire width of the container they are located in. They start on a new line, creating a visible block on the page. Examples of such elements: <div>, <h1>, <p>. Visually, they resemble bricks that are laid one on top of the other.
A container is an element that can contain other elements. It helps group and organize content.
Inline elements are placed on a single line. They take up only the space they need, which helps maintain the overall structure of the text. Elements such as <span>, <a>, <strong> are placed within the line without creating breaks.
Differences between the models: Block elements start on a new line and span the entire width of the parent container. And inline elements line up and take up only their own width.
What is CSS
HTML and CSS are usually used together to create websites. HTML determines how a page is structured—it is its "skeleton." CSS, on the other hand, determines how this "skeleton" looks. It gives the website styles, colors, fonts, and margins.
CSS is a language that allows you to change the appearance of HTML elements. Without CSS, websites would look like bare text without any decoration.
With CSS, developers work with these elements:
- Colors — set the background or text color.
- Fonts — select the font style and size.
- Indents and margins — position elements on the page.
For example, let's improve our previous code using CSS:
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Title</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
color: #4CAF50;
}
p {
margin-bottom: 20px;
}
a {
color: #1E90FF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px 0;
}
ul, ol {
margin-bottom: 20px;
padding-left: 20px;
}
ul li, ol li {
margin-bottom: 10px;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Main header</h1>
<p>Body text</p>
<h2>Subheading</h2>
<p>Subheading text</p>
<h3>Subtitle</h3>
<p>Text Subheading</p>
<h4>Link</h4>
<p>Link Description</p>
<p>Link Example: <a href=»https://www.example.com»>Link</a></p>
<h5>Image</h5>
<p>Image description</p>
<p>Image example: <img src=»https://via.placeholder.com/150″ alt=»Image»></p>
<h6>List</h6>
<p>List description</p>
<p>Bulleted list example: </p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p>Numbered example list:</p>
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</body>
</html>
As you can see, all the CSS code is added within the <style> tag. This is what our code displays in the browser:
What is HTML5
HTML5 is the latest version of the web page markup language. It adds new features for creating websites. HTML5 makes code clear and convenient for developers. Key improvements include:
- Structural tags. HTML5 adds special tags for marking up parts of a page:
- <header> — for the site header.
- <footer> — for the footer.
- <article> — for articles.
- <section> — for sections.
- Multimedia.Tags for working with audio and video: <video src=»film.mp4″>Video</video><audio src=»song.mp3″>Music</audio>
- New types of form fields. date — for selecting a date, email — for entering an email address, tel — for phone numbers, color — for selecting a color.
Currently, this version of HTML is the standard for creating websites.
Useful materials from the editors of Skillbox.by
HTML is the basis for all web pages. It defines the structure of the content and allows browsers to display information correctly. Without HTML, it would be impossible to create any web resource.
Hypertext Markup Language is the starting point for anyone who wants to master web technologies. And knowledge of HTML is the first step to mastering complex tools and programming languages. You can take this first step with the help of books, videos, websites, and useful articles - you can master the basics of HTML in a few days. We have collected materials that will help you with this:
Literature:
- "HTML and CSS: Web Page Development and Design" by John Duckett - the book is suitable for beginners and explains the basics in simple language.
- HTML5: A Pocket Reference by Jennifer Robbins - This book covers the latest HTML features and is perfect for quick learning.
- Learning HTML5 by Bruce Lawson and Remi Sharp - This book shows how to use HTML5 to create web pages.
Sites:
- developer.mozilla.org — HTML reference.
- ru.stackoverflow.com— List of all HTML documentation and references.
Telegram channels:
- Frontend Interview - Javascript / Html / CSS interviews — a channel for preparing for front-end interviews.
- Frontend Library | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js — articles and various materials on web development.
Master the profession of "Frontend developer from scratch to PRO" with Skillbox
You will learn JavaScript, TypeScript, Ionic and other trending technologies for web application development. Build a portfolio, learn to work in a team, and start a career as a frontend developer.
Get access