Basic knowledge of html css for beginners. HTML Language for Beginners

14.04.2019 Iron

This article is not intended to be a comprehensive guide to HTML document markup language. It describes the basics of HTML - the basic principles, concepts and definitions of this technology, having mastered which, you can easily move on in the study of HTML coding.

To study the lesson, download the archive with the necessary files.

HTML is a document markup language. The correct pronunciation is HTT.

You've probably ever worked in a Word document editor or similar. office applications? You probably know that this type of editor has rich capabilities for editing text, arranging elements, inserting pictures, etc.

Why, you might ask, write about word processors in an article on HTML? But why. If you figure it out, what is an office editor? This is an application for editing and displaying documents.

The key word here is document. That is, we create, edit and view a document in some program, in this case - in an office editor. If you open such a document in simple text editor, for example, in Notepad, we will see many strange symbols and signs. This mess of symbols is incomprehensible to humanity, but understandable to computers. Thanks to this internal language, the Word document takes on a certain structure and appearance in the editor itself, and the document appears before us in all its glory with formatted text and pictures in their place.

HTML is a document markup language for the browser. Word is the browser here, and the document is the HTML page. This is the very basis HTML technologies, the understanding of which is necessary in order not to confuse the markup language of web documents with programming languages. The name speaks for itself - using HTML we marking, where on the page the element, picture or text will be shown, and in what order they will appear next to each other.

Yes, simple typing and formatting of text in office applications has nothing to do with programming. But the observant reader will notice important detail- in a word processor we type, edit and format text and pictures using visual buttons and menus, but why is HTML code written by hand? Why learn so many technical details of writing markup for a document?

In fact, there are a lot of editors with which you can create and edit HTML pages, similar to Word. That is, the source HTML code is hidden for us and we don’t get into it.

A sort of Word for HTML. These visual editors are called:

WYSIWYG editors - W hat Y ou S ee I s W hat Y ou G et. That is, if we translate it into Russian: what we see is what we get.

I call them "wuzivoogies". Although this is phonetically incorrect, it clearly demonstrates the meaninglessness of this invention. Beginners very often use such editors to create their first websites. Of course, this is convenient - you don’t need to delve into the study of tags, design styles and other, at first glance, unpleasant and complex things. The editor itself automatically converts our actions into HTML code.

But, as they say, nothing just happens. More specifically, this approach has very serious drawbacks. What prevents everyone from using visual editors for HTML design pages? The fact is that pages formed in this way usually have a lot of unnecessary code and a lot of errors from a semantic point of view. Now, of course, there are no problems with a high-speed Internet connection and the difference in page size of 400 kb and 100 kb is not significant for speed, however, optimized and correctly written HTML code eliminates many problems and provides many advantages, namely:

Competent HTML code has a positive effect on search engine optimization and the speed at which a search robot crawls a site. The kilobytes of code generated by the vuzivuga are not acceptable and even harmful;

HTML code generated WYSIWYG editor has many semantic errors. That is, the tags generated by such an editor are used for other purposes, where they need to be used, for example, lists

comprehensive solutions

A lot of unnecessary tags are generated and the document structure becomes bloated. Let's say you move an element in such a program, first to the right, then to the left, then to the center - each action leaves a trace in the source HTML code. An editor is a program and it cannot know what exactly you want to get as a result; it generates tons of code taking into account everything possible options document behavior in the browser.
As a rule, editors for the visual design of HTML code quickly become outdated. And due to the lack of interest on the part of professionals, they are generally deprived of support and stop developing. And HTML is evolving. Everything develops except the wuzivoogi. Accordingly, they cannot generate the correct and modern code, which would involve new features and solutions.
To support and develop such projects is heavenly punishment. There can be no talk at all about using patterns and reusing code.

So, we will write HTML only with pens. Adequate tools for visual HTML editing They have not yet been invented, and they are unlikely to appear. The HTML markup language is easy to learn and understand, and automation tools writing HTML There is a lot of code, but more on that in other lessons.

