HTML Tags and Formatting Examples
Uploaded by
Abhay PetkarHTML Tags and Formatting Examples
Uploaded by
Abhay PetkarCommon questions
Powered by AIThe <a> tag is used to create hyperlinks, allowing users to navigate from one page to another or jump to specific sections within a page. It uses the href attribute to specify the destination URL. The <link> tag, on the other hand, is used to link external resources such as stylesheets and does not render content clickable like the <a> tag. It is placed in the <head> section of an HTML document to provide a relationship between the document and the linked resource .
Inline CSS styles specific HTML elements directly within the style attribute in the tag. It is advantageous for quick and localized styling but less maintainable for larger projects. For example, in styling a paragraph with font size, family, and color, inline CSS is specified directly within the <p> tag. This is less efficient than external or internal CSS for consistent styling across multiple elements and files, as it can lead to duplications and more difficult maintenance .
An HTML layout can be constructed using a basic structure consisting of a document type declaration, followed by <html>, <head>, and <body> tags. Within the <body>, elements such as <h1> for headings and <p> for paragraphs are used to organize content. This foundational structure allows for the layering of more complex styles and scripts, essential for interactive and responsive web design .
To create a background image for an HTML element, the CSS property background-image is used within a style attribute or stylesheet. Its size can be controlled using the background-size property, specifying pixel or percentage values for width and height. For instance, setting a background for a <div> element would involve specifying a URL for the image within background-image and controlling dimensions with background-size .
The <pre> tag in HTML preserves both spaces and line breaks by rendering text exactly as it appears in the code. This is especially useful for formatting code snippets or poems where the exact arrangement of text is important. For instance, using <pre> tags around text will maintain the spacing and formatting rather than having the browser collapse multiple spaces into a single space .
HTML tables are created using the <table> tag, with rows defined by <tr>, headers by <th>, and data cells by <td>. A simple 2x3 matrix can be constructed with a <table> element that includes two <tr> elements, each containing three <td> elements, with optional <th> for headers. This structure is essential for displaying tabular data effectively, as demonstrated in a basic table with companies and countries .
HTML tags define the structure and contents of a web page by denoting elements such as headings, paragraphs, links, and more. They are crucial in web development as they organize content and provide meaning, enabling browsers to display web pages correctly. For example, <h1> to <h6> tags define headings, establishing a hierarchy, while <p> tags define paragraphs to structure text content .
The <figure> tag in HTML is used to group media elements like images or illustrations with optional captions provided using the <figcaption> tag. It provides semantic meaning by associating media content with a caption, improving accessibility and SEO. Unlike standalone image tags, <figure> allows for supplementary information to be closely coupled with images. For instance, using a <figure> tag allows a descriptive caption alongside an image of the Taj Mahal .
HTML provides six heading tags, ranging from <h1> to <h6>, which are used to define headings with decreasing importance. <h1> is typically used for the main title or primary heading with the most significant font size, and <h6> for the least important heading with the smallest font size. Structuring documents with these heading tags helps create a logical flow and hierarchy, which is essential for both user experience and accessibility .
The <b> tag bolds text but provides no semantic meaning, used purely for visual emphasis. The <i> tag italicizes text, often used for foreign words or technical terms, providing a slight semantic distinction. The <mark> tag highlights text, emphasizing content relevant to the user’s current task, and carries semantic meaning by indicating that the marked text is particularly significant .