Purpose and basic rules of HTML
What is the purpose of HTML and what is not?
A well-organized website is divided into different components. We differentiate between content, layout, animations and interactivity. Different languages are used for these components.
HTMLstructures the content.
CSSstyles the content.
What is HTML?
HTML is an acronym for
HyperText Markup Language.
HTML allows us to display texts, images, tables and hyperinks in a document.
The acronym HTML contains its most important functions:
Hypertexts are documents that are interconnected by the so-called hyperlinks. Hypertexts therefore form the foundation of the internet as it would be useless without enough interconnection.
Markup is an important component of a website. The so-called
tagsclassify contents. These tags are also crucial for search engines like Google.
HTML is not a programming language - Here you can read why it isn't. HTML is a markup language.
Basic rules of HTML
Tags and Elements
With tags we define paragraphs, tables, images, hyperlinks etc. in a document. Tags form the structure of an HTML file.
Look at the example below:
<p> represents a paragraph.
This code creates a paragraph which contains the sentence
Structure of tags
A tag consists of a definition (for example
p) which is located between two angle brackets.
Usually, tags occur pairwise. These pairs and their content, which is positioned between both tags, you call elements.
The second tag, which is also called
end-tag, has an additional slash before the tag-definition. This helps the browser to
There are also elements which consist of only one tag.
For example, a line break is defined by
<br/> and an image is defined by
<img/>. These elements have an additional slash after the tag-definition, that tells the browser that there is no end-tag.
It often happens that elements need additional properties for more exact classification. In this case you complete the element by adding some attributes. There even are elements with required attributes.
You always add attributes in the start-tag, after the tag definition. Attributes usually consist of an attribute name and an attribute value (<tag-definition attribute="value">). There are also attributes that don't need a value. (<tag-definition attribute>) It is recommendable to use lower case letters for attributes. The class attribute allows you to add special names to elements which are needed for CSS styling.
Tags that occur pairwise can often contain further tags. In our example we emphasize one part of the text in a paragraph.
With <em> we define a text which should be emphasized. Most browsers will display an emphasized text in italics. It is important to understand the difference between just cursive text and highlighted text. The way the text is displayed by the browser can be defined by using CSS. With CSS you could make the browser display emphasized texts in a different way (For example: different color, size and font). HTML only defines, whether a part of a paragraph should be highlighted, or not. It is not responsible for the layout.
Closing of Tags
We always close the tags in the same order as we opened them.
Block- and Inline- Elements
In HTML we differentiate between two types of visible elements:
Block-elements automatically add a line break before and after them.
pis a block-element.
Inline elements are positioned inside the text flow:
emis an inline-element and adds no line breaks.
With CSS you can also set the display type of an element.
Better readability for HTML-Codes
For better readability of your HTML-Code you should indent your elements with some white spaces.
This could make your files a bit bigger, but it will be easier for you to read and understand your codes later.
HTML offers the possibility to add comments in the code. Comments allow you to add notes in the code, which visitors of the page can't see. Comments are useful if you want to add information about the code that makes it easier to understand it. You shouldn't add private/important data in comments, because everyone can view the HTML code with a browser. You can also hide parts of your code for the page if you are working on it.
The structure of an HTML comment is easy. Like all other HTML tags a comment starts with an angle bracket. Then an exclamation mark and two dashes(<!--). Then the text. You end the comment with two dashes and an angle bracket (-->). It should be easier for you to understand how an HTML comment works if you see an example:
What is the purpose of HTML and what isn't?
For HTML you always should remember a rule: HTML is only responsible for the structure of contents, not for their layout. <strong> is a good example: Most browsers display <strong> bold, but this is not the real target of this tag. <strong> only has to highlight the text. Later you set its appearance with CSS.