After tinkering a little with the WYSIWYG editor, young HTML gurus leave this futile task and move on.

HTML Document Structure

For classes, I recommend downloading and installing the Sublime Text editor. I highly recommend not using the built-in Windows Notepad for HTML layout if you don’t want to break your psyche in the early stages of learning HTML.

We decided that we would write the HTML document code manually, that is, type it up. HTML Layout is the process of creating an HTML document. In the common people and informed circles, it’s just layout. Any document has a structure and certain rules construction. What elements does the code consist of, what is the structure of HTML?

Let's create an initial template on the computer - the index.html file, open it using an editor and paste the following code into it:

Header Document Body Please note that HTML documents have a .html extension.

So, in order from the example.

- document type (doctype)

This construction is always indicated at the beginning of the document so that the browser correctly “understands” which version of HTML is used when constructing the document.

Due to the fact that HTML is constantly evolving, it has several versions, like any software product. The current version of HTML is the fifth and the doctype given in the example is current.

In principle, there is no point in delving into the study of document types, because with the release of HTML5 this design has become a standard. Just insert it at the beginning of the document every time you start creating a website layout.

- beginning of the document

The first tag we see after the doctype is .

An HTML tag is a structural unit of HTML document markup. HTML code is made up of building blocks called tags. Each tag has its own function, and learning the HTML markup language is ultimately about learning the tags and their properties in a document.

I would like to note that learning HTML is not as difficult as it might seem at first glance. Learning the tags used in document markup is not such a big burden on the brain.

So, document markup starts with a tag and ends with a closing tag. Every tag that contains other tags or elements must be closed with a closing tag. For example, , , , etc.

The tag is mandatory because it contains the entire structure of the document and is a wrapper for other elements.

Tag

Next, we see the tag, which contains other elements that are not yet clear to us. Contains other elements - this means that the elements or tags are between the opening and closing tags of the construct:

content or other tags

The purpose of the tag is to store the meta information of an HTML document, that is, information that is not displayed in the document itself, but is important and largely determines how the document will look and behave.
This tag is required in the document.

Tag - document title Title

Title is a required tag that contains textual meta information that appears in the browser or tab title. The tag must be in the . Also, the contents of this tag are used by search engines to display the document in search results.

Meta tag

Meta tag is a specialized tag designed to provide structured data about a page. Meta tags are most often used in the . Meta tags are not required in the structure of an HTML document.

Favicon

Attaches a file with a favicon image to the document. Favicon is a miniature icon displayed next to the document title in a browser tab. A favicon is a graphic file measuring 16 x 16 (or 32 x 32) pixels that can have various formats, such as png, jpg, ico, gif. The ico format is traditionally used. Animated favicons are gif files containing animation. You can see an animated favicon, for example, on VKontakte, when a new message arrives.

CSS document styles

Includes a CSS file with HTML styling to the document.

CSS- cascading HTML document styles. Each tag that is located in the tag has a set of properties, such as color, width, height, position relative to other elements. All these properties are CSS styles that can be exported to an external file. The design connects external files to the HTML document, including CSS styles.

Note: The href property of a construct specifies the location of the external file. In our example, the file style.css And favicon.ico, are located in the same folder as the file index.html. does not have a closing tag.

Tag

The tag contains code or a link to a javaScript file and is most often used inside a tag, although Google's Page Speed Optimization tool recommends using this tag at the end of a document, before the closing tag.

In our example, an external file is connected script.js, which is located in the same folder as the main index.html file.

So, friends, we have looked at the main elements that are used most often in the tag. In addition to these elements, there are a number of others that are more specific and optional.

Body aka body

This is where all the fun and visually tangible things begin in the HTML layout of a document.

Let's move on directly to the layout of the visible part of the page. Everything that we write and layout inside the tag will be displayed in the browser. Let's open our file index.html in the browser in order to clearly see what we are doing in the editor.

The tag can contain any HTML tags necessary to design the document and provide its functionality (form). I will provide a table of the most used tags and briefly describe each one. You can immediately run the examples given in the editor.

