What is HTML?
HTML stands for HyperText Markup Language. It serves as the foundation for creating web pages, defining the structure and content of the website.
Why is HTML important?
Many small websites are created using only HTML and CSS. Larger websites use more complex technologies like content management systems (CMS), blogging tools, or e-commerce software. These technologies ultimately produce HTML and CSS, which are then sent to your browser. Knowing HTML allows you to insert content such as images, audio, video, or animations into your web pages. If you are interested in front-end development, having a good grasp of HTML along with CSS is essential.
Building your First Web Page: The Basic Structure
Let’s explore the building blocks of an HTML document. Every web page has a similar structure:
DOCTYPE declaration: A DOCTYPE declaration tells a browser which version of HTML the page is using. The use of a DOCTYPE helps the browser to render a page correctly.
HTML uses elements to describe the structure of pages. Elements appear within angle brackets and usually has an opening and closing tag. It has two main sections:
Head section: This contains information about the page that isn’t displayed directly, like the title of the page that is displayed in the browser tabs.
- Title element: This contains the title of your web page, essential for search engines and user experience.
Body section: Everything inside this element is displayed inside the browser. It contains all the visible components of your page such as text,images etc. Here are some of the common tags you’ll use within the body element.
Paragraphs(<p>): Paragraph tags defines a block of text.
Images: You can insert images in your documents with <img> tag, specifying the image source.
Links(<a>): Link tags allow you to move from one web page to another enabling the very idea of browsing or surfing.
Lists: You’ll come across numerous occasions where you need to use lists. HTML provides three different types:
Ordered lists (<ol>): Each item in the list is numbered.
Unordered lists (<ul>): begins with a bullet point.
Definition lists (<dl>): are made up of a set of terms along with their definitions.
Adding Text and Formatting
With HTML you can format your text beyond just headings and paragraphs. Here are two that are commonly used:
Inline elements: Inline elements allow you to format a specific portion of text, like making it bold (<b>), italic(<i>), or underlined (<u>)
Block elements: Block level elements always appear to start on a new line in the browser window. Examples of block elements are <h1>, <p>, <ul> and <li>.
Conclusion: Get coding and Explore More!
This just the tip of the iceberg of what you can do with HTML. With these basic in your toolbox, you can start building simple web pages and experiment with different layouts. Here are some resources to help you keep learning:
W3Schools: https://www.w3schools.com/html/ - A comprehensive online HTML tutorial with examples and exercises.
Codecademy: https://www.codecademy.com/catalog/language/html-css - Interactive lessons that guide you through HTML basics and beyond.
FreeCodeCamp: https://www.freecodecamp.org/news/html-crash-course/ - Offers free HTML courses and projects to practice your skills.
Remember, learning to code is a journey, not a destination. So, start exploring HTML, experiment and have fun while you make your mark on the web!