(@ HTML. Basics: Building Blocks of the Web @ Key Concepts & Summary HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure for content on the web. HTML Structure: Web pages are built using a hierarchy of HTML elements. Elements: Consist of a start tag, content, and an end tag (e.g.,
). Some are self- closing (e.g.,
).
,, Essential Tags: , , form the fundamental structure of an HTML document. Headings: to define heading levels, with being the most important. Paragraphs:
tags are used to define blocks of text. Text Formatting: Elements like , , , allow for semantic and presentational formatting of text. Styles: Inline styles (using the style attribute) can be applied directly to elements for visual changes. Editors: HTML can be written using simple text editors or more advanced IDEs. © Detailed Notes 1, Whal is HTML? Definition: HTML stands for HyperText Markup Language. It's the standard language used to create web pages and web applications. Markup Language: It uses a series of fags to describe the structure and content of a web page. It's not a programming language; it doesn't have logic or computations. Hypertext: Refers to the way web pages link together, allowing users to navigate between documents. 2. Basic HTML Document Structure Every HTML document follows a fundamental structure: Page Title My First Heading
My first paragraph.
: Definition: This declaration defines the document type and version of HTML. It's not an HTML tag itself but an instruction to the browser about what type of document to expect. Explanation: For modern HTMLS, it's always . It ensures browsers render the page in "standards mode." element: Definition: The root element of an HTML page. All other elements are nested inside it. Explanation: It signifies the beginning and end of the HTML document. element: Definition: Contains meta-information about the HTML page, not visible directly on the web page. Explanation: Information here includes the page title, character set, links to stylesheets, scripts, and other metadata for search engines or browser display configuration. element: Definition: Specifies the title of the HTML page, which appears in the browser's title bar or tab. Explanation: Crucial for user orientation and search engine optimization (SEO). <body> element: Definition: Contains all the visible content of an HTML page. Explanation: This includes headings. paragraphs, images, links, lists, tables, etc. If users can see it on the page, it belongs inthe <body> . 3. HTML Elements Definition: An HTML element is defined by a start tag, some content, and an end tag. Syntax: <tagname attribute_name="value"> Key Characteristics: Always come in name/value pairs: name="value" . Attribute values should always be enclosed in quotes (single or double). Double quotes are most common. Common Attributes: href attribute: Used with <a> (anchor) tag to specifv the URL of the page the link goes to. Example: <a href="https://www.w3schools.com">Visit W3Schools</a> sre attribute: Used with <img> (image) tag to specify the path to the image to be displayed. Example: <img src="image.jpg" alt="Description of image"> width and height attributes: Used with <img> to specify the dimensions of an image. Example: <img src="image.jpg" width="500" height="600"> alt attribute: Used with <img> to provide an âalternative text" for an image. Explanation: Important for accessibility (screen readers) and when the image cannot be displayed (broken link, slow connection). style attribute: Used to add inline stvles to an element. such as color. font. size, etc. Example: <p style="color:blue;">This is a blue paragraph.</p> lang attribute: Declares the language of the document. Important for accessibility and search engines. Example: <html Lang="en"> title attribute: Provides extra information about an element, which is often displayed as a tooltip when the mouse hovers over the element. Example: <p title="I'm a tooltip">This is a paragraph.</p> 5. HTML Headings ( <h1> to <h6> ) Definition: Headings are used to define titles and subtitles on an HTML page. Hierarchy: Ranging from <h1> (most important/largest) to <h6> (least important/smallest). Semantic Importance: Browsers and search engines use headings to understand the structure and importance of content. Do not use headings just for styling; use CSS for that. <hi>This is Heading 1</h1> <h2>This is Heading 2</h2> <h3>This is Heading 3</h3> <h4>This is Heading 4</h4> <h5>This is Heading 5</h5> <hĂ©>This is Heading 6</hĂ©> 6. HTML Paragraphs ( <p> ) Definition: The <p> element defines a paragraph of text. Behavior: Browsers automatically add some whitespace (margin) before and after a paragraph. <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> Line Breaks ( <br> ): If you want to insert a line break without starting a new paragraph, use the <p>This is a paragraph.<br>This is a new line within the same paragraph.</p 7. HTML Styles (Inline Styling) Definition: The style attribute is used to add inline styling to an HTML element. <b> - Bold text (presentational): Renders text in bold. Purely visual. Example: <b>This text is bold.</b> <strong> - Important text (semantic): Renders text in bold. Indicates strong importance. Screen readers might emphasize this text. Example: <strong>This text is important! </strong> <i> - Italic text (presentational): Renders text in italics. Purely visual. Example: <i>This text is italic.</i> <em> -Emphasized text (semantic): Renders text in italics. Indicates emphasis. Screen readers might stress this text. Example: <em>This text is emphasized.</em> <mark> - Marked/highlighted text: Highlights text, typically with a yellow background. Example: Do not forget to buy <mark>milk</mark> today. <small> - Smaller text: Renders text in a smaller font size. Example: <p>This is <small>small</small> text.</p> <del> - Deleted text: Represents text that has been deleted from a document (with a strikethrough). Example: My favorite color is <del>blue</del> red. <ins> - Inserted text: Represents text that has been inserted into a document (usually underlined). Example: My favorite color is <del>blue</del> <ins>red</ins>. <sub> - Subscript text: Renders text as subscript (slightly below the normal line). Example: H<sub>2</sub>O <sup> - Superscript text: Renders text as superscript (slightly above the normal line). Example: X<sup>2</sup> Relationship between <b> vs <strong> and <i> vs <em>: Historically, <b> and <i> were purely for visual styling. <strong> and <em> were introduced with HTML4 for semantic meaning. While they often look thesameas <b> and <i> by default, their purpose is different. Topper's Tip: For semantic importance, use <Strong> and <em> . For purely visual bolding/italicizing without implying importance, <b> and <i> are fine, but it's generally better practice to use CSS for visual styling when no semantic meaning is intended. y. HTML Editors Definition: Software used to write and edit HTML code. Simple Text Editors: Examples: Notepad (Windows), TextEdit (Mac). Pros: Lightweight, free, good for beginners to understand raw code. Cons: No code highlighting, auto-completion, or error checking. Integrated Development Environments (IDEs) / Code Editors: Examples: VS Code, Sublime Text, Atom, Notepad++. Pros: Code highlighting, auto-completion, syntax checking, integrated terminals, extensions for advanced features. Cons: Can be more resource-intensive, may have a steeper learning curve for advanced features. How to Edit HTML: Open your chosen editor. Write/paste HTML code. Save the file witha «html or .htm extension (e.g., index.html , mypage.html ). Open the saved file in a web browser (e.g., Chrome, Firefox) to see the rendered page. © Topper's Tips & Tricks Worked Examples Example 1: Basic HTML Structure with Headings and Paragraphs Problem statement: Create an HTML page titled "My Web Page" that includes a main heading "Welcome to My Page" and two paragraphs of introductory text. Solution: <!DOCTYPE html> <html Lang="en"> <head> <titLe>My Web Page Welcome to My Page
This is my very first web page created using basic HTML. I'm learning h
HTML elements Like headings and paragraphs help organize information cl Reasoning: : Essential doctype for HTML5. : Root element, specifying English language.
: Contains metadata. My Web Page : Sets the title visible in the browser tab. : Contains all visible content. Welcome to My Page : The main, most important heading. tags: Define the two separate paragraphs of text. Example 2: Using Attributes and Basic Styling Problem statement: Create an HTML snippet that displavs a bold, red paragraph of text, followed by a link to Google with a tooltip, and an image from pic. jpg that is 300px wide and 200px tall, with "A beautiful landscape" as alternative text. Solution:
Attributes & Styling Reasoning:
...
:The tag holds the paragraph. The style attribute sets the text color to red. The tag makes the text bold. ...:The tagcreatesa hyperlink. href : Specifies the target URL. target="_blank" : Opens the link in a new tab. title : Provides a tooltip when hovering over the link.
: Inserts two line breaks for visual separation. 
:The ![]()
tag embeds an image. src : Specifies the image file path. alt : Provides alternative text for accessibility. width and height : Set the image dimensions. Example 3: Text Formatting and Semantic Elements Problem statement: Display a sentence where "urgent" is strongly important, "important" is simply bold, "stress" is emphasized, "slight" is italic, a numerical value is superscript, and a chemical formula is subscript. Solution: ., ., d) What is the purpose of the elementin an HTML document? a) It contains all the visible content of the page. b) It defines the main heading of the page. c) It contains meta-information about the HTML document, not directly displayed to the user. d) It links external stylesheets to the document. Write the HTML code to display "My Product Info" as the title in the browser tab. Fill in the blanks: Attributes provide specified in the 4 information about HTML elements and are always What is the semantic difference between and tags? When would you use each? Create an HTML paragraph that says "Hello World!" in blue text. Animage banner.png needs to be displayed with an alternative text "Website Banner" anda width of 100% of its container. Write the HTML tag for this. This is a paragraph.
Which HTML heading tag represents the least important heading? a) b) c) d) Write a short HTML document with a main heading, a paragraph, and a line break separating two phrases within that paragraph. Solutions c) This is the standard and correct declaration for HTMLS. c) It contains meta-information about the HTML document, not directly displayed to the user. Option a) describes the element. Option b) describes (though cancontain ). Option d) is true, but not the sole purpose; it's one type of meta-information. <head> <title>My Product Info Attributes provide additional information about HTML elements and are always specified in the start tag. (bold text): This is a presentational tag. It makes text visually bold without adding any semantic significance. Use it when you want to visually bold text for aesthetic reasons, but the text itself isn't more important than surrounding text. (important text): This is a semantic tag. It indicates that the enclosed text has strong importance or seriousness. Browsers typically render it bold by default, but screen readers might emphasize it, and search engines understand its importance. Use it when the content is truly important. Hello World!
width as an attribute expects an integer ( width="100" would mean 100 pixels). To specify a percentage, use CSS viathe style attribute. This is a paragraph.
or, if was intended: This is a paragraph.
or a common fix if both were intended: This is a paragraph.
The key is that tags must be closed in the reverse order they are opened. c) isthe mostimportant, isthe least. is nota valid HTML heading tag. Forgetting or : While browsers might render the page without them, it can trigger "quirks mode" and lead to inconsistent rendering across different browsers. Always include them. Missing End Tags: This is a very common error, especially for ,
,or
. While browsers are forgiving, it can lead to unexpected layout issues or incorrect styling. This is incorrect.
S/SEPGNG? because vou want big text. If it's not a heading, use a paragraph ( ) with CSS styling ( font-size , font-weight ) instead. This harms SEO and accessibility. Ignoring the alt attribute for ![]()
: This is crucial for accessibility (screen readers) and when images fail to load. Provide descriptive alt text. Confusing / with / : While they might look similar, remember the semantic difference. Use semantic tags when importance/emphasis is intended. Using spaces in file names: When linking to local files (images, other HTML pages). spaces in file names can cause issues. Use hyphens ( - ) or underscores ( _ ) instead (e.g., my- image. jpg ). Saving with wrong extension: Always save your HTML files with -html or .htm extension, not Exe, Not checking your code in a browser: Always open your .html file in a browser to see how it renders. What you typed in your editor isn't what people will see on the web. Over-reliance on inline styles: While the style attribute is handy for auick changes, for larger projects, it's better to use internal (