Tag	Description
	A tag for creating links in a document. Example: link text The href attribute specifies the document to which the link will lead.
,	Makes text italics or bold (emphasized). Example: italic text bold (emphasized) text
, , , , ,	Document headings. There are 6 levels of headings in total, but in practice only h1 to h4 are used. There should be only one heading in the document, highlighted with the h1 tag, as the main heading of the document. Examples: First level heading Second level heading Third level heading... etc.
,	Document lists. They are a numbered or bulleted list. The element of such a list is the tag Examples: Bullet list item 1 Bullet Item 2 Numbered list item 1 Numbered list item 2
	Paragraph. This tag defines a paragraph of text separated from other paragraphs. It is highly recommended to close this tag. Example: The appearance of HTML markup is largely determined by CSS styles. However, some webmasters choose not to use styles in the early stages of a project.
	Picture. Using this tag, you can insert a picture into the HTML markup. Be sure to include in all images alternative text- "alt" attribute. This tag is self-closing. Example:
+ +	Forms and input elements. Forms are designed to enter information into the system on the server. A kind of feedback between the user and the site. For example, forms are used when you need to send some message to the server. In addition, forms can perform other functions, but the main task is to send data to the server. Example - simple form sending a message in which the site user indicates his name, E-mail and some text: Message text
	Defines a substring within a string. Used to style part of a line using CSS. One of the most frequently used tags. Without design, it does not manifest itself in any way in the browser. Example: Learning HTML, in most cases, does not cause any difficulties for beginners.
,	Tags are designed to insert video and audio into a document. The closing tag is required. Examples: The controls parameter tells us that the page should display media content controls, just like a regular audio/video player.
	Truly a royal tag. The most used and popular tag in HTML page markup. This is a block element designed to manage blocks on the site. The concept of “wonderful” layout is often used - this means that all blocks on the site are laid out using these tags. May contain other tags. Example: Text in a nested block All elements, in most cases, are styled with CSS style properties. The closing tag is required.
	This tag loads an external page into the document. Example:

We have not considered all the tags, and this is not necessary at this stage. The main thing is to understand the basic idea of HTML, learn how to use the tags presented above, and then move on.

Please note that all names in included files must be written Latin characters, without spaces.

For example, don't:

This is necessary for greater compatibility of page content. In addition, standards for writing HTML code dictate.

So, now we know some basics of HTML: what structure a typical HTML document should have, we know some of the most popular tags, it’s time to get down to the most delicious part - namely, cookies.

Practical assignment on HTML layout

If you haven't downloaded the archive with examples yet, do so. For example, you can look at the example.html file, which was also in the archive.

Unpack the archive and create an index.html file in the folder with the unpacked files. Open the created file using the Sublime Text text editor;
Create an initial document structure with a doctype, a tag containing and and proceed to edit the contents of the tag;
Open the readme.txt file and complete the appropriate tasks in the index.html file you created. To check the result, open index.html in your favorite browser.

This concludes the lesson on the basics of HTML, in the next lesson “CSS Basics” we will learn how to manage the styles of document elements, get to know cascading style sheets, learn how to use style classes and make our layout beautiful and colorful.

See you again, friends!

HTML basics for beginners, what every novice webmaster or blogger should know now. If you want to learn how to create basic websites, understand the code itself, know what goes behind what and what should go, it is simply impossible to do this without knowledge of the basics of the HTML language. On my blog I will have a whole chain of articles that I will devote to this topic from A to Z, I will describe each tag that is present in the document, what it means and how to use it correctly.

If you don’t know the most basic things, your path is closed. I believe that every person who decides to develop and create websites should know and understand the basics, what the site itself consists of, how it works and what happens in the code itself.

Of course, there are quite a few programming languages, they are all complex in their own way, but there are some that you absolutely need to know. If you want to beautifully design a letter to be sent by mail, you have your own VKontakte group, a group on other social networks, the same youtube channel, you need to tinker with the code on any of the site engines, basic concepts you just have to know.

