HTML Elements And Their Functions
HTML stands for Hypertext Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. HTML is heavily used for creating pages that are displayed on the world wide web. Every page contains a set of HTML tags including hyperlinks which are used for connecting to other pages. Every page that we witness, on the world wide web, is written using a version of HTML code. The basic building blocks of any HTML pages are HTML elements.
HTML is a tag-based language used for development of web pages. HTML tags are keywords (tag names) surrounded by angle brackets
<tagname>content</tagname>
- HTML tags normally come in pairs like <p> and </p>
- The first tag in a pair is the start tag(often called the opening tag), the second tag is the end tag (often called the closing tag)
- The end tag is written like the start tag, but with a slash before the tag name
Basic HTML Structure
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>My First Heading</h1><p>My first paragraph.</p></html>
OK…Let me do some explanations
The DOCTYPE declaration defines the document type to be HTML.
The text between <html> and </html> describes an HTML document. The html lang attribute(<html lang=”en”>) is used to identify the language of text content on the web. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation. Typically this is a two letter code such as “en” for English, but it can also be an extended code such as “en-gb” for British English.
The text between <head> and </head> element provides information about the document. The first <meta> tag holds the character set used. To display an HTML page correctly, a web browser must know the character set used in the page. The second <meta> tag holds the viewport element which gives the browser instructions on how to control the page’s dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. The text between <title> and </title> element provides a title for the document. This will be displayed at the title bar.
The text between <body> and </body> describes the visible page content. The <body> element contains all the contents of an html document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one <body> element in an html document.
Other Important HTML Elements
- A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are <h1>, <h2>, <h3>, <h4>, <h5>, <h6> with <h1> being the highest (or most important) level and <h6>the least.
- The <p> element represents a paragraph. A paragraph always starts on a new line, and is usually a block of text.
- The <hr> element defines a thematic break in an html page (e.g. a shift of topic). The hr element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an html page.
- The <br> element is used to insert a line break or carriage-return within a parent element such as a paragraph <p> without breaking out of the parent container. The <br> tag is an empty tag which means that it has no end tag
- The <a> element defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
- The <link> element defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets. The <link> element is an empty element, it contains attributes only.
- The <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ). In unordered lists, list items are usually displayed using bullet points. In ordered lists, list items are displayed using numbers or alphabets.
- The <img> element is used to embed an image in a web page. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
- The <video> element is used to embed video content in a document, such as a movie clip or other video streams.
- The html <form> element is used for creating a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL.
- The <input> element specifies an input field where the user can enter data. The input element is the most important form element. The input element can be displayed in several ways, depending on the type attribute.
- The <section> element is a structural html element used to group together related elements.The <section> element defines sections in a document, such as chapters, headers, footers, or any other sections of the document
- The <div> element is used as a container for html elements . Any sort of content can be put inside the <div> tag!
- <aside> element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes.
- The <span> element is a generic inline container for inline elements and content. It used to group elements for styling purposes (by using the class or id attributes).
- The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
- The <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
- The <footer> element defines a footer for a document or section. A footer element typically contains: authorship information, copyright information, contact information, back to top links, related documents
