HyperText Markup Language
Hypertext - Hypertext is text which contains links to other texts.
Markup Lang - it’s a way to give instructions to a computer about how content should be organized and displayed.
History of HTML
The concept of hypertext was proposed by computer scientist Ted Nelson in the 1960s. In the 1980s, Tim Berners-Lee, a British computer scientist, introduced the World Wide Web (WWW) and developed the first HTML
HTML 4 introduced significant improvements, including better support for forms, scripts, and style sheets. It was a crucial step toward modern web development.
HTML5 (2014) HTML5 was a major milestone, with a focus on multimedia, improved semantics, and better support for web applications. It introduced new elements like <video> <Audio> , and <picture>. HTML5 made web development more versatile and capable.
HTML Element
The file name must be the index.html because it's a default path of our homepage or the root of our website.
HTML Tags & Text Formatting
See the Pen Basic Tags by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML Anchor Tag
The Anchor (a) tag defines a hyperlink, which is used to link from one page to another.
See the Pen Anchor Tag by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML Image
IMG tag is used to embed an image in a web page. and it has two required attributes :
SRC - Specifies the path to the image
ALT - Specifies an alternate text for the image
HTML Video
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
See the Pen HTML Image and Video by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML List
Ordered Lists An ordered list is used to create a list of items in a specific order, typically indicated by numbers.
Unordered Lists An unordered list is used to create a list of items that are not in any particular order. Each list item is marked with a bullet point.
Unordered List Styles :
Disc Default style filled circles
Circle Hollow circles.
Square Squares.
None No bullet points.
Ordered List Styles :
Decimal Default style - decimal numbers.
Lowercase Letters Lowercase letters (a, b, c).
Uppercase Letters Uppercase letters (A, B, C).
Lowercase Roman Numerals (i, ii, iii).
Uppercase Roman Numerals (I, II, III).
See the Pen HTML List by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML Table
HTML tables allow web developers to arrange data into rows and columns. We must write everything inside the table tag.
table Element Defines an HTML table, which is used to organize data into rows and columns.
tbody Element Groups the main content (data rows) of an HTML table.
thead Element Groups the header content (table headings) of an HTML table.
th Element Defines a header cell (table heading) within a table.
td Element Represents a data cell within an HTML table.
tr Element Defines a row within an HTML table.
See the Pen HTML Table by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML Form
The form tag is used to create an HTML form for user input.
The input HTML element is used to create interactive controls for web-based forms to accept data from the user. We must write inside the tag.
The label tag defines a label for many form elements. help user focuses on the input element.
The for attribute of the label tag should be equal to the id attribute of the input element to bind them together.
Check out the codepen for better - practical understanding :
See the Pen HTML Form by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML Semantic Elements
Semantic Element clearly describes its meaning to both the browser and the developer.
Header Represents the introductory content for a section, article, or entire web page. Ex. Contains Logo, site title etc.
Nav Navigation menu links would all be placed in a nav tag.
Main The body of a page should go in the main tag. There should be only one per page.
Article Represents an independent article on a web page. For example, a blog post.
Section Represent a way of grouping together nearby content of a similar theme.
Aside Represents the content that’s less important. It’s mostly used for sidebars (ads).
Footer Represent the base of a page or section. It might include contact information and some site navigation.
Important Things to know . . .
Single Main Tag As a best practice, use only one main tag per HTML page. The main tag should encapsulate the primary content of your webpage, excluding headers, footers, and sidebars.
Use Headers Wisely While you can use multiple header tags, make sure they're appropriately placed within semantic elements like article, section, or as introductory content for the whole page. Each header should provide relevant context.
Avoid Overuse Use semantic elements purposefully and avoid overusing them. Choose elements that accurately represent your content's structure and hierarchy. Overusing them may lead to confuse semantics.
Enhance Accessibility Semantic elements greatly improve web accessibility. Use them to create a clear structure for assistive technologies.
See the Pen HTML Semantic Tags by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.
HTML SEO - Search Engine Optimization
High-Quality Content Create valuable and relevant content that addresses users' needs
Keyword Research Use relevant keywords naturally within your content.
Descriptive Titles Use descriptive and relevant titles for your pages title tag.
Heading Tags Use appropriate heading tags h1, h2, etc... to structure content.
Image Alt Text Provide descriptive alt text for images.
Responsive Design Ensure your website is responsive and mobile-friendly.
Site Speed Optimize your website's loading speed for better user experience using Lighthouse suggestions.
🎉 Configuration 🎉
You Successfully Learn HTML CompletelyLet's Start Learn CSS