I gave only a few examples, in fact, now this knowledge is being used more and more often on the Internet. I am more of a practitioner than a theorist, so in my articles in this section I will show you my examples of how and what I did, step by step. I will post both example pages and entire sites.

An Html document is the simplest text document, a tagging language that you come across every day on the Internet. Tags describe the structure of a document. Tags are formatted as angular< >brackets, inside which the name of the tag is written. The browser looks at the structure of the document, builds it and displays it according to its instructions on your monitor, if, of course, you did everything correctly.

This whole process begins before you even see the finished picture. Browsers process a document sequentially, from beginning to end. Including everything that should be on the page. Tables, pictures, scripts and so on, except this includes CSS styles.

What is html - if you look at what Wikipedia writes - (HyperText Markup Language) hypertext markup language for documents. Most pages on the Internet contain page markup in this language. This language is interpreted by browsers, and the resulting formatted text is displayed on your computer monitor or mobile device.

This language is inherently very easy and accessible to learn. Anyone can learn and understand its basics. To use such a language, you need to know and use descriptors, which are also called tags. It is with the help of tags that a document is created.

What should the structure of the document consist of, what tags should be present. Let's look at everything with one small example. I wrote some text in MS Office and showed it in this screenshot.

To display this text in the browser in the same way as it was written in the document, you need to add page markup to it, which includes some tags. First, look at them, then I will describe each one who is responsible for what.

Welcome to my blog, you are now taking a lesson on HTML Basics. If you liked this article, you can subscribe to this blog to receive new articles in your email inbox.

What tags does any html document consist of, what does it include, and where should it all be written down?

< html >

< body >

< h2 >< / h2 >

< p >Welcome to my blog, now take the tutorial on HTML Basics. If you liked this article, you can subscribe to this blog to receive new articles in your email inbox.< / p >

< h2 >Blog of Evgenia Nesmelov! Nesmelov. ru Basics of HTML and CSS for beginners< / h2 >

< / body >

< / html >

Any code consists of characters that are placed in angle brackets. All these are called elements. All elements usually consist of two tags, opening and closing. I advise you to initially look carefully at the tags; if you miss one of them and do not close it, you will need to revise large parts of the code to find the error.

There were cases when it took more than one day, a person contacts and asks for help, he cannot find an error on his site, so always look very carefully at what and where you write. Let's now use this example to look at each element of the code, what is written in it, what it means and what happens in the end.

Most tags are paired, which includes an opening tag and a closing tag. In addition to such tags, there are also single tags. Tags can go together with others, thus nesting within each other. For example, display text in bold and italics at once.

Text

< strong > < i >Text< / strong > < / i >

Let me remind you once again, you need to follow the rules that are present in the document. This is how the browser understands what is on the page, its sequence, content, and so on.

A tag is a component that tells the web browser to perform a particular task. For example, the presence of a paragraph, table, form or image.

Attribute - modifies the tag. For example, you can align a paragraph centered or right-aligned, also set the location of the image on the page, and so on.

ALWAYS close tags, if you open it, be sure to close it. Otherwise, an error will occur and your document will not display correctly on the page. There are also exceptions, which should not be forgotten.

It is clearly necessary to understand that there is a document title and its body. The title is everything that is contained in the tag. Document body (), the body of the document contains all the contents of the page. If there is a need to leave a section of code for yourself, thereby enclosing these tags in comments, the tag is used for this. Everything that is inside such a tag serves as a comment and is not perceived by browsers.

Let's start with the very first one. At the beginning of the document I opened a tag and at the end I closed it. This code is present in absolutely every document; it tells the browser that everything placed between these tags is HTML code. It is the root of the document itself; everything that is subsequently present behind this tag is no longer included in the document and is not perceived by browsers. At the very beginning of the document, the tag is opened and at the very end it must be closed.

The entire section of this tag contains all the technical information of the document. Like the previous tag, head must also be opened and closed at the end. This information includes the page title, description, search engine keywords, and encoding. About the encoding a little below.

Content

