Learning HTML Basics
As you may know, web is a collection of documents that all link together, with strong similarity to the printed documents. Often the web pages are written in HTML (Hypertext Markup Language) or XHTML (eXtensible Hypertext Markup Language), such that both are document-layout and hyperlink-specification language. They define how to display the contents of the document, including text, images, and other support media. The function of HTML is primarily to add structural and semantic information to the raw text of a document.
HTML Elements, Tags and Attributes
HTML is an embedded language, such that the language’s directions or tags are inserted into the HTML document that browser loads for viewing. Web browser uses the information inside the HTML tags to decide how to display or otherwise treat the subsequent contents of an HTML document. HTML documents are composed of a tree of HTML elements, such that each element can have attributes specified. In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between like
<p>In the HTML syntax, most elements are written …</p>
However, not all of these elements require the end tag, or even the start tag, to be present like the br element.
- HTML Element – HTML Element structure or semantics and generally consists of a start tag, content, and an end tag for example, following is a bold element. Example – <b> This is in bold or more dark.</b>
- HTML Tags – HTML Tags are used to mark the start and end of an HTML Element.
- HTML Attributes – HTML Attributes defines property for an element, that consists of a name and value pair appearing within the element’s start tag.
Types of Tags
- Start tag has opening angle bracket (<) followed by element name, zero or more space separated attribute/value pairs, and a closing angle bracket (>). A start tag with no attributes: <p> and A start tag with an attribute: <p class=”info”>
- End tag has opening angle bracket followed by forward slash, the element name, and a closing angle bracket </p>
- Empty tag has some elements that are empty, meaning that they only consist of a single tag and do not have any content and look like opening tags <br>. In XHTML. empty elements must have an end tag or the start tag must end with ‘/>’ so it is used as <br />
- Difference – A tag consists of a left- and right-angle bracket and letters and numbers between those brackets, but an element is the opening and closing tags plus anything between the two tags.
Majorly used HTML tags
| Root Element | html |
| Metadata | head, title, base, link, meta, style |
| Sections | body, article, section, nav, aside, h1, -, h6, header, footer, address |
| Grouping | p, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main, hr |
| Text | a, em, strong, cite, q, dfn, abbr, data, time, code, var, samp, kbd, mark, ruby, rb, rt, rp, rtc, bdi, bdo, span, br, wbr, small, i, b, u, s, sub, sup, |
| Edits | ins, del |
| Embedded Content | img, embed, object, param, video, audio, source, track, map, area, iframe |
| Tables | table, tr, td, th, caption, tbody, thead, tfoot, colgroup, col |
| Forms | form, input, textarea, select, option, optgroup, datalist, label, fieldset, legend, button, output, progress, meter, keygen |
| Scripting | script, noscript, template, canvas |
Boost your chances for better job opportunities. Practice and Prepare for Mobile Testing (Appium) Exam Now!