Skip to content
GK24
GK NotesComputer AwarenessHTML and Web Designing Basics

HTML and Web Designing Basics: Tags and Attributes

Computer awareness notes on HTML and web designing: document structure, container and empty tags, attributes, forms, CSS, HTML5 and web terms for exams.

By · Published · 6 min read

HTML and Web Designing Basics: Tags and Attributes — GK24 title card
HTML and Web Designing Basics: Tags and Attributes — GK24 title card

Every page you open in a browser is a text file written in HTML, the HyperText Markup Language. HTML does not calculate or decide anything; it only marks up content, telling the browser that this line is a heading, that block is a paragraph, this word is to be shown in bold and that phrase is a link to another page. It was created by Tim Berners-Lee at CERN around 1991, along with the first browser and the first web server, and the standards are now looked after by the World Wide Web Consortium, usually written as W3C. For banking, SSC and railway examinations this topic yields steady one-mark questions on tag names, attributes, the structure of a document and the vocabulary of the web.

How an HTML document is built

An HTML file is saved with the extension .html or .htm and can be written in any plain text editor. It begins with a document type declaration, written as <!DOCTYPE html>, which tells the browser which version of the language is being used. Everything else sits inside the html element, which has two children. The head holds information about the page rather than content shown on it: the title that appears on the browser tab, the character encoding, the description used by search engines, and the links to style sheets and scripts. The body holds everything the visitor actually sees. HTML is not case sensitive, so the body tag may be written in capitals or small letters, although small letters are the convention. A comment is written between <!-- and --> and is ignored by the browser.

Tags, elements and attributes

A tag is the keyword inside angle brackets. Most tags come in pairs, an opening tag and a closing tag with a forward slash, and everything between them is the element's content; these are called container tags, and the paragraph, heading, body, table and list tags are all of this kind. A few tags stand alone with nothing to enclose, and these are called empty tags or void tags: the line break, the horizontal rule, the image tag and the input tag are the standard examples. An attribute is written inside the opening tag as a name and a value, and it modifies the element. Common attributes are src for the file an image loads, alt for the text shown if the image fails, href for the destination of a link, id and class for naming an element so that style or script can find it, and width and height for size.

PurposeTagContainer or empty
Largest to smallest headingh1 to h6Container
ParagraphpContainer
Line breakbrEmpty
Horizontal rulehrEmpty
Bold and italicb or strong, i or emContainer
Hyperlink, with the href attributeanchor tag, written as aContainer
Image, with the src and alt attributesimgEmpty
Unordered and ordered list, with list itemsul and ol, with liContainer
Table, row, header cell, data celltable, tr, th, tdContainer
Form and its controlsform, input, textarea, select, buttonForm is a container; input is empty

Lists, tables and forms

There are three kinds of list. An unordered list shows bullets, an ordered list shows numbers or letters, and a definition list pairs a term with its description. A table is built row by row: the table element holds table rows, and each row holds header cells or data cells. The attributes colspan and rowspan let a cell stretch across columns or rows. A form is the part of a page that collects input from the visitor and sends it to the server. The elements inside a form are called controls, and they include the text box, password box, radio button, check box, drop-down list, text area, submit button and reset button. Most of these are produced by the input tag with a different value of its type attribute, and the form's own attributes, action and method, say where the data goes and how it is sent, usually by the GET or the POST method.

Cascading Style Sheets

HTML says what the content is; CSS, or Cascading Style Sheets, says how it should look: colour, font, size, spacing, borders, background and position. Style can be applied in three ways. Inline style is written in the style attribute of a single tag and affects only that element. Internal style is written inside a style element in the head and affects that one page. External style lives in a separate file with the extension .css and is attached to the page by a link element in the head; this is the best practice, because one file then controls an entire website. A rule has a selector and a declaration block, and a declaration is a property with a value. Several properties can often be set together through a shorthand property: the list-style property sets the type, position and image of a list marker at once, just as font, margin, padding and border do for their families.

The vocabulary of the web

  • A web page is a single document; a website is a set of related pages; the first page that opens is the home page.
  • A URL, or Uniform Resource Locator, is the address of a page; it names the protocol, the domain and the path.
  • HTTP is the protocol that carries web pages, and HTTPS is the same protocol secured by encryption.
  • A web browser is the program that requests and displays pages; a web server is the computer that stores and sends them.
  • DNS, the Domain Name System, translates a domain name into the numeric IP address of the server.
  • A static page is the same for every visitor; a dynamic page is built when it is requested.
  • JavaScript runs in the browser and is therefore client-side scripting; PHP and similar languages run on the server and are server-side scripting.
  • A WYSIWYG editor, standing for what you see is what you get, lets a page be designed visually instead of by typing tags.
  • Responsive design makes one page adjust itself to a desktop screen, a tablet and a phone.

HTML5 and good practice

HTML5, the version in use today, became a W3C Recommendation in 2014. It added elements that describe the meaning of a block rather than its appearance, such as header, nav, section, article, aside and footer, along with the audio, video and canvas elements, which removed the need for separate plug-ins to play media or draw graphics. It also added new input types for email, date, number and range, so that the browser itself can check what has been typed. Good practice is to keep structure in HTML, appearance in CSS and behaviour in JavaScript, to give every image an alt attribute so that a screen reader can describe it, and to use one h1 heading for the page title with lower levels nested in order.

Exam Point of View

Questions on this topic are short and factual. The full forms of HTML, HTTP, CSS, URL, DNS and WYSIWYG are asked outright, with HyperText Markup Language against HyperText Transfer Protocol as the standard confusion. Tag questions follow three patterns: which tag does a given job, which of the four is an empty tag, and which is a container tag. Attribute questions turn on src against href against alt. Form questions nearly always ask what the elements of a form are called, the answer being controls, or which input type produces a radio button or a check box. CSS questions ask the full form, the three ways of applying style, and shorthand properties such as list-style. HTML5 is asked through its semantic and media elements.

Important Facts

HTMLHyperText Markup Language; created by Tim Berners-Lee at CERN, around 1991
Standards bodyWorld Wide Web Consortium, written as W3C
File extensions.html or .htm; style sheets use .css
Document partsDOCTYPE declaration, then the html element containing head and body
Empty tagsbr for line break, hr for horizontal rule, img for image, input for a form control
Heading levelsh1 to h6; h1 is the largest and is normally used once per page
Key attributeshref for a link's destination, src for a file to load, alt for alternative text
List tagsul for unordered, ol for ordered, li for an item, dl with dt and dd for a definition list
Table tagstable, tr for a row, th for a header cell, td for a data cell; colspan and rowspan to merge
Form controlsText box, password, radio button, check box, drop-down, text area, submit and reset
Form attributesaction for where data goes, method for how it is sent, usually GET or POST
CSSCascading Style Sheets; applied inline, internally or externally, the external file being best practice
Comment syntaxWritten between an angle bracket with exclamation and two hyphens, and two hyphens with an angle bracket
HTML5W3C Recommendation in 2014; added header, nav, section, article, aside, footer, audio, video and canvas

Practice MCQs on this topic

Q1.Computer AwarenessAsked in: Delhi · 7 Aug 2021, Shift 2Medium

Which CSS property allows you to set multiple list properties at once?

  1. A.list-style-type
  2. B.list-style
  3. C.list-style-position
  4. D.list-style-image
Show answer
Correct answer: B. list-style

Explanation

The correct answer is B, list-style. It is a shorthand property, which means it sets several related properties in a single declaration: the type of the marker, its position and an image to use as the marker, in any order and with the omitted ones falling back to their default values. CSS has several such shorthand properties, among them font, background, margin, padding and border. A is wrong because list-style-type sets only the kind of marker, such as a disc, a circle, a square, decimal numbers or Roman numerals. C is wrong because list-style-position sets only whether the marker sits inside or outside the content box of the list item. D is wrong because list-style-image sets only a picture to be used in place of the standard marker. Each of those three is a single longhand property, and the shorthand list-style is the one that carries all three.

Q2.Computer AwarenessEasy

Which HTML element contains all the content that is visible to the visitor on a web page?

  1. A.The head element
  2. B.The title element
  3. C.The body element
  4. D.The meta element
Show answer
Correct answer: C. The body element

Explanation

The correct answer is C, the body element. An HTML document has two parts inside the html element, and the body is the one that holds everything the visitor actually sees: headings, paragraphs, images, tables, lists, links and forms. It is a container tag, with an opening and a closing tag, and it encloses the whole visible document. A is wrong because the head element holds information about the page rather than content shown on it, such as the character encoding, the description used by search engines and the links to style sheets and scripts. B is wrong because the title element sits inside the head and supplies the text that appears on the browser tab and in search results, not content in the page itself. D is wrong because meta is an empty tag placed in the head to carry metadata such as the encoding, the viewport setting and the page description.

Q3.Computer AwarenessAsked in: Rajasthan · RSSB Informatics Assistant 2018 OfficialEasy

The basic elements of a form are called

  1. A.objects
  2. B.table
  3. C.record
  4. D.controls
Show answer
Correct answer: D. controls

Explanation

The correct answer is D, controls. A form is the part of a page that collects information from the visitor, and the individual items placed in it to receive that information are called controls, or form controls: the text box, password box, radio button, check box, drop-down list, text area, submit button and reset button. Most are produced by the input tag with a different value of its type attribute, and each normally carries a name attribute so that the server can tell the values apart. A is wrong because object is a general programming term and also the name of a separate HTML element used to embed external resources. B is wrong because a table arranges data in rows and columns and has nothing to do with collecting input, although tables were once misused to lay forms out. C is wrong because a record is a database term, meaning one complete row of related fields.

Q4.Computer AwarenessEasy

HTML stands for

  1. A.HyperText Markup Language
  2. B.HighText Machine Language
  3. C.HyperTransfer Markup Language
  4. D.Hyperlink Text Making Language
Show answer
Correct answer: A. HyperText Markup Language

Explanation

The correct answer is A, HyperText Markup Language. Hypertext means text that carries links to other text, so that a reader can jump from one document to another instead of reading in a fixed order, and markup means the system of tags that labels each part of the content for the browser. B is wrong because no language called HighText Machine Language exists; machine language is the binary instruction set of a processor and is unrelated. C is wrong because transfer belongs to HTTP, the HyperText Transfer Protocol, which is the rule set used to carry pages across the network, not the language they are written in; candidates frequently confuse the two expansions, so keep them apart. D is wrong because the third word is Markup, not Making. The language was created by Tim Berners-Lee around 1991 and its standards are maintained by the World Wide Web Consortium.

Q5.Computer AwarenessEasy

Who is credited with developing HTML and the World Wide Web?

  1. A.Charles Babbage
  2. B.Tim Berners-Lee
  3. C.Dennis Ritchie
  4. D.Vint Cerf
Show answer
Correct answer: B. Tim Berners-Lee

Explanation

The correct answer is B, Tim Berners-Lee. Working at CERN, the European nuclear research organisation, he proposed a hypertext system in 1989 and by 1991 had written HTML, the first web browser and the first web server, and he went on to found the World Wide Web Consortium, which maintains the standards. A is wrong because Charles Babbage designed the Difference Engine and the Analytical Engine in the nineteenth century and is called the father of the computer. C is wrong because Dennis Ritchie created the C programming language and, with Ken Thompson, the Unix operating system. D is wrong because Vint Cerf, with Robert Kahn, designed the TCP and IP protocols and is called a father of the internet, which is a different achievement: the internet is the network of networks, while the web is one service running on it.

Q6.Computer AwarenessEasy

Which of the following is an empty tag in HTML?

  1. A.The paragraph tag
  2. B.The line break tag
  3. C.The table tag
  4. D.The anchor tag
Show answer
Correct answer: B. The line break tag

Explanation

The correct answer is B, the line break tag. An empty or void tag has no closing tag because it encloses no content; it simply performs an action at the point where it is written, and the line break tag, written as br, moves the following text to a new line. The other standard empty tags are hr for a horizontal rule, img for an image and input for a form control. A is wrong because the paragraph tag is a container: it has an opening and a closing tag and the text of the paragraph sits between them. C is wrong because the table tag is a container that encloses rows and cells, and leaving it unclosed breaks the layout. D is wrong because the anchor tag is a container too; the words that become clickable are placed between its opening and closing tags, while the destination goes in the href attribute.

Q7.Computer AwarenessEasy

Which HTML tag produces the largest heading on a web page?

  1. A.The h1 tag
  2. B.The h6 tag
  3. C.The head tag
  4. D.The big tag
Show answer
Correct answer: A. The h1 tag

Explanation

The correct answer is A, the h1 tag. HTML offers six levels of heading, from h1 down to h6, and h1 is the largest and most important; it is normally used once on a page, for the page's own title, with h2 for the main sections and h3 for their subsections. B is wrong because h6 is the smallest of the six heading levels, the opposite of what is asked. C is wrong because head is not a heading at all: it is the section at the top of the document that holds information about the page, such as the title shown on the browser tab, the character encoding and the links to style sheets, and nothing in it appears in the page body. D is wrong because the big tag merely increased font size by one step and is obsolete in HTML5, where font size belongs to CSS, not to a tag.

Q8.Computer AwarenessMedium

Which attribute of the anchor tag specifies the address of the page the link points to?

  1. A.src
  2. B.href
  3. C.alt
  4. D.link
Show answer
Correct answer: B. href

Explanation

The correct answer is B, href. It stands for hypertext reference and holds the URL of the destination, which may be another website, another page of the same site or a named position within the same page. The text or image placed between the opening and closing anchor tags is what the visitor clicks. A is wrong because src, short for source, gives the file to be loaded by an image, script, audio, video or inline frame element; it brings a resource into the page, whereas href points away from it. C is wrong because alt supplies alternative text for an image, shown when the picture cannot load and read aloud by screen readers, which also makes it important for accessibility and for search engines. D is wrong because link is an element placed in the head to attach an external style sheet, not an attribute of the anchor tag.

Q9.Computer AwarenessMedium

What is the correct syntax for writing a comment in HTML?

  1. A.// this is a comment
  2. B.<!-- this is a comment -->
  3. C./* this is a comment */
  4. D.<comment> this is a comment </comment>
Show answer
Correct answer: B. <!-- this is a comment -->

Explanation

The correct answer is B, a comment opening with an angle bracket, an exclamation mark and two hyphens and closing with two hyphens and an angle bracket. The browser ignores everything between them, so comments are used to explain the code to other developers or to switch a block of markup off temporarily without deleting it. A is wrong because two forward slashes begin a single line comment in C, C plus plus, Java and JavaScript, not in HTML. C is wrong because a slash and an asterisk delimit a multi-line comment in those same languages and in CSS, so this is the syntax used inside a style sheet rather than in markup. D is wrong because HTML has no comment element; writing such a tag would simply leave an unknown element in the document, and the text inside it would still be displayed.

Q10.Computer AwarenessEasy

CSS, used along with HTML to design web pages, stands for

  1. A.Computer Style Sheets
  2. B.Cascading Style Sheets
  3. C.Creative Style System
  4. D.Colourful Style Sheets
Show answer
Correct answer: B. Cascading Style Sheets

Explanation

The correct answer is B, Cascading Style Sheets. The word cascading describes the way conflicting rules are resolved: styles flow down from several sources, namely the browser's defaults, the author's style sheet and the user's own settings, and the cascade decides which rule wins, with specificity and order of appearance also counting. CSS controls colour, font, size, spacing, borders, background and layout, keeping appearance separate from the structure that HTML provides. A, C and D are wrong because no such expansion is used in any standard; they are written only to look plausible. Candidates should also remember the three ways of applying CSS, namely inline through the style attribute, internal through a style element in the head, and external through a separate file linked in the head, which is the preferred method.

Q11.Computer AwarenessEasy

Which HTML tag is used to create an ordered list?

  1. A.The ul tag
  2. B.The ol tag
  3. C.The li tag
  4. D.The dl tag
Show answer
Correct answer: B. The ol tag

Explanation

The correct answer is B, the ol tag. An ordered list numbers its items automatically, and its type attribute, or the CSS list-style-type property, decides whether the markers are decimal numbers, lower or upper case letters, or lower or upper case Roman numerals. A is wrong because the ul tag creates an unordered list, whose items carry bullets such as a disc, a circle or a square and have no implied sequence. C is wrong because the li tag marks a single list item and must sit inside either an ordered or an unordered list; by itself it creates no list. D is wrong because the dl tag creates a definition or description list, in which each term, marked with dt, is paired with its description, marked with dd. The three list types and their tags are a standard matching question.

Q12.Computer AwarenessMedium

In the image tag of HTML, which attribute specifies the path of the image file to be displayed?

  1. A.alt
  2. B.href
  3. C.src
  4. D.title
Show answer
Correct answer: C. src

Explanation

The correct answer is C, src. Short for source, it holds the path or URL of the image file that the browser must fetch and display, and without it the image element has nothing to show. A is wrong because alt gives alternative text, displayed in place of the picture if it cannot be loaded and read out by screen readers for visually impaired users; it is strongly recommended on every image but it does not locate the file. B is wrong because href is the attribute of the anchor and link elements, giving the address a link points to, and it is not used by the image tag at all. D is wrong because title supplies advisory text that most browsers show as a tooltip when the pointer rests on the element; it is optional and decorative. Remember that img is also an empty tag.

Frequently Asked Questions

What is the difference between a container tag and an empty tag?

A container tag has an opening and a closing tag and encloses content between them, as the paragraph, body and table tags do. An empty or void tag encloses nothing and is written as a single tag; br, hr, img and input are the standard examples.

What is the difference between HTML and HTTP?

HTML, the HyperText Markup Language, is the language in which a web page is written. HTTP, the HyperText Transfer Protocol, is the set of rules by which a browser requests that page and a server sends it. HTTPS is the same protocol secured by encryption.

What are the three ways of applying CSS to a page?

Inline, written in the style attribute of a single tag and affecting only that element; internal, written in a style element in the head and affecting one page; and external, kept in a separate .css file and attached by a link element, which is the preferred method because one file styles a whole site.

What are the elements inside an HTML form called?

They are called controls, or form controls. They include the text box, password box, radio button, check box, drop-down list, text area, submit button and reset button, and most of them are produced by the input tag with a different value of its type attribute.

What is the difference between the src and the href attribute?

The src attribute gives the file that an element must load into the page, as an image, script, audio or video does. The href attribute gives the address that a link or a style sheet points to. In short, src brings a resource in and href points away.

What did HTML5 add to the language?

HTML5, a W3C Recommendation in 2014, added semantic elements such as header, nav, section, article, aside and footer, the audio, video and canvas elements that removed the need for plug-ins, and new input types such as email, date, number and range that the browser can validate.

Sources

View all