HTML Basics


HomeWeb Basics → HTML Basics


HTML Syntax: Tags

The syntax of html is defined by a series of standardized tags. Tags er needed to add basic formatting to a HTML page.

Typically, tags are split in a start tag and end tag, the start tag with a name in angle (greater than/less than) brackets:
<body>
The closing tag with the same name in brackets, but with a slash in front:
</body>

Some basic tags do not have an open/closing form, but are standing alone like
<br> (line break)
<img> (which mostly contains a source link inside the tag like <img src=”funny.jpg”>)

List of HTML Tags here: http://www.w3schools.com/tags/default.asp

HTML Document Structure

A HTML (Hyper text markup Language) document is typically structured in a <head> and <body> part, enveloped by a html start and html end tag. While the <head> is invisible and contains metatags and links to additional data like CSS and Javascript files, the body contains the visible part of a web page.

<html>

   <head>  
   <!-- Meta informations here -->
   </head

   <body> 
   <!-- Content here -->
   </body>
</html>

HTML Elements

HTML documents are composed entirely of HTML elements that, in their most general form have three components: tags, ; sometimes with attributes within the start tag; and finally, any textual and graphical content between the start and end tags, perhaps including other nested elements. The HTML element is everything between and including the start and end tags. Each tag is enclosed in angle brackets. The general form of an HTML element is therefore:

Without attributes

<tag>Content</tag>.

With attributes

<tag attribute="value">Content</tag>.

The name of an HTML element is the name used in the tags. As already stated above, the end tag’s name is preceded by a slash character, “/”. If attributes are not mentioned, default values are used in each case.

Tags are helping to structure and format a HTML document. HTML tags are automatically supported by browsers, even if they have not been specified in the document’s Cascading Style Sheets (CSS). But as each browser might interprete these standard tags in different ways, it is strongly recommended to specify at least the most important tags in the particular CSS.

Element examples

Head Element

Header of the HTML document:<head>…</head>. Usually the title should be included in the head, for example:

<head>
  <title>The Title</title>
</head>

Note: the title tag in the header is displayed in the browser’s top border or tab – it is not the  title inside the Content element (body) of the page.

Headings – h tags – not be confounded with head element:

HTML headings are defined with the <h1> to <h6> tags:

<h1>Heading1</h1>

<h2>Heading2</h2>

<h3>Heading3</h3>

<h4>Heading4</h4>

<h5>Heading5</h5>
<h6>Heading6</h6>

1=largest, 6=smallest

Paragraphs – p-tag:

<p>Paragraph 1</p>

<p>Paragraph 2</p>

Line breaks – br tag

Line breaks:<br>. The difference between <br> and <p> is that ‘br’ breaks a line without altering the semantic structure of the page, whereas ‘p’ sections the page into paragraphs. Note also that ‘br’ is an empty element in that, while it may have attributes, it can take no content and it may not have an end tag.

This is a line break<br>
This is the next one<br>

Links – a tag

<a href="http://www.google.com/">A Link to Google</a>

This is a link in HTML. To make a link insert an <a> tag with a href= attribute that holds the URL address of the link.

Comments:

<!-- This is a comment -->

Comments, written in angle braces between !– and — , do not display in the webpage and are comments made from cede editors for code editors. They can help in the structuring and understanding of the markup.

Content elements
Content elements are text, pictures, and since html5, (some) videoformats and (some) audioformats. While text is usually standing between tags and formatted with CSS, media files (picture, video, audio) are within the respective tag and linked in the tag’s atrribute.

<img src="photos/skyline.jpg" width="800px" height="560px" alt="Skyline" title="Skyline of Helsinki with sunset">

The IMG attributes except the media link (src) are optional. In responsive design, image sizes are mostly handled with CSS and not tag attributes. “alt” means alternative text, in the case that the picture can not be displayed for any reason. The title attribute is visible as “balloon” text when the image is touched with the mouse (on desktop/laptop computers).


HomeWeb Basics → HTML Basics

Advertisements