< head >Content< / head >

This tag is included in the head, it must be written inside head tag. This title tag is mandatory and must be present in every HTML document. In addition to this, it appears as the title of the browser window. The length of such a header should not exceed 60 characters. The text of such a header should contain the most complete information that characterizes the content of the page.

If you wrote "Hello World" in the header, this is the information that should be displayed on the page and no other. You shouldn’t deceive people and search engines, they don’t like it, and thereby you make things worse for yourself. The information contained in this tag should be relevant to the content of your page.

After the mandatory title tag, there is an optional, but equally important meta tag. This tag is single. Using this tag, you set a description for the page (description) and its keywords (keywords).

In addition, in meta tag may contain data about the author of the page and other metadata properties. You can prevent indexing of a page as a whole for search engines. Set the page to automatically refresh after 20 seconds or after 5 seconds, followed by transition to another page.

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

There can be several such meta elements, since they can carry completely different information. Other users, when they open the page in the browser, do not see all your descriptions; all this remains hidden from view.

The style tag can also be used to set styles on the page. If you use many different css styles, then it is advisable to set them in a separate file. If you need to specify several of them, all this can be specified directly in the html document.

.base ( width: 100px; background-color: #000; height: 150px; color: #fff; )

< style type = "text/css" >

Base(

width: 100px;

background - color : #000;

height: 150px;

color : #fff;

Or add styles specifically to one tag; to do this, you need to add a style element inside the tag itself. This tag must be used inside a container that sets styles for the page. You can use several such tags, this will not be an error.

A bit similar to the previous tag, using link tag You can set styles for a document that are in another file. In other words, you can attach a complete css style sheet, which consists of many properties, to an existing document. Thus, you reduce the size of the document, which will ultimately load and open faster on a computer or mobile device with low internet speed.

You can connect more than one file, there are no restrictions. There is no need to close such a tag. If everything is done correctly, specific styles from a separate file will be loaded into your document. This tag can be added to the basics of html and not forget about its existence. The result is a picture like this:

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

Using the script tag, you can connect different scenarios (scripts) to a document. The presence of the closing tag is required. The script itself can be located at the beginning of the document, inside or at the end.

Tells the browser that anything placed between these tags should appear in your browser window. Here are the main tags that can be present in absolutely every document. The body tag serves as the main body of the page, which includes all of its content. It is advisable to open this tag and remember to close it at the end of the document.

Let's go further, we see a tag that opens and closes in the same way. This tag denotes the main title of the text; in most cases, under the H1 heading is the page title. In fact, there are only six data headings. . They are also used in SEO, but this is a slightly different topic. I will definitely highlight one article for this and give detailed description for them, subscribe to blog updates so you don’t miss anything.

The presence of such headings in the article will play an important role in promoting the page. In addition, their use gives you a clear page structure, its title, subheadings, highlights, subparagraphs, and so on. Always use them and put them into practice. On many CMS, such as WordPress, when writing text, you can see “heading 1”, “heading 2”, “heading 3” and so on. They are the ones responsible for h1, h2 and h3.

If you write body text from a new paragraph, you write a tag

At the beginning and close it at the end

HTML document

This text will be bold, and this one is also in italics

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title >HTML document< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Every document contains a head and title element. The first one, which comes immediately after the first tag. This tag contains all the information about the page, it also contains the element. Title – information about the title of the page, in other words the title of the page, its name. It is in the title that you indicate the correct name of the page by which the user will search for you through a search engine, a very important point. Both elements must be open and also closed. Each element is closed with a “/” sign. The result is a picture like this.

Heading&Page Contents

< / html >

As you can see, there is nothing complicated. Here are the most basic tags that should be present in every html document. Do not forget to close each of them, otherwise the browser will not be able to perceive the full picture of the code. You need to know and remember this always. Then you start inserting text, pictures, videos, and so on. But this will already be in other articles.

To work with the code, use the Notepad++ program. It is free, and it is not difficult to find it on the Internet. Very convenient for understanding any code; it also conveniently displays the opening and closing tags. We support the syntax of more than 40 programming languages. Just what you need to learn the basics of html.

Notepad is superior in every way to a regular notepad. For maximum convenience, ease and learning this editor You must first install it on your computer. The most important advantage and convenience Notepad editor++ shows hints when writing code, which makes your work much faster and better.

Each document must also contain the following doctype element. Why is it needed and what should be in it. Usually people are not very keen on these lines, they copy them into their documents and work calmly. These elements tell the browser what version of html is being used in the document, what the page description is, what encoding is being used, what keywords are included, who the author is, and what the page is called.

They are usually placed at the very beginning. There are several options and they all differ from each other, I will write one example that is used most often. This blank can be used as a ready-made template. Next there will be a clear description of each line, there should be no problems with this.

Briefly in clear language about the basics of html: This line tells the browser that this document is XHTML version 1.0, English is used and all this mess is located at this address. Next, in the meta tag we indicate the encoding that is used. The most commonly used is Windows 1251.

Description - the topic of SEO is touched upon, one of the three main tags that must be present in absolutely every document; this tag indicates the description of the page. What is written on this page, a short description, no more than two sentences. The keywords tag also covers the topic of SEO, this tag is required. It contains keywords that Internet users will use to find you through search engines.

The title tag contains the name of the document itself, its title, which we see in the browser. Probably the most important tag in the entire document, which has the greatest impact on the promotion of the page. The article on adding and designing describes this tag in more detail.

What you need to remember from this lesson about the basics of html:

Almost all tags open and close;
The document begins with the tag ;
Presence of tag;
Presence of tag;
Clear html structure document.

All main pages should always be named index. This is how it is accepted and everyone is used to it, no matter what the file extension is, it can be html or php. It is always called that way.

Watch a video about HTML basics from Webformyself.

Hypertext markup language, basic elements and structure. I will try to describe all this and much more on my blog. First of all, useful information will be written for beginners, a code example will be provided, and the opportunity to download the example itself along with the finished page will be provided.

HTML (H ypert ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing ", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.">tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

My cat is very grumpy

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

My cat is very grumpy

Let's explore this paragraph element a bit further.

The main parts of our element are as follows:

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect - in this case where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends - in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element, which in this case is just text.
The element: The opening tag, the closing tag, and the content together comprise the element.

Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you don"t want to appear in the actual content. Here, class is the attribute name, and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.

An attribute should always have the following:

A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
The attribute name, followed by an equals sign.
The attribute value, wrapped by opening and closing quotation marks.

Note: Simple attribute values that don"t contain ASCII whitespace (or any of the characters " " ` =< >) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

You can put elements inside other elements too - this is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a element, which means that the word is to be strongly emphasized:

My cat is very grumpy.

You do however need to make sure that your elements are properly nested: in the example above, we opened the

element first, then the element; therefore, we have to close the element first, then the

element. The following is incorrect:

My cat is very grumpy.

The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!

Some elements have no content and are called empty elements . Take the element that we already have in our HTML page:

This contains two attributes, but there is no closing tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):

My test page

Here, we have the following:

- The doctype. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one cares about them, and they are just a historical artifact that needs to be included for everything to work right. For now, that"s all you need to know.
- the element. This element wraps all the content on the entire page and is sometimes known as the root element.
- the element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page"s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
- This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
- the element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.
- the element. This contains all the content that you want to show to web users when they visit your page, whether that"s text, images, videos, games, playable audio tracks, or whatever else.

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

This section will cover some of the essential HTML elements you"ll use for marking up the text.

Heading elements allow you to specify that certain parts of your content are headings - or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, – , although you"ll commonly only use 3 to 4 at most:

My main title My top level heading My subheading My sub-subheading

Now try adding a suitable title to your HTML page just above your element.

Note: You"ll see that your heading level 1 has an implicit style. Don"t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.

A lot of the web"s content is lists, and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:

Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a
- Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an element.

Basic knowledge of html css for beginners. HTML Language for Beginners

Best articles on